Diseño Web: imágenes Retina Ready y Webs Responsivas

¿Qué es un Retina Display? En términos generales es una pantalla de alta definición, eso es todo. Los productos de Apple no son los únicos que poseen este tipo de pantalla, estas pantallas están siendo ampliamente implementadas y utilizadas, por lo tanto, es importante crear sitios web y aplicaciones que soportan estas pantallas.

Dicho esto, permítanos explicar por qué las imágenes Retina Ready y el Diseño Web Responsivo van de la mano y cómo crear este tipo de imágenes.
 

¿Qué significa Retina?

Una visualización sencilla explicará este concepto bien así que eche un vistazo a la imagen de abajo, que compara los píxeles entre la Retina y una pantalla de definición estándar. En las pantallas Retina se obtiene el doble de píxeles en el mismo espacio, esta es la razón por lo que los iconos o texto en un iPad 2 se ven borrosos y luego en el iPad 3 o superior no.
 
diseño web sant boi de llobregat
 

El dilema

Diseñadores y desarrolladores ahora tienen que adaptarse a los diferentes tipos de pantallas. Si no es así los usuarios con pantallas Retina verán diseños borrosos, o los usuarios sin Retina tendrán cargas más lentas sin disfrutar de una alta calidad en las imágenes.
Por eso es importante que entre en juego el Diseño Web Responsivo.
 

¿Cómo crear imágenes Retina Ready en Diseño Web Responsivo?

Hay varios métodos. Vamos a exponer sólo unos pocos.

SVG
SVG es un formato de imagen para gráficos vectoriales, debido a que los vectores están compuestos de coordenadas matemáticas en vez de pixeles, se pueden manipular de muchas maneras manteniendo intacta su forma y calidad. Por desgracia, las imágenes de mapa de bits -JPG, PNG o GIF- no pueden hacer eso.

Fotografías e imágenes de mapa de bits
Desgraciadamente no todas las imágenes pueden ser un formato SVG, nos veremos obligados a trabajar también con mapas de bits. Hay una posible solución a este problema que consiste en utilizar la imagen al doble de su tamaño deseado y mostrar el 50% de esas dimensiones. Lo que queremos decir es que si tienes una foto que es de 150px de ancho por 150px de altura, utiliza una imagen de 300px x 300px. De esta manera, en una pantalla retina la imagen se muestra en la calidad adecuada.

Hay muchas maneras mostrar imágenes 2x en su sitio web a través de HTML, CSS o JS. No vamos a entrar en detalles, pero vamos a mostrar sólo los métodos básicos.

En primer lugar, si usted tiene una imagen que es de 300px x 300px, sólo tiene que declarar en el código HTML que el alto y el ancho de la imagen que van a 150px.

Imagen retina

También se puede cambiar la anchura y la altura de una imagen en el CSS declarando que la imagen será el 50% de su tamaño o literalmente definiéndola para que sea la mitad si, sabe cuál es la mitad.

CSS imagen retina

Por último, si la imagen que usted quiere reducir de tamaño es un fondo, éste es el código para hacer el truco:

responsive design barcelona

Hay una gran desventaja con este método, si su website tiene muchas imágenes, el tiempo de carga puede ser afectado enormemente por tener que cargar el fichero gigante. Esto es especialmente grave en teléfonos móviles, pues algunos smartphones usan conexiones muy limitadas.

Pero también hay maneras de arreglarlo.
 
Media Queries
Podemos indicarle al site si el dispositivo en el que se usa la web en cada momento es una pantalla retina. El código que presentamos a continuación trabaja mejor cuando las imágenes que usted utiliza en su sitio son fondos de divs de modo que en los media queries usted solo cambia la imagen que está a doble tamaño. De esta manera, las imágenes grandes se cargan únicamente para los dispositivos de pantalla retina.

dispositivos imagen retina

Retina.js
Si cree que los media queries no son la solución más fina. ¡Hay un Javascript para solucionar este problema! retina.js es un open source que hace fácil usar imágenes de alta resolución en los dispositivos con pantalla retina. Este script pide que dispongamos de dos imágenes, una del tamaño previsto (original) y el otro del doble de tamaño, retina.js detecta cuando hay un dispositivo y cambia la imagen por consiguiente. Es muy simple trabajar con este script y sugerimos el fomentar su uso. Todo lo que usted tiene que hacer es asegurarse de que nombra las imágenes en consecuencia para trabajar con el plug in.
 
Iconos
Gracias a @font-face y las fuentes que se componen de iconos en vez de letras, usted puede utilizarlas en vez de imágenes. Recomiendo este método por dos razones. Primero, las fuentes se pueden escalar de una manera similar los SVG, por lo tanto no dan ningún problema de peso ni de pixelación.

Segundo, el catálogo de @font-face es actualmente muy grande y crece día a día. La mayoría de los navegadores actuales -móviles y sobremesa- utilizan el @font-face y permiten que la mayoría de los usuarios visualicen tus iconos sin problemas.

 
retina is indeskai

Fuentes:
www.designmodo.com

facebook

4 comentarios

Añadir comentario
  1. Serchi 21 mayo, 2013 # | Responder

    Buen post, se agradece, me ha sacado de dudas y puesto en el camino. Saludos!

    • administrador 25 junio, 2013 # | Responder

      Para eso estamos. De nada!

  2. Van 1 octubre, 2014 # | Responder

    Buena publicación, Super sencillo y conciso, lo necesario para despejar dudas e ir a investigar ^_^, gracias!

    • indeskai design 3 junio, 2015 # | Responder

      Encantados de ayudarte!