Blog de diseño

Los sprites son una solución para agrupar imágenes en una sola imagen, en desarrollo de sitios para Internet se usa como técnica de optimización. Cada vez que se muestra una imagen del sitio se realiza un request ó petición al servidor. Si por ejemplo en un sitio existen 20 imágenes de interfaz es decir que no están relacionadas con imágenes de contenido sino que corresponde a botones funcionales, fondos ó iconos etc. , esta página realizará 20 peticiones al servidor para poder mostrar cada una de las imágenes. Si agrupáramos las 20 imágenes en una sola imagen tendríamos solo una petición al servidor y un sitio con mejor desempeño en tiempos de carga.

El sprite de YouTube es un buen ejemplo de como debe realizarse un sprite, es probable que todas las imágenes de interfaz que se usan en YouTube estén dentro de esta imagen. Revisando la imagen se puede ver como está organizada y mantiene una disposición para los elementos. Principalmente botones que no tendrán textos visibles y fondos que se repetirán solo en el eje X. Se puede ver como se dejaron espacios vacíos entre las gradaciones, esto como precaución para elementos que usaran texto y este pueda crecer a tres o cuatro líneas. Pues si no se deja espacio y el texto crece se comenzaría a ver el siguiente fondo.

Tags: CSS, Optimización, Sprite, YouTube

Esta entrada fue posteada el Monday 22 de March de 2010. a las 10:33 am y fue archivada en CSS. Puedes seguir cualquier respuesta de este entrada a través del feed RSS 2.0 . puedes Dejar un comentario, o trackback desde tu sitio.