logo - ¿Cuándo no usar sprites CSS?

sprites png

Question

Quiero saber cuándo no usar sprites CSS. Los sprites CSS funcionan muy bien, pero ¿hay ocasiones en que causan muchos dolores de cabeza?

Answer 1

Como todas las cosas, hay momentos en que es útil, y hay momentos en que es perjudicial.

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 diferentes ahora se almacenan en caché automáticamente y son increíblemente rápidos.

Entonces, ¿cómo puede doler?

Debido a la descarga de tamaño! = Tamaño de la memoria.

Ese PNG o GIF que solo tiene 10kb podría ser mucho más grande en tamaño una vez que el navegador lo cargue 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 dimensiones iguales usan memoria igual.

Y carga un nuevo mapa de bits cada vez que usas esa imagen en algún lugar.

Así que todo con moderación.

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

Answer 2

La capacidad de mantenimiento de su sitio se verá afectada por su uso. Solo combine las imágenes que pertenecen a la misma unidad lógica y es poco probable que se actualicen por separado. Para empezar, mantenga las imágenes que probablemente cambien por separado.

Answer 3

Los sprites nunca deben usarse cuando el tamaño de las imágenes es muy diferente.
Porque en ese caso el tamaño del sprite es bastante grande.
¡Hace poco convertí fotos de 3.5MB a un sprite, y tamaño disparado hasta 17MB!

Answer 4

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 deciden usar "Ver imagen de fondo", también obtendrán una imagen enorme con muchas otras imágenes allí.

Esta es la razón por la que los sprites se guardan mejor para "utilidad" (es decir, botones) o imágenes de diseño.

Answer 5

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 usando un sprite.

Answer 6

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

Answer 7

Los sprites CSS funcionan mal para <input type="text"> donde el usuario puede ingresar 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 quieres repetir el patrón.