Diseño retina: Magia sin exceder los bytes

¿Qué es Retina Display?

Actualmente todos hablan sobre la retina display pero, que debemos hacer con este?, pues bueno empecemos por el concepto de retina display que nace por parte de Apple (Si como raro) en los iPhone hace unos años, para este tiempo no nos preocupábamos por que nuestras imágenes para desktop eran gigantes y al momento de hacer responsive en nuestro móvil se veían normales, hasta que Apple decide sacar el MacBook Pepito (Pro Retina Display) en donde el problema se complico y los que empezaron a comprarlo veían la web con desprecio y pixeleada.

La idea de retina no solo es de Apple, ya casi todos los móviles empezaron a tener una pantalla retina y los laptop también están en el mismo camino, así que es hora de tomar camino sobre este.

Retina simplemente se basa en el concepto de que antes en una pantalla donde había un pixel, ahora hay 4 pixeles, lo cual hace que la resolución de la pantalla sea mucho mayor que su tamaño físico, veamos una foto:



Podemos ver la resolución de un iPhone 3GS (Sin retina), un iPad (Sin Retina) y un iPhone 4 (Con Retina).

Ahora en que nos afecta esto realmente, lo primero que podemos pensar es en las fuentes, pero con fuentes SVG ya no tenemos problemas ya que son vectoriales y se acomodan según la pantalla sin pixelearse.

Y como lo solucionamos?

Ahora nuestro problema son las imágenes  y la solución mas optima es que si deseamos una imagen en nuestra pagina que sea de 60x60 px debemos crear una imagen de 120x120 px y hasta ahora ya resolveríamos el problema de las imágenes  pero ahora piensa  si necesitamos una imagen de 600x600 y debemos crear una de 1200x1200 ya seria demasiado peso para una imagen y causaría una demora significativa en su carga, pues como nos enseño Freddy en el curso, la mejor solución es exportar la imagen a PNG 8 con canales alpha en donde se soportan transparencias, sombras, bordes redondeados, entre otros y tu imagen no pesara tanto como para generar esta carga de tiempo innecesario, así es olvídate de PNG 32, ninguna pagina lo necesita.

Pero seguimos con un problema y es que mi imagen es demasiado grande para el espacio que yo había planeado y es aquí en donde un frontend profesional entra y con CSS adapta su tamaño de la siguiente forma:

figure
    width 60px
    img
        width 100%

Suponiendo que figure es el contenedor de la imagen e img es la etiqueta de la imagen (Sí, esto es Stylus por que somos frontend profesionales), ahora ya no tienes problema con las pantalla retina y tu cliente esta mas feliz contigo.

Espero te guste la lectura y hayas entendido el tema, recuerda que cualquier pregunta debes ponerla en el sistema de discusión pero antes verifica que otro no la haya respondido aún.