sprites de imagen CSS

Question

¿El único beneficio de usar sprites de imagen CSS es que hay menos solicitudes HTTP?

¿O hay otros beneficios?

¿También hay una manera fácil de detimar qué área de un sprite mostrar?

Answer 1

Como dijo, una de las principales ventajas es reducir el número de solicitudes al servidor, mejorando el tiempo de respuesta (especialmente si está cargando una gran cantidad de imágenes pequeñas). Pero esta no es la única razón por la que la gente usa sprites.

Si no usa sprites para mostrar el "mouse sobre", el usuario verá que la imagen desaparecerá por un segundo ... y se ve realmente mal. Esto se debe a que si cambias la imagen en lugar de mover el sprite, se cargará una nueva imagen y el usuario final podrá ver el tiempo de carga.

.bad{ 
    background:url(abc.jpg); 
} 
.bad:hover{ 
    background:url(abcHover.jpg); 
} 

.good{ 
    background:url(abc.jpg) 0px 0px; 
} 
.good:hover{ 
    background-position:15px 0px; 
} 

Otra ventaja de sprites es que se puede mantener todas sus imágenes en un solo lugar y en algunos casos tiene más sentido (para los menús y así sucesivamente).

Para determinar qué área de un sprite mostrar, simplemente use photoshop o cualquier otro software de edición de imágenes.

Answer 2

El principal beneficio es que sus páginas se cargan más rápido, principalmente debido a la reducción de las solicitudes HTTP.

Puede generate your sprite usando una herramienta.

Descargo de responsabilidad - Escribí esta herramienta.

Answer 3

Es mucho más fácil obtener la ubicación de la imagen (especialmente al lado del texto) el mismo navegador cruzado. Puede ajustar las imágenes arriba/abajo/izquierda/derecha sin usar el alineamiento vertical y el relleno.

Me resulta más fácil hacer un seguimiento de todas las imágenes si están en un solo archivo. Especialmente porque usualmente tengo imágenes png transparentes y luego uso imágenes gif para ie6. Guardo mi mapa png sprite como un gif y agrego una línea con background-image en mi ie6 css y mis imágenes se cambian.

Uso photoshop o gimp para obtener ubicaciones aproximadas en el mapa de sprites y luego uso firefox para ajustar la ubicación.

Answer 4

Sí, hay otro beneficio. Cada archivo de imagen tiene sus propios encabezados, que describen el tipo de imagen, los colores, etc. Por lo tanto, cuando combina imágenes con un solo objeto, gana un poco de kb.

Pero como dijiste antes, en general ganas al reducir el número de solicitudes HTTP.

Answer 5

En términos de determinar el área para mostrar, generalmente ubicaré mis elementos en píxeles que son múltiplos de 100. Entonces, si hay un elemento con un conjunto de iconos de 64x64 píxeles, normalmente los tendré en (0, 100), (0, 200), (0, 300), etc.

De esta manera, no tengo que escribir una medida exacta (o cualquier otro desarrollador para el caso) y guardar las teclas al configurar todo mis propiedades de posición de fondo.