¿Cómo enfoca el uso de sprites de imagen en css?¿Cuál es la idea detrás de los sprites de imágenes, cómo abordarlo?
¿Debo tomar todas las imágenes de mi sitio web y combinarlas con un sprite de imagen? ¿Es realmente tan beneficioso?
¿Qué tan difícil es mantener esas imágenes y cambiarlas más adelante?
¿Debo tomar todas las imágenes en mi sitio web y combinarlos para un sprite de imagen?
Por supuesto que no. Lo estás tomando demasiado literal.
Encuentro que los sprites se utilizan mejor para grupos de imágenes similares. Los ejemplos incluyen:
¿Es realmente tan ¿beneficioso?
Si tiene muchos de ellos en un sitio ocupado, muy. Guarda una solicitud para cada imagen, ahorrándole al usuario tiempo y su servidor un montón de conexiones simultáneas.
¿Qué tan difícil es mantener esas imágenes y cambiarlas más adelante?
Si las ha usado lógicamente, es bastante simple. Si necesita agregar otro elemento de navegación, abra su elemento de navegación y amplíelo. Para cosas como la navegación, en realidad puede ser más fácil de mantener porque tiene comparaciones similares a las suyas en el mismo documento.
Editar, después de haber visto one of the more extreme examples, voy a añadir que nunca iría que lejos porque:
Es 60k para descargar. No es enorme, pero en conexiones lentas, eso es 60k que debe descargarse antes de que se muestre nada. Si todos sus recursos visuales están atados, puede hacer que el tiempo de carga parezca más largo.
Su CSS se convierte en un mish-mash sin sentido de background-position comandos. Si desea realizar cambios, debe volver al sprite y medir todo. Una y otra y otra vez.
Dios ten piedad de tu alma si necesitas agrandar algo en la esquina superior izquierda del duende. Probablemente solo agregarías un nuevo sprite debajo de los actuales.
Y eso puede conducir a la hinchazón. De hecho, solo cargar todas estas imágenes podría estar cargando una gran cantidad de material que algunos usuarios nunca verán. Cargando datos no usado es probablemente peor que una cabeza de conexión (teniendo en cuenta la facilidad con contenido estático puede ser servido por múltiples servidores baratos o un CDN)
Los otros ejemplos son mucho más simples y que vale la pena (OMI).
Los sprites son una gran manera de reducir el tiempo de carga en gráficos (a veces), y siempre una forma de reducir solicitudes al servidor. En términos generales, es posible que necesiten una planificación seria, ya que no solo quiere dejar caer un montón de imágenes en un lienzo y exportarlas como un jpeg. Sugeriría que estudies algunos sprites actualmente en uso en compañías más grandes como Amazon. Obtenga una idea de cómo organizan sus elementos y qué tipos de imágenes consideran para su uso en sprites.
También querrá evaluar su sitio y asegurarse de si puede implementarlo correctamente o no. Si no planeabas usarlos para empezar, puede requerir una gran cantidad de seguimiento y actualización para prepararse para ellos.
Los sprites funcionan bien cuando tienes un elemento con al menos una dimensión fija (ancho o alto) y quieres que tenga una imagen de fondo diferente en diferentes circunstancias.
Cuando lo he probado, he encontrado que los archivos de imagen de sprite tienden a ser más pequeños que el tamaño total de los archivos de imágenes individuales de los que están hechos, por lo que puede ahorrar tanto ancho de banda como los otros dos beneficios: solicitudes
Eso no depende del contenido de las imágenes sin embargo.
Personalmente, no pondría imágenes no relacionadas en una imagen de sprite, ya que creo que hace que el mantenimiento no sea obvio. Además, como se menciona en To Sprite Or Not To Sprite, las imágenes de sprites realmente grandes pueden usar bastante memoria del navegador. (Si esto es realmente algo malo depende del contexto.)
La idea es evitar solicitudes HTTP innecesarias. Esto es especialmente un problema si tiene muchos iconos pequeños (por ejemplo, para un editor WYSIWYG como el que se usa en este sitio). Si tiene veinte iconos de 16x16 píxeles, eso no significará mucho ancho de banda, pero todavía significará veinte solicitudes adicionales cada vez que se cargue la página.
Otros candidatos para sprites son estados de botones y cualquier cosa que sea puramente decorativa pero parte del diseño.
Si utiliza cambios de imagen de fondo, también encontrará que tendrá que precargar la imagen de estado de inversión (ya sea con JS o con una codificación rígida) o encontrará cierta latencia como el navegador solicita la imagen no utilizada anteriormente. Los Sprites pueden aliviar eso.
Cosas de las que probablemente no deberías estar haciendo sprites son imágenes que NO son solo elementos gráficos (por ejemplo, gráficos, ilustraciones, avatares, anuncios) o que cambiarán mucho (por ejemplo, avatares o anuncios).
No es imposible cambiar los sprites, pero dependiendo de la cantidad de pensamiento que pongas en la disposición de la hoja de sprites, puede ser muy difícil de hacer. No hay nada que te obligue a hacer que la hoja de sprites esté ultracondensada, pero obviamente es mejor para el tamaño del archivo si no hay mucho espacio en blanco innecesario (ver Google).
Tenga en cuenta que las solicitudes adicionales pueden no ser un problema para usted si tiene un sitio de tráfico relativamente bajo (que casi todo el mundo tiene, a menos que sea Google o Amazon). Sprites aún puede mejorar el rendimiento de los dispositivos móviles, ya que significa menos posibilidades de errores y, por tanto, menor latencia.
Existe una cantidad considerable de sobrecarga de latencia en cualquier conexión http, css sprite reduce la cantidad de solicitudes http necesarias para representar una página, lo que reduce el tiempo de carga de la página. También es una forma fácil de almacenar en caché las imágenes que pueden no mostrarse inicialmente en una página, pero que se mostrarán al pasar el ratón sobre ellas, etc. – Wedge