¿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

14 Comments

  • Diego. dice:

    Muy bien explicado. Me gustaria saber si hay algun prodcuto que no sea Apple que use esta tecnologia.

    • Virgilio dice:

      Gracias Diego. Retina es una marca registrada por Apple, por lo que ningún producto NO apple puede tener esa denominación comercial. Actualmente los proveedores a Apple de las pantallas Retina son LG Display Co. y Samsung Electronics Co. por lo que estas dos compañías son las únicas que podrían sacar sus propios productos “Retina” y veremos si en un futuro estas deciden apostar fuerte por su propia tecnología y cerrar el grifo a Apple.
      Un saludo

    • exitido exitido dice:

      Que sepa ahora mismo, nexus4 con 320 ppi, nexus 10 con 300 ppi.
      Seguro que hay muchisimos mas con mas resolucion y pixeles por pulgada que los los retina de apple, pero no tienen un nombre tan chulo para engañar a la gente.

      Curiosamente, ni el Ipad4 (264ppp), MacBook Pro Retina 15″ (220ppp), Ipad Mini (163ppp) ni el Macbook Pro Retina de 13″(227ppp) alcanzan los 300ppp.

      • virgilio dice:

        Eso estoy leyendo en las especificaciones de los modelos. El que si tiene más es el iphone5 con 326ppp.
        Apple es el rey del marketing, sabe como vender 😀

        • exitido exitido dice:

          Ya te digo, hoy mismo me acaban de decir que el ipad2 tiene mas resolución que mi nexus 10. En cuanto le he dicho que el nexus 10 tiene 2560×1600 me ha dicho que no, que lo que tiene es mas definición por los pixeles por pulgada, le he vuelto a contestar que el suyo tiene 132 frente a los 300 del nexus 10 y me ha dicho que en realidad es mejor porque el suyo tiene pantalla retina y el mio no.
          Al final le he dado la razón y me he tenido que marchar.

          • virgilio dice:

            Bueno, no se si relamente la densidad de ppp es lo más importante. A mi la experiencia de usuario que me ofrece los productos Apple me gusta

          • virgilio dice:

            Ah no, yo tengo el iPad2 y no tiene Retina 😀 Pero podemos vivir sin Retina, por ahora, hasta que en unos años todos estos aparatos la implementen por defecto.

  • Virgilio dice:

    Según leo en internet, Samsung está desarrollando la tecnología de diodos orgánicos de emisión de luz (AMOLED) con 350 píxeles por pulgada (PPI), superando los 264 ppi del iPad o los 326 ppi de iPhone 5.

Leave a Reply

Your email address will not be published.

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