Lo que debes saber de Retina Display

palabras / Facebook / Twitter / Enlace / Comentar

Apple recientemente sacó al mercado la patente "Retina" refiriéndose al sistema de display de alta resolución que está integrando en sus productos. El más reciente fue el Retina Macbook Pro, con lo que se agrega una doble densidad a las pantallas.

Nosotros como desarrolladores web tenemos que estar a la vanguardia. ¿Cómo nos va a afectar esto?, pero antes, ¿De qué carajos estamos hablando?

¿Qué es Retina Display?

Muestra de lo que es Retina

Básicamente, Retina Display, es el aumento al doble de pixeles en la pantalla (pixeles fisicos).

10 pixeles en CSS, en un monitor estándar, corresponde exactamente a 10 pixeles en la pantalla, pero a diferencia, en un monitor Retina, 10 pixeles corresponderían a 20 pixeles; esto para mantener una correcta proporción.

Siguiendo el principio anterior, 10 pixeles en un bitmap, equivalen igualmente al doble en una pantalla con Retina.

¿Cómo optimizar para Retina?

Ya que la proporción de cada pixel se duplica para la adaptación de la vista real del monitor, se debe de mantener una resolución correcta para la muestra de imágenes.

La función de javascript window.devicePixelRatio nos devuelve la proporción directa del radio de los pixeles. Cuando este número nos devuelve 2 o 1.5, corresponden a pantallas de alta resolución como Retina Display u otros productos de otras marcas.

Solución HTML

Para mantener una relación normal en, por ejemplo, una imagen de logo, podremos utilizar el siguiente código:

<img src="logo.png" width="300" height="300" alt="Logo" />

Donde se especifica el ancho y largo del elemento para que tanto, el navegador sea capaz de calcular las imágenes y tenga los espacio al cargarse, como para que, nuestra imagen original de 600x600 pixeles sea vista en una resolución normal en 300x300 y en un display Retina, en 600x600.

Es por este principio, repito, que nuestras imagenes deberán tener el doble de resolución para ser mostradas en retina, pero, ¿Esto no alentaría la carga de, por ejemplo, una galería de imágenes? Claro, es por eso que debemos de buscar diferentes soluciones al nuevo problema que estamos enfrentando, para así, ofrecer una mejor solución a nuestros usuarios.

Solución Javascript

Una solución más inmediata y menos manual es el del recortar nuestros assets a la mitad y luego atribuirle ese ancho a cada una nuestras imágenes para la vista correcta en un display normal. Esto se puede lograr con jQuery:

$(window).load(function() {
  var images = $('img');
    images.each(function(i) {
      $(this).width($(this).width() / 2);
    });
});

Así, para displays con Retina, las imágenes se verán de manera correcta.

Sin embargo, otro método que existe, es que tengas assets de baja y alta resolución (2x) y que al final del nombre de estos últimos agregues @2x. El siguiente script lo que hace es medir primero el radio de pixeles que tiene la pantalla, si es mayor que 1, se aplica la función para agregar al final del nombre del archivo el string @2x para cargar las fotos de alta resolución.

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img');

    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

Esta solución es básica comparandola con lo que hace el plugin Retina.js, el cual tiene una extensión más amplia para esta solución en javascript.

Solución CSS

La solución en CSS es por medio de la utilización de media queries. Si tienes imágenes en forma de estilo como background, esta solución te va a interesar:

.logo {
  background-image: url(logo.png);
  background-size: 300px 300px;
  height: 300px;
  width: 300px;
}

@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
  .logo {
    background-image: url(logo@2x.png);
  }
}

Se especifica el radio de pixeles a 1.5 para poder abarcar todas las resoluciones grandes que aparecieron antes de Retina Display.

Compatibilidad

¿Qué? Aclaremos una cosa: Si la computadora del usuario final cuenta con un Retina Display, pueden cubrirse dos situaciones; la primera es que tenga una computadora Apple, utilice Safari (webkit), Chrome (webkit) o Firefox (gecko). Segunda, es que si conectó o tiene un monitor con un pixel radio de más de 1.5, no creo que tenga un navegador viejo, por el simple hecho de tener ese monitor.

No necesitará dar soporte a navegadores IE6-8 o Netscape 2.0, es inútil cubrirlos, no es necesario.


Comentarios

Copyright © 2012-2013 AbarcaRodriguez.com