Los nuevos dispositivos móviles de iPhone y el iPad, vienen equipados con unas pantallas retina. Para que nuestros diseños se vean con buena calidad en estos dispositivos va a ser necesario que adaptemos las imágenes principales a esta resolución de pantalla. ¿Qué es exactamente una pantalla retina? Aquella que muestra el doble de píxels en el mismo espacio que los dispositivos anteriores. En este tutorial aprenderán a adaptar sus imágenes a los dispositivos retina para cuando estén haciendo diseño web responsive.
LAS IMÁGENES RETINA
Las imágenes retina las vamos a estar utilizando tanto para el desarrollo de apps para los nuevos iPhone y iPad, como para la creación de diseños web responsive y aplicaciones web. En el caso que estemos desarrollando apps para la Apple store no habrá ningún problema con el tema de las imágenes retina, pero sí en el diseño web responsive y las aplicaciones web. ¿Motivo? Al tener las imágenes retina el doble de resolución, también tendrán el doble de peso, con lo que no es aconsejable hacer todas y cada una de las imágenes retina, sino las más importantes.
LOS ICONOS RETINA
Es aconsejable crear un icono para el iPhone y el iPad por si el usuario decide guardar nuestra web o aplicación web como un icono en su pantalla. Para ello habremos de tener en cuenta estas resoluciones:
iPhone: 57 x 57
iPhone Retina: 114 x 114
iPad: 72 x 72
iPad Retina: 144 x 144
Si no especificamos la medida correcta, entonces utilizará la medida más grande siguiente. Así, si no especificamos el icono 114 x 114, utilizará el 144 x 144.
Veamos el código que deberíamos añadir al head de nuestra web:
Existen varias maneras de mostrar imágenes retina. Quizás la mejor sea la que se propone en este artículo, pues lo hace con PHP desde el lado del servidor. ¿Ventajas? Que si lo hacemos con JavaScript o jQuery descargaremos la imagen dos veces, con lo que consumiremos un ancho de banda no óptimo para cuando se está navegando en 3G. En el caso de utilizar WordPress, te puede servir el plugin WP Retina 2x.
