Retina Display es una marca comercial de Apple para referirse a las pantallas de alta densidad de píxeles fabricadas y desarrolladas por Sharp y utilizadas en sus dispositivos, basada en la tecnología In-plane switching]] (IPS). Esta denominación está actualmente presente en el iPhone 4Sy en el iPhone 5, en el iPod touch de cuarta y quinta generación, en el nuevo iPad de tercera generación y cuarta generación, en el MacBook Pro con pantalla Retina presentado en junio de 2012 como el primer ordenador con este modelo de pantalla.

Desde el lanzamiento del iPhone con la pantalla retina , y posteriormente, el iPad y la MacBook Pro también con pantalla retina, se ha producido un aumento en la necesidad de mayor resolución en las imágenes de la web. Un DPI más alto ( puntos por pulgada ) en pantallas de retina significa que proporcionan una imagen más nítida al ojo, pero esto requiere de gráficos de alta resolución.

En la actualidad, la gran mayoría de los sitios web no están listos para pantallas de retina.  Propietarios de MacBook Pro con pantalla Retina se quejan de esto frecuentemente, ya que la mayor parte de la web ellos la ven borrosa.  Del mismo modo, si te fijas bien en la mayoría de los sitios, te darás cuenta de que las imágenes PNGs o JPEG de tamaños normales se ven borrosas en un iPhone o iPad con pantalla de retina.

Para cualquier persona que diseñó su sitio web originalmente utilizando gráficos vectoriales, adaptarlo a pantallas de retina no debe ser demasiado problema.  Pero si los gráficos fueron diseñados exclusivamente como mapa de bits, probablemente se requerirá un poco de trabajo extra.

EL PROBLEMA

Aunque ya se va logrando una uniformidad, actualmente, todos los diferentes navegadores tratan este problema de diferentes maneras.  Y diferentes dispositivos tienen diferentes resoluciones, algunas de las cuales no están estandarizadas.  Esto representa un problema a los diseñadores web y desarrolladores por igual.  No hay una manera “mejor” de resolverlo – cada método tiene sus propias ventajas y desventajas.  Razón por la cual conviene conocer los distintos métodos y cual implementar en cada caso.

Mientras que el diseño responsive habla en cuanto al “layout” o distribución del contenido del sitio según la resolución de la pantalla, Retina Ready es, entonces, que el sitio web estará adaptado con imágenes de alta resolución para verlo correctamente en estos dispositivos.