Cómo preparar imágenes web para que se vean en la Retina Display del iPad

Duncan Davidson ha descubierto que preparar imágenes para que se vean en todo su gloria en la pantalla Retina Display no es tan sencillo como simplemente incrementar su tamaño. Con fotografías de más de 2.000 píxeles de ancho, el sistema hace un escalado y el resultado es peor que si se pone la imagen con un ancho de 1.000 píxeles.

Sin embargo, si introducimos una imagen PNG que sea mayor del límite establecido (ver más abajo), para utilizarla con WebKit, se mostrará perfectamente. Sin embargo, las imágenes PNG ocupan mucho más y por lo tanto cuesta más descargarlas. Nadie quiere usar PNG para servir grandes fotografías. Así que hay que encontrar el método para poder usar JPG con Retina Display.

Si acudimos a la información de la propia Apple, en la Safari Developer Library encontramos información sobre los límites de las imágenes:

A causa de la memoria disponible en iOS, hay límites en el número de recursos que puede procesar:

 

El tamaño máximo para imágenes decodificadas en formato GIF, PNG y TIFF es de 3 megapíxeles para dispositivos con menos de 256 MB de RAM y 5 megapíxeles para dispositivos con 256 MB de RAM o más.
Es decir, hay que asegurarse que la anchura x altura ≤ 3 x 1024 x 1024 en dispositivos con menos de 256 MB de RAM. Recuerda que el tamaño decodificado es bastante mayor que el tamaño codificado de una imagen.

 

El tamaño máximo de la imagen decodificada para JPEG es 32 megapíxeles usando subsampleado.
Las imágenes JPEG pueden tener hasta 32 megapíxeles debido al subsampleado, que permite a las imágenes JPEG ser decodificadas en un tamaño que tiene un dieciseisavo del numero de píxeles. Las imágenes JPEG mayores de 2 megapíxeles son subsampleadas, es decir, decodificadas a un tamaño reducido. El subsampleado JPEG permite al usuario ver imágenes tomadas con las cámaras digitales más modernas.

 

El tamaño máximo de un elemento canvas es 3 megapíxeles en dispositivos con menos de 256 MB de RAM y 5 megapíxeles en dispositivos con una memoria igual o mayor de 256 MB.

El alto y ancho de un objeto en el canvas* es de 150 x 300 píxeles si no se especifica otra cosa.

Mira esta imagen (de Duncan Davidson) en un nuevo iPad con una pantalla Retina. En el original se trata de una imagen de 900 px -que aquí hemos encajado en 600- que Duncan hizo del creador de PostSecret, Frank Warren, durante el TED2012 en Long Beach hace pocas semanas. Ahora, si estás en un nuevo iPad con pantalla Retina, rota la pantalla para ponerla apaisada y toca en la imagen. Espera a que se descargue del servidor de Amazon S3 (un segundo, tres, dos minutos… depende de tu conexión). Mide 432.000 px

Pero no es tan sencillo/claro:

Si visitamos las páginas de Apple sobre el iPad, encontraremos que la imagen “big hero” que utilizan es de 2.240×960. Eso es 2.150.400 píxeles, que es mayor que el límite de 2 MP que la propia Apple cita en el texto anterior. Por otro lado, esas dimensiones siguen siendo divisibles entre dieciseis (subsampleado).

Así que parece que Apple utiliza un método que le permite saltarse sus propios límites y conseguir la imagen se vea óptima en cualquier dispositivo.

La respuesta es que Apple utiliza la imagen como un JPEG progresivo. El JPEG progresivo ha caído en desuso con la generalización de la banda ancha, pero resulta que Apple lo ha “resucitado” como método para poder poner imágenes de gran tamaño optimizadas para que se vean perfectamente en la Retina Dispaly del iPad (y se sigan viendo perfectas en todo el resto de pantallas).

Desgraciadamente, (de momento) no se pueden exportar imágenes como JPEGs progresivos desde Lightroom o Aperture, así que no es algo que puedas ponerte a hacer alegremente. Para exportar como JPEG progresivo tendrás que recurrir a Photoshop y utilizar la opción que aparece en el cuadro de diálogo “Guardar para web”.

Si quieres leer algo (en inglés) sobre programación de CSS para Retina Display, puedes recurrir a este hilo en Quora

* Canvas:

Canvas es un elemento HTML incorporado en HTML5 que permite la generación de gráficos dinámicamente por medio del scripting.1 Permite generar gráficos estáticos y animaciones. Fue implementado por Apple para su navegador Safari. Más tarde fue adoptado por otros navegadores, como Firefox a partir de su versión 1.5, Opera, y es estandarizado por WHATWG. Posee dos atributos width (ancho) y height (alto), el tamaño por defecto es 160. El objeto canvas puede ser accedido a través de Javascript, permitiendo generar gráficos 2D, juegos, animaciones y composición de imágenes. Existe otra etiqueta SVG que cumple con funciones similares. Más información en wikipedia

Alf

Propietario de www.faq-mac.com.

0 0 votos
Article Rating
Subscribe
Notify of
2 Comments
Oldest
Newest Most Voted
Opiniones Inline
Ver todos los comentarios
chairman meow
chairman meow
11 years ago

Artigo muito interessante.

Alexware
Alexware
11 years ago

Artículo muy interesante!

Podriais hacer uno para preparar videos a 1080p, para la retina display del nuevo ipad?

No consigo convertirlos de forma perfecta.

Muchas Gracias

2
0
Me encantaría saber tu opinión, por favor, deja un comentariox
()
x