Mejora de la calidad de imagen en la pantalla Retina

El nuevo iPad se lanzó el mes pasado y, entre otras cosas, luce una increíble pantalla Retina con una resolución de 2048 por 1536 píxeles. Casi tan pronto como se anunció, el enfoque se dirigió a los desarrolladores de aplicaciones nativas y su trabajo para escalar las aplicaciones hasta la resolución más alta.

Ese fue sin duda el enfoque equivocado. Se pensó relativamente poco en términos de la web, y cómo se vería en la nueva pantalla Retina en el período previo al anuncio. Nos dejó con una Internet de texto asombrosamente nítido, pero imágenes increíblemente terribles de baja calidad. Es hora de optimizar, por lo que en este tutorial vamos a diseñar una estrategia sobre cómo puede diseñar con la pantalla Retina en mente.


Usa menos imágenes

Podría decirse que esto es bastante obvio, pero algunos todavía pueden pasarlo por alto. Con avances significativos en CSS, el uso de imágenes en la estructura de un sitio puede ser bastante mínimo, o incluso inexistente. Esto le da a estos sitios una gran ventaja cuando se trata de la compatibilidad con Retina Display, ya que el texto y los gráficos generados por CSS aumentarán de tamaño sin reducir la calidad. Por la misma razón, el texto se ve mucho mejor en una pantalla Retina.


Apple ha logrado una gran calidad de texto en la pantalla Retina Display del nuevo iPad

Un sitio en el que estaba trabajando no necesitaba una sola actualización de su tema para verse bien en la pantalla Retina; la falta de imágenes significaba que no había nada que actualizar. Por supuesto, no todos los sitios serán totalmente sans Imágenes, pero minimizar su uso reducirá el esfuerzo requerido para optimizar la pantalla Retina.


Vea lo que Paul Boag tiene que decir sobre imágenes y esquinas redondeadas

En general, hay un paso en esta táctica: minimizar el uso de imágenes donde no es realmente necesario.


Cómo lo hace Apple

Naturalmente, el sitio web de Apple está optimizado para verse increíblemente nítido y nítido en la pantalla Retina. En los días previos al anuncio del iPad, Apple comenzó a actualizar su propio sitio web para ofrecer imágenes receptivas; Elementos que cambiaron dependiendo de si estaba navegando en un nuevo iPad o no.

El método de Apple es simple en principio. El sitio web se carga normalmente, pero luego usan JavaScript para reemplazar las imágenes relevantes si está navegando en un nuevo iPad. Si visita un nuevo iPad, obtendrá las imágenes optimizadas, mientras que cualquier otro navegador recuperará los valores predeterminados.

Un ejemplo de esto es el texto principal de Apple en la página de producto del iPad, utilizando el siguiente código en el propio archivo.

 

Resolutivo

El nuevo ipad

Presentamos el nuevo iPad. Con la impresionante pantalla Retina. Cámara iSight de 5MP. Y ultrarrápido 4G LTE.

A partir de $ 499.

Para simplificar, no compartiré sus secuencias de comandos reales, pero esencialmente primero verifica si el navegador está en un dispositivo con una pantalla Retina, luego verifica la existencia de una imagen 2x (lo veremos en un minuto) y, si las dos condiciones anteriores son verdaderas, muestra la imagen 2x.

La convención de sufijo 2x significa la contraparte "Retina" para el archivo imagen.png sería image_2x.png. Esto viene de iOS, que muestra automáticamente un @ 2x Imagen en una aplicación nativa cuando existe. Desafortunadamente, nosotros los diseñadores web no nos damos el lujo de la búsqueda y visualización automática, por lo que tenemos que encontrar métodos para emular eso con nuestros propios scripts y consultas..

Sin embargo, esto tiene un precio. Usando este método, el usuario final carga ambos la imagen no Retina y Retina, lo que significa que la página termina con un tamaño de archivo aumentado. No solo eso, las secuencias de comandos de Apple significa que se envían más solicitudes hacia y desde el navegador, lo que resulta en un mayor tiempo de carga de la página. Por supuesto, si continúa minimizando el uso de la imagen, este problema también se reducirá..


El tutorial: Uso de consultas de medios CSS

Si bien Apple usa JavaScript, un método un tanto efectivo, hay una alternativa; Uso de consultas de medios CSS para cumplir con las condiciones de estilo de la densidad de píxeles del dispositivo..

Antes de llegar a eso, es importante tener en cuenta que, en última instancia, la pantalla del iPad sigue siendo de 1024x768 px en "píxeles de CSS". Permitiré que Dave Hyatt explique.

La mayoría de los autores de sitios web han pensado tradicionalmente en un píxel CSS como un píxel de dispositivo. Sin embargo, a medida que ingresamos a este nuevo mundo de alto DPI, donde la IU completa puede ser ampliada, un píxel CSS puede terminar siendo múltiples píxeles en la pantalla. Por ejemplo, si configuro una ampliación de zoom de 2x, entonces 1 píxel CSS estaría representado por un cuadrado de 2 × 2 píxeles del dispositivo.

Por lo tanto, el método que estamos usando no apuntará al iPad según su resolución porque simplemente no funcionará. Para todos los efectos, la resolución del iPad sigue siendo de 1024x768 px de acuerdo con el navegador, y el objetivo de esta resolución también se dirigirá a todas las generaciones de iPad anteriores. Del mismo modo, la orientación de la nueva resolución de px de 2048x1536 con consultas de medios no tendría ningún efecto en el nuevo iPad.

En su lugar, podemos apuntar usando el relación dispositivo-píxel mínimo consulta. Esa consulta le dice al navegador que cargue un estilo específico basado en la proporción de píxeles del dispositivo a los "píxeles CSS" mencionados anteriormente. En el caso del iPad equipado con Retina Display, esto es dos (1024: 2048 y 768: 1536 simplificados hasta 1: 2).

Por lo tanto, podemos cargar en una hoja de estilo "retina" basada en la proporción de píxeles del dispositivo.

 

Obviamente, usamos el prefijo WebKit ya que el navegador del iPad es Safari, un navegador WebKit, pero también porque la consulta de medios parece estar disponible solo a través de WebKit por ahora. Dado que los estilos en cascada (como el nombre "CSS" le dirá), simplemente ordenando correctamente la etiqueta anterior, las reglas en esa hoja de estilo sobrescribirán las de los dispositivos normales especificados anteriormente.

Si no quiere poner todo en una hoja de estilo completamente separada, puede usar consultas de medios en línea para especificar partes de su hoja de estilo solo para dispositivos equipados con pantalla Retina, como por ejemplo:

 @media (-webkit-min-device-pixel-ratio: 2) #element background-image ('image-2x.png'); 

Nota: Si bien el uso del esquema de denominación "2x" es una forma útil de organizar sus imágenes, no se sienta obligado a hacerlo. Puede nombrar sus imágenes como desee y, a diferencia de las aplicaciones nativas, no es necesario que sean remotamente similares..

Por supuesto, el uso de esta consulta de medios no es de ninguna manera específica para el iPad. De hecho, la misma lógica se activará cuando navegue por su sitio en cualquier dispositivo con una densidad de píxeles similar que emplee la misma relación de píxeles de CSS a dispositivo, incluidos el iPhone 4 y el iPhone 4S. Si desea apuntar solo al iPad, simplemente puede combinar la consulta de proporción de píxeles con un ancho, para especificar solo los dispositivos equipados con Retina Display de la resolución de informes del iPad.


Conclusión

No se trata de que su sitio se vea bien sin optimizar, pero se vea mejor con. Solo necesita visitar un sitio rico en imágenes, pero no optimizado, para comprender qué tan terrible se ven las imágenes sin Retina en el nuevo iPad. Y, en última instancia, necesitas ser testigo de los resultados. Si no tiene acceso a un nuevo iPad, le recomiendo que visite un Apple Store para echar un vistazo..

Si bien Apple ha vendido millones de unidades, en el gran esquema de los navegadores, sigue siendo una pequeña preocupación. Sin embargo, con potencial Retina Display equipado MacBook en el horizonte tan pronto como este verano, poner el trabajo ahora realmente podría valer la pena más tarde.