¿Por qué usar una hoja de sprite en lugar de imágenes individuales?

No mucho de lo que dijiste como Contras realmente son contras en absoluto.

Cuando carga una imagen grande, solo contiene uno de los diferentes atributos que una imagen necesita (tabla de colores, tipo mime, etc. ej.: imagine que si está utilizando un formato jpg progresivo, una hoja de sprites permitirá que la imagen se escanee una vez, mientras que muchas disminuirán significativamente el tiempo de carga) en lugar de tener la misma información en 100 archivos diferentes, disminuirá el tamaño del archivo en la imagen grande.

También solo habrá UNA solicitud http (o dos, dependiendo de cuántas hojas de spritesheets tenga.) pero si se maneja correctamente, solo uno por pageload.

Si está utilizando imágenes bg en CSS, entonces ya ha hecho los selectores css por lo que no hay trabajo adicional, simplemente copie/pegue la url.

Nunca he encontrado ningún problema de caché con spritesheets que no se pueda resolver presionando ctrl+F5.

No requiere un div con un estilo adecuado en ningún caso. Esto no es un <img> método de reemplazo de etiquetas, se utiliza principalmente para imágenes bg. Como para los botones y conjuntos de iconos.

Los pros superan con creces a los contras en este método, la prueba es que ha sido utilizado por muchos desarrolladores. Si fuera un método terrible, nadie lo habría recogido y alguien ya habría planteado estas cuestiones cuando se puso en uso por primera vez.

Si alguien tiene más que añadir, no seas tímido:)

Google lo describe aquí . Básicamente debería reducir el tiempo de carga de la página. Cada nueva inicialización de conexión añade algún retraso. En algunos casos, también puede reducir el tamaño de la transferencia de datos y, por lo tanto, también reducir el tiempo de carga de la página. Es adecuado para imágenes que cambian raramente o todas juntas (temas). A continuación, el navegador puede utilizar la imagen en caché y necesita comprobar solo un archivo para los cambios no todas las imágenes una por una.

Las hojas de sprite son un desastre. Periodo. No hay necesidad de endulzarlo. Presentan un enorme paso atrás en la tecnología de diseño, lo que probablemente explica por qué las únicas personas a las que les gusta usar hojas de sprite son desarrolladores de juegos de la vieja escuela. Las hojas de sprite solo tienen una calidad redentora, son un poco más rápidas de cargar. Aparte de eso, son basura. Sin mencionar una pesadilla para montar.

En qué mundo es "aceptable" tener que incluir 500 líneas de código solo para ejecutar un simple paseo ciclo. Esperemos que algunos chicos inteligentes se les ocurra una solución tan simple como arrastrar un formato de video autónomo, compatible con alfa, como flv, pero que también se ejecutaría en tabletas...

Si te apetece escribir una lista masiva sobre lo grandes que son los sprites, solo puedo preguntarme qué tan aburrido debe ser tu trabajo de diseño. La conclusión es que si una "herramienta" te está haciendo más difícil hacer cosas que deberían ser fáciles, entonces no es una buena herramienta. Tíralo.

Sí - número de solicitudes.

La mayoría de los navegadores solo descargan alrededor de 2 recursos por dominio en paralelo, por lo que si se sirven muchas imágenes pequeñas, el usuario tiene que esperar alrededor de la mitad de los ciclos de solicitud-respuesta HTTP. Si usas un sprite, eso es solo una solicitud y una respuesta (aunque una respuesta más grande).

Si tiene muchas imágenes, el navegador tendrá que descargar todas y cada una de ellas. Dado que el navegador solo puede descargar un número limitado de archivos simultáneamente, esto llevará tiempo. Una sola imagen solo atará una ranura de descarga que permite a la página renderizar más rápido.

Además, si se usa en muchas otras páginas, la hoja de sprite grande ya se almacenará en caché.

Esto es especialmente bueno para muchas imágenes pequeñas, porque el navegador solo tiene que hacer una solicitud http para todas las imágenes, y no cientos de ellas. Por lo tanto, la web se carga mucho más rápido en el navegador del cliente.

La cosa es la velocidad de carga. Solo una solicitud http es bastante más rápida que docenas de ellas.

También, ayuda a mantener su limpiador CSS. Por ejemplo, uso sprites para los botones (lo que también significa que no hay retraso adicional para cargar el estado de suspensión img)

<button type="submit" class="vorige"><span>Vorige</span></button>

button  {display: block; width: 162px; height: 47px; background-position: 0 0;}
button:hover    {background-position: 0 94px; cursor: pointer;}
button:active   {background-position: 0 47px;}
button span {display: none}

.vorige     {background-image: url(../img/button/btn_vorige.png);}
.volgende   {background-image: url(../img/button/btn_volgende.png);}
.verstuur   {background-image: url(../img/button/btn_verstuur.png);}

Debido al sprite, puedo omitir el código para una imagen separada:

.vorige:hover   {background-image: url(../img/button/btn_vorige_active.png);}
.volgende:hover {background-image: url(../img/button/btn_volgende_active.png);}
.verstuur:hover {background-image: url(../img/button/btn_verstuur_active.png);}