cuando no se deben usar sprites CSS?

Question

Quiero saber cuándo no usar sprites CSS. Los sprites CSS funcionan muy bien, pero ¿hay alguna ocasión en la que creen muchos dolores de cabeza?

Answer 1

El mantenimiento de su sitio sufrirá de usarlos. Solo combine imágenes que pertenecen a la misma unidad lógica y es poco probable que se actualicen por separado. Mantenga las imágenes que probablemente cambien por separado para comenzar.

Answer 2

Tuvimos un momento difícil cuando queríamos posicionar la imagen dinámicamente.

background-image: url(../images/a.gif); 
background-repeat: no-repeat; 
background-position: left bottom; 

Esto es complicado (si no imposible) de hacer con un sprite.

Answer 3

CSS sprites funciona mal para <input type="text"> donde el usuario puede introducir más de lo que cabe en el cuadro, ya que el fondo se desplaza en algunas versiones de IE.

También funcionan mal si quiere repetir el patrón.

Answer 4

Como todas las cosas, hay ocasiones en que es útil, y hay momentos en que es dañino.

A muchos desarrolladores les gusta usar sprites CSS porque ahorra tiempo de solicitud: el navegador realiza una solicitud, descarga la imagen y todos los sprites se guardan en la memoria caché automáticamente.

Entonces, ¿cómo puede doler?

Porque tamaño de descarga! = Tamaño de la memoria.

Ese PNG o GIF de solo 10kb podría tener un tamaño mucho, mucho mayor una vez que el navegador lo carga en la memoria. El problema es que mientras algo como GIF comprime áreas sólidas de color, el navegador lo expande a un mapa de bits, donde todas las imágenes de igual tamaño usan igual memoria.

Y carga un nuevo mapa de bits cada vez que utiliza esa imagen en alguna parte.

Todo en moderación.

Ver: http://blog.mozilla.com/webdev/2009/06/22/use-sprites-wisely/ para obtener más información.

Answer 5

Pueden causar dolor de cabeza a sus usuarios si desean descargar una imagen en particular. Primero, no obtendrán la opción "Guardar imagen como". Si se dan cuenta de que usan "Ver imagen de fondo" obtendrán una imagen enorme con muchas otras imágenes allí también.

Es por esto que los sprites se guardan mejor para "utilidad" (es decir, botones) o imágenes de diseño.

Answer 6

Usar una imagen más grande podría ser un dolor de cabeza ... Cuando las imágenes se combinan en un tamaño más pequeño, y las imágenes vecinas tienen solo 1 o 2 px entre ellas, los CSS sprites pueden ser una buena solución. En nuestro caso, http://www.nbhuntop.com, solo lo usamos para los componentes de menú que incluyen: Inicio, Acerca de, Productos. Y todas las fotos están en formato gif, y nadie descargará estas imágenes.

Answer 7

Los Sprites nunca se deben usar cuando el tamaño de las imágenes sea muy diferente.
Porque en ese caso el tamaño del sprite es bastante grande.
Recientemente convertí imágenes de 3.5MB a un sprite, ¡y el tamaño aumentó hasta 17MB!