¿Qué es Retina Display? ¿Me lo explicas?

El término Retina Display fue creado por Apple para la presentación de sus nuevos productos, como el iPad, el iPhone o el Macbook, con la peculiaridad de tener pantallas de alta calidad.

1. Explicame qué es esto de Retina Display de una forma sencilla, ahora o nunca.

Son pantallas de alta resolución, con más de 300 ppp. Los pixels de estas pantallas son tan pequeños y condensados que apenas son perceptibles al ojo humano.  El material impreso que vemos, carteles, tarjetas, etc.. están a 300 ppp, por lo que  se iguala la calidad de estas pantallas Retina al material que vemos.

 2. Un poco más sobre Retina

Ya sabemos que son pantallas que ofrecen pixels a una alta densidad, que muestran el doble de pixels en el mismo espacio que mostraría una pantalla normal. Por ejemplo los iconos o textos que se ven en el iPad 2, se ven muy pixelados en el iPad 3 (recuerda que este viene con pantalla Retina). Mira este sencillo gráfico, explica claramente la condensación de pixels en Retina

retina-2

3. Varios ejemplos

El iPad 2 tiene una resolución de pantalla 1024 x 768 pixels x 132 ppp. El iPad 3 (Retina) tiene 2048 x 1536 pixeles x 264 ppp. El iPhone 5 (Retina) tiene 1136 x 640 pixels x 326ppp. El MacBook Pro de 15? (Retina) tiene 2.880 x 1.800 pixels x 220 ppp. El iMac de 27? tiene 2560 x 1440 pixels x 109 ppi

¿Y que conseguimos con esta resolución de pantalla?  pues colores mas vivos,  texto e imágenes con mucho más detalle.  Tu vida cambiará para siempre

 4. Cómo me afecta todo esto

Como usuario que visita webs o apps con tu dispositivo Retina, te puedes encontrar con imágenes pixeladas, con poca nitidez, al ser estas rasterizadas o de mapa de bits, y que no han sido previamente trabajadas. Si verás que el texto se lee nitidamente, dado que este es vectorial. Si queréis leer más sobre mapa de bits o vectoriales, aquí hay un buen ejemplo.

Y la parte gratificante, es que si las imágenes han sido previamente tratadas, tendrás una nitidez y una calidad de imagen que te dejará sin palabras.

 5. Qué hago para que todo sea Retina

Para crear imágenes Retina podemos trabajar con el formato SVG (Scalable Vector Graphics / Gráficos Vectoriales Escalables). Este formato vectorial tiene la peculiaridad que no pierde su forma y nitidez al ampliarlos o reducirlos.

Si quieres usar iconos en tu web, olvidate de los formatos .gif .png, existe la posibilidad de usar fuentes/tipografías de iconos (icons fonts) que no son más que tipografía con símbolos. Recuerda, la tipografías son vectores,  no pierden nitidez.

Como no siempre podremos SVG, para tratar las imágenes en mapa de bits y se vean nítidas en Retina, tenemos hacer unos pequeños arreglos:

Editar tu imagen al doble de resolución. Si tu foto mide 150px x 150px, edita esa imagen a 300px x 300px (mayor densidad de pixels) y con CSS, HTML o JS colocala al 50%, así se verá nítida.

Con tu imagen a 300px x 300px vamos a declarar en HTML el alto y al ancho a la mitad 150px.

1
<img alt="" src="imagen.png" width="150" height="150" />

Aquí obligamos por CSS que la imagen tenga el 50% de su tamaño real

1
<br />imagen{<br />width: 50%;<br />height: 50%;<br />}<br />.caja img{<br />width: 150px;<br />height: 150px;<br />}<br />

Si la imagen es un fondo

1
<br />.caja{<br />background-image: url(imagen.png);<br />background-size: 150px 150px;<br />}<br />

Si es cierto que con estos trucos necesitamos que nuestra imagen tenga la suficiente calidad y tamaño para poder ampliarla y no se vuelva borrosa o pixelada. También existe el problema de los tiempos de carga, pues a mayor tamaño, mayor peso en KB, y navegar con tu smartphone por una web con muchos gráficos y con las conexiones limitadas, puede ser desesperante.

Hay varios para solucionar la imagen con más peso al exportarla al doble de resolución, y es reduciendo un 40% la calidad,  y por HTML o CSS lo redimensionas a la mitad de su tamaño, según los ejemplos anteriores. ¡Y conseguimos una reducción de KB del 50%!

Otra forma es por CSS media query, indicando si el dispositivo en el que se usa la web en cada momento es una pantalla retina, así las imágenes grandes se cargan únicamente para los dispositivos con pantalla retina.

1
<br />&lt;a class="_hootified" onclick="javascript:var e = document.createEvent(" href="http://twitter.com/#!/@media" media=""&gt;@media&lt;/a&gt;<br />only screen and (-webkit-min-device-pixel-ratio: 2),<br />only screen and ( min--moz-device-pixel-ratio: 2),<br />only screen and ( -o-min-device-pixel-ratio: 2/1),<br />only screen and ( min-device-pixel-ratio: 2),<br />only screen and ( min-resolution: 192dpi),<br />only screen and ( min-resolution: 2dppx) {<br />}<br />

Retina.js

Hay un Javascript que soluciona usar imágenes de alta resolución en los dispositivos con pantalla retina. Como no controlo mucho de JS, os dejo en enlace por si os interesa leer más.

6. Pues yo ya lo he entendido.  ¿A ti te ha parecido didáctico?

¿Te animas a dejarme un comentario o una apreciación?

Virgilio

Profesional a tiempo completo o como freelance. Diseñador web y gráfico, director de arte, especialista Apple, viviendo en Madrid. www.godigital.es

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies