¿Puedes incluir imágenes de retina y no retina dentro del mismo sprite?

Al construir una página web, siempre he creado 2 sprites diferentes para mis íconos. Un sprite para imágenes normales y un sprite para imágenes de retina. Las imágenes de la retina se guardan con el doble de tamaño y el doble de DPI.

Ejemplo:

Ícono normal: 50x50 a 72 ppp Ícono retina: 100x100 a 144 ppp

Usando una consulta de medios de visualización de retina en mi CSS, apuntaría al ícono y reemplazaría la imagen de fondo con una de retina y también aplicaría la propiedad de tamaño de fondo adecuada. (por ejemplo, si la imagen es de 100x100, tamaño de fondo: 50px 50px).

En lugar de tener 2 sprites de imagen separados, decidí combinar mis imágenes en 1 sprite. Usando 72 DPI, tengo un ícono normal y debajo tengo un ícono que tiene el doble de tamaño (para retina). Esto parece funcionar bien en una página web.

Además del rendimiento en la descarga de un archivo de imagen más grande, ¿hay alguna razón por la que deba tener imágenes separadas para retina y no retina? ¿Importa realmente el DPI cuando se ahorra para la retina o solo necesita tener el doble de tamaño?

Respuestas (1)

Este tema es bastante complejo, pero intentaré resumir las cosas más importantes.

DPI no importa

El navegador cambia el tamaño de la imagen de acuerdo con las dimensiones de píxeles requeridas. Los valores de DPI serán ignorados.

No uses varios tamaños de imagen en una hoja de sprites

El uso de imágenes de menor resolución ahorra ancho de banda y da como resultado una descarga más rápida. El uso de ambos tamaños en el mismo archivo no guardará un solo byte, agregará bytes y, por lo tanto, es una mala idea.

Recomendaciones

  1. Use solo imágenes retina de alta resolución y deje que el navegador las cambie de tamaño.

  2. Optimice todos los archivos de imagen. Por cierto: una muy buena herramienta para optimizar el tamaño de archivo de las imágenes PNG es ImageAlpha .

Técnicamente, una hoja de sprites con versiones de tamaño progresivo se llama mipmap . ( en.wikipedia.org/wiki/File:MipMap_Example_STS101.jpg ) ilustra lo que dice Mario sobre el desperdicio de ancho de banda. Sin embargo, la sugerencia de usar solo un tamaño grande y estirar/reducir también es un problema de ancho de banda desperdiciado.
@Yorik tienes razón, no es una solución perfecta, pero es mejor que incluir ambas resoluciones. :-)
¡Estoy de acuerdo, por supuesto!
¿Puede CSS no decidir qué tamaño de imagen descargar en función de la consulta de medios? ¿O descargará ambas imágenes en todos los casos?
@ posfan12 si proporciona diferentes archivos para cada resolución, entonces sí. Si está en un solo archivo, como se menciona en la pregunta, entonces no.
¿Puedes incluir imágenes de retina y no retina dentro del mismo sprite?
RespuestasAquíPolítica de privacidad1y, 0v