Resolución DPI/PPI para imágenes de zoom de productos

Estoy trabajando en un sitio de comercio electrónico y estoy tratando de averiguar a qué resolución guardar las imágenes del producto.

Por lo general, optamos por 72 DPI, pero creo que ahora deberíamos usar PPI, pero también que para tener en cuenta las pantallas retina necesitamos guardar dos versiones de la imagen; si queremos que el tamaño de zoom más grande sea, por ejemplo, 300x300px, debe haber una versión de 600x600px para que no se vea borroso en la retina.

¿Significa eso que debemos alojar dos versiones o una grande que se reduce para no retina y, de ser así, eso afecta la velocidad del sitio web?

Pero, ¿en qué PPI guardo estas imágenes? ¿O es 144DPI a 2x?

¡Gracias!

Puedo estar equivocado Pero siempre usamos 72dpi. El tamaño general de píxel tiene sentido para Retina, no una configuración de dpi/ppi almacenada en la meta descripción. Si la diferencia en kB de imagen de 300x300 y 600x600 no es grande, puede usar pantallas más grandes y reducir la escala en pantallas que no sean Retina.
Debes estar equivocado; DPI es para impresoras, PPI es para pantalla.
ppi o dpi no entran en juego cuando genera imágenes para medios que no sean impresos. Solo importan los píxeles. Eso se debe a que aborda las coordenadas de píxeles en estos dispositivos.
No importa en qué ppp lo guardes. Los navegadores web lo ignoran.

Respuestas (2)

He respondido una pregunta similar aquí: Puntos en común para los tamaños de imagen cuando se usa Photoshop para guardar en la web

En resumen, una práctica muy común hoy en día es:

  1. Guarde sus imágenes (ráster) siempre el doble del tamaño de píxel que las mostrará. Si la imagen se mostrará en 300x300 píxeles, guárdela en 600x600 píxeles.
  2. El uso de CSS indica que el tamaño de la imagen es en realidad de 300x300 píxeles.

Esto tiene la pequeña advertencia de que, en dispositivos que tienen una resolución x1 (no retina), el visitante descargará el doble de los datos que realmente necesita. Es particularmente malo para usuarios móviles con planes de datos ajustados.

Una solución para esto podría ser mantener dos versiones de la imagen: una en tamaño x1 (300x300) y otra en tamaño x2 (600x600) y luego consultas de medios en el CSS para determinar la resolución y servir las imágenes x2 solo si la resolución de el dispositivo es mayor que 1 (dispositivos retina).

Hay algunos ejemplos de consultas de medios para diferenciar dispositivos de alta resolución aquí: http://css-tricks.com/snippets/css/retina-display-media-query/

Una segunda solución, si tiene la opción o la secuencia de comandos del lado del servidor, sería mantener ambas versiones de la imagen y dejar que el servidor determine qué versión se debe servir en función de la resolución del dispositivo que la solicita.

Cockypup tiene algo de razón.

Para las pantallas retina, desea una versión de tamaño original 2x; puede hacerlo a través de la forma en que nombra los archivos y algunas secuencias de comandos del lado del cliente.

En cuanto a las imágenes ampliadas, el "DPI" no importa: use 72, ya que de todos modos está limitado a esto para la web. En lugar de preocuparse por la cantidad de píxeles que atasca allí, solo preocúpese por el método de ampliación.

Muchos sitios usan el enfoque 2x cargando una imagen más grande y recortando el área no desplazada. Utilizan un "cuadro de guía" para mostrar lo que se amplía.

Una salida fácil sería simplemente hacer clic para ampliar (cargar imagen grande), pero haría esto solo como una alternativa sin javascript.

Tenga en cuenta que no hay un 'límite' en DPI. Es simplemente un poco de metadatos. Los navegadores web lo ignoran por completo.
Resolución DPI/PPI para imágenes de zoom de productos
RespuestasAquíPolítica de privacidad1y, 0v