Imágenes para distintas resolucionas & Retina

[TibicenasDesign]

Hola,
Estoy preparando las fotografías para una web a distintas resoluciones (obvio no va a cargarme la foto en HD en un smartphone normal y gastarle todos los datos al visitante)
(Recuerdo que es fotografías sin transparencias por lo que van a .jpg y no a .png (y no voy a vectorizar una foto realista porque el proceso es una locura usando la malla...a no ser que alguien me ilumine))

Así que bueno, tengo que preparar varias fotos, inclusive para los nuevos dispositivos retina display. Aquí tengo varias dudas.

• Cual es la mejor calidad de compresión .jpg ¿entre el 70 y el 80%? ¿Debo subirlo para Retina?
• En opciones de calidad tengo: (cual debería elegir según que casos)
  
  1. Por aproximación.
  2. Bicúbica.
  3. Bilineal
  4. Bicúbica más suavizada
  5. Bicúbica más enfocada
• Ej: foto 1920×1080 y 1920×1080Retina, recomiendan que para retina duplique el tamaño, osea que la foto la guarde a 3840x2160 pero nadie habla de los dpi, para pantalla es 72ppi (pixel por pulgada) pero en retina esta resolución de 1920x1080 está a 401ppi. ¿No debo tener los ppi en cuenta al crear el nuevo documento en Photoshop? ¿Si lo tengo en cuenta me hace falta duplicar el tamaño?

Bueno espero que supiese explicarme y que me puedan orientar correctamente.

[Rafael]

1) Olvídate de los dpi. No te sirven para nada (todavía).

2) La resolución de las retina display la puedes ver acá: https://www.apple.com/macbook-pro/specs-retina/

Native resolution: 2880 by 1800 pixels (Retina)

No tiene sentido fotos más grandes... todavía.

3) Para la compresión jpg... haz pruebas. Acá hice un análisis bastante riguroso de la compresión jpg. http://otake.com.mx/Apuntes/PruebasD...JpgProceso.htm Puedes comprimir una foto hasta un 5% y dependiendo de la foto no se notará mucho... depende de la foto. (P.D. Me falta poner conclusiones en esa página... caray).

4) El resampleado... escoje el que más te guste (menos por aproximación). El más usado es bicúbico. Al final puedes echarle un poco de sharpen.

5) Para entender más del concepto resolución, revisa esto: http://www.forosdelweb.com/f6/hablem...lucion-697586/ Estos puntos que tocas, me recuerdan que tengo que ampliar ese tema aún más.

[TibicenasDesign]

Gracias Rafael, me lo leo y te digo. Ten este link de la wikipedia que viene perfecto en una tabla todas las resoluciones retina y demás ( que ya hay 5K...) http://en.wikipedia.org/wiki/Retina_Display

[TibicenasDesign]

Iniciado por Rafael

1) Olvídate de los dpi. No te sirven para nada (todavía).

3) Para la compresión jpg... haz pruebas. Acá hice un análisis bastante riguroso de la compresión jpg. http://otake.com.mx/Apuntes/PruebasD...JpgProceso.htm Puedes comprimir una foto hasta un 5% y dependiendo de la foto no se notará mucho... depende de la foto. (P.D. Me falta poner conclusiones en esa página... caray).

4) El resampleado... escoje el que más te guste (menos por aproximación). El más usado es bicúbico. Al final puedes echarle un poco de sharpen.

5) Para entender más del concepto resolución, revisa esto: http://www.forosdelweb.com/f6/hablem...lucion-697586/ Estos puntos que tocas, me recuerdan que tengo que ampliar ese tema aún más.

Genial tu post muy currado, sin preámbulos intento resumir:

% calidad compresión jpg: Depende de la imagen podrás apurar más o menos, pero siempre un rango de 70-80% es más que aceptable (apenas se nota la diferencia con el 100% y la imagen será más ligera)

Resolución: Fallo tonto, claro, si la salida es para pantalla da igual que se crease a 300 ppi, la salida es a 72. Por lo que esto también responde a lo de Retina, por lo pronto simplemente doblar el tamaño de la imagen.

aclaro que para web se recomienda poner extensión @2x para detectar la foto retina

Código:

<img src="ejemplo.jpg" alt="">
<img src="[email protected]" alt="">  <!--Retina-->

Y con lo que respecta a bicúbica y demás opciones de calidad, sigue pendiente porque visualmente no aprecio nada.

[Rafael]

Lo de los 72 dpi lo explico muy concreto aquí. http://www.forosdelweb.com/f6/hablem...6/#post2940917 Los 72 dpi es un mito.
Simplemente no importa si son 300, 72 o Pi. (En realidad son ppi, no dpi)

Cosa diferente es densidad de pixeles... que es lo que vendría siendo el equivalente. Todavía las computadoras no lo declaran, pero más bien serviría no para desplegar fotos, sino para desplegar cosas a tamaño físico, por ejemplo tipografías en puntos, la muestra de una huella a tamaño real, etc.

Lo de la bicúbica y demás... si no notas la diferencia... casi nadie en el planeta tampoco lo hace. Lo que sí se nota es el sharpen al final, algo ligero.

La compresión jpg, depende de la foto. La compresión se nota más en partes lisas de una foto, pero igual que el resampleado bicúbico, si no lo notas, tu que tienes cariño a tus imágenes, el visitante normal tampoco lo hará.

[SamuKukez11]

Una duda que me ha surgido al leer este post:
Si la cámara con la que trabajo me hace fotos a 1920x1080, ¿al pasarla a Retina se reducirá mucho su calidad?
Gracias!

[Rafael]

Al pasar a retina se verá la foto como es... de 1920x1080px.

Ojo y cuidado con ciertas "paranoyas". La gente que usa una computadora de alta resolución está acostumbrada también a ver imagenes normalitas. Si la foto es una foto excelente de 1920x1080 se verá así, como una foto excelente de ese tamaño.

Lo que sí, si una resolución no esta al tamaño nativo del display, se verá un poco menos nítida.

P.D. Calidad es un sistema de trabajo, no cómo se ve una foto.