Texto original: CSS Sprite: ¿Hacer o no hacer?
Traducido de: Ser Sprite o no ser Sprite
Descargo de responsabilidad: los CSS Sprites a los que se hace referencia en este artículo son CSS Sprites . Esta frase nunca ha tenido una traducción al chino fija o convencional. Algunas personas han comenzado a llamarla CSS Sprites. Si lo considera inapropiado, lo intentaremos. Continuaremos haciéndolo en el futuro. Seguiremos llamándonos CSS Sprites. Shenfei (voz)
CSS Sprite existe desde hace un tiempo y se ha convertido en una forma de hacer que su sitio web sea más rápido. Steve Souders acaba de presentar SpriteMe! en Velocity 09 (discutiendo por qué usar un generador de sprites CSS u otra herramienta basada en servidor cuando puedes usar canvas y toDataURL y generar sprites sobre la marcha). Sin embargo, existen algunas ideas erróneas sobre los sprites CSS, la principal es que no tienen inconvenientes.
El principio básico de CSS Sprite es integrar algunas imágenes utilizadas en su sitio web en una sola imagen, reduciendo así la cantidad de solicitudes HTTP para su sitio web. La imagen se representa utilizando las propiedades de fondo y posición de fondo de CSS (vale la pena mencionar que esto también significa que sus etiquetas se vuelven más complejas, la imagen se define en CSS, no en la etiqueta <img>).
El mayor problema con CSS Sprite es el uso de memoria. A menos que la imagen del sprite esté organizada con mucho cuidado, terminarás con una gran cantidad de espacios en blanco inútiles. Mi ejemplo favorito es el del sitio web de WHIT TV, donde esta imagen se utiliza como sprite. Tenga en cuenta que esta es una imagen PNG de 129915.000 píxeles. También está muy bien comprimido y el tamaño de descarga real es sólo de unos 26 KB, pero el navegador no muestra los datos de la imagen comprimida. Cuando esta imagen se descarga y descomprime, ocupará aproximadamente 75 MB de memoria (1299 * 15000 * 4). Si esta imagen no utiliza transparencia alfa, se optimizará a 1299 * 15000 * 3, pero a expensas de la velocidad de renderizado. Incluso entonces, estamos hablando de 55 MB. La mayor parte de esta imagen en realidad está en blanco , no hay nada allí, ningún contenido útil. Simplemente cargar la página de inicio de WHIT hará que el uso de memoria de su navegador aumente a al menos 75 MB, solo por esa imagen. ( PD: Desafortunadamente, el sitio web ha sido revisado recientemente y las imágenes mencionadas en el artículo ya no existen )
No existe una compensación adecuada a favor de un sitio web.
Otra desventaja (aunque no tan importante) es que si una página que usa CSS Sprite se escala usando la función de zoom de página completa proporcionada por algunos navegadores, el navegador necesitará hacer un trabajo adicional para corregir el comportamiento de estos bordes de la imagen. para evitar que las imágenes adyacentes en Sprite queden expuestas. Esto no es un problema para imágenes pequeñas, pero afectará el rendimiento para imágenes grandes.
Ciertamente, hay algunos ejemplos que muestran los beneficios obvios de los sprites CSS, el principal es fusionar un lote de imágenes del mismo tamaño en un solo archivo. Por ejemplo, una serie de iconos de 16×16 utilizados para identificar muchas cosas en su sitio web, o algunos iconos de 32×32 utilizados como encabezados de categorías o similares. Pero nunca es una buena idea combinar imágenes de tamaños muy diferentes, especialmente una imagen alta y delgada junto a una imagen ancha y corta.
Sin embargo, CSS Sprite mejora los tiempos de carga de la página (al menos en la carga inicial de la página y en las cargas posteriores, el navegador almacena en caché la imagen). ¿Hay algo que se pueda sustituir? Desafortunadamente, todavía no existe una alternativa. Muchos navegadores están comenzando a admitir manifiestos fuera de línea y es posible ampliar esto para permitir la descarga de un archivo (como un archivo jar/zip) que contiene una lista de recursos y las URL correspondientes. Pero tal enfoque no se verá hasta dentro de algún tiempo...
Por lo tanto, al decidir si utilizar CSS Sprite, tenga en cuenta que existen muchos factores más allá del rendimiento de carga inicial de la página. Como regla general, si una gran parte de tu objeto CSS no contiene contenido de imagen real, debes evitar usarlo en consecuencia. Del mismo modo, esté atento a posibles problemas futuros mientras mantiene la velocidad de carga de la página y tiene cuidado de evitar errores de memoria e impactos en el rendimiento de Sprite.
Otras deficiencias de CSS Sprite
Las siguientes son algunas de las deficiencias de CSS Sprite mencionadas por algunos internautas en los comentarios de este artículo:
Las imágenes llamadas por CSS Sprite no se pueden imprimir a menos que RichB agregue específicamente la declaración de impresión a @media
Si desea modificar una imagen en Sprite, debe modificar la imagen completa, lo que sin duda aumentará la carga de trabajo de Tom B.
Si encuentra alguna deficiencia en otros Sprites CSS durante el uso, no dude en mencionarla.