Youtube y la optimización de recursos
Estaba navegando por youtube y me llamó la atención unos botones amarillos que están usando recientemente en la interfase, quise ver como los hicieron, me interesaba ver que técnica usaron. Click derecho / View background image / sorpresa! me encontré esto.
Todos los elementos gráficos de la interfase del sitio están contenidos en un sólo archivo “master-vfl32776.gif”, desconozco la manera en como posicionan el gif para que despliegue bien en cada caso que se necesita pero es algo ingenioso que no había visto en ningún sitio web. ¿La razón? supongo que es mejor cargar una sola foto aunque pese más que cargar 50 pequeñas imágenes cada vez que alguien visita el sitio. —El server lo agradece—. Otra razón puede ser que de esta forma en un sólo file tienen contenido todo lo que pueda usar la interfase, así no andan buscando y actualizando pequeños archivos de forma individual. O tal vez las dos razones.
Esta técnica al parecer no es nada nueva, se usa en el desarrollo de videojuegos y en los skins de algunos programas como winamp por ejemplo. ¿Interesante no? Uno nunca sabe a donde lo va a llevar el siguiente click :)
Pues si, no es una tecnica nueva, se llaman sprites. Mira este articulo de ALA: http://www.alistapart.com/articles/sprites
También hay generadores online: http://www.csssprites.com
Un saludo.
Pues sí es una técnica bastante conocida, y lo que haces para posicionar las imágenes es utilizar background-position en el CSS y de esa forma le das “coordenadas” para que se muestre el área que deseas.
Muy útil en todo caso, pero por ejemplo en un botón, logo o lo que sea con rollover es bastánte práctico, solo haces una imágen y en la propiedad hover, mueves la imágen ;)
HEY! yo lo suelo usar para botones y hover.
pero no se me habia ocurrido poner todos los elemntos visuales EN UN SOLO ARCHIVO (de no ser muy pesados)
Trataré de implementarlo en mi prox proyecto.
Gracia spor el post! :D
Pues yo no lo conocía bastante interesante.
Vale pues ya lo han dicho allá arriba, también en Deviantart lo usan desde hace tiempo :)
Orale. Bueno así de rollovers para botones si lo he usado en varios sitios, pero nada parecido a tener todo el set de imágenes en un sólo file.
Muchas gracias por comentarlo Droid, era una técnica que no recordaba y que estoy probando ahora mismo para ahorrar carga al servidor :)
Si buena idea por youtube, ese tipo de técnicas lo había usado para los themes de los blogs pero solo para el botón y el hover de dicho botón.
Habrá que empezar a poner la mayoría de los gráficos en uno mismo y claro el server lo agradece jaja
saludos!
Camáras! ahora resulta que ya todos la conocían! ;)
sprites rules, para el record, es usada para asi tener menos llamadas al metodo httprequest y por lo tanto usar menos recursos