Los nuevos dispositivos de Apple (iPhone, iPad, MacBook) cuentan con una pantalla Retina Display, estas pantallas tienen el doble de densidad de píxeles en el mismo espacio que los dispositivos más antiguos. Pero un diseñador web ¿Qué debe hacer para que su contenido se vea bien en estos nuevos MacBooks, iPads y iPhones?. En primer lugar hay algunas preguntas difíciles a considerar, pero entonces esta guía te ayudará a empezar a hacer que tus sitios web y aplicaciones web se vean increíblemente nítidas con imágenes Retina.
Cosas a considerar antes de añadir imágenes Retina
El principal problema al que te enfrentas al agregar imágenes retina es que las imágenes son el doble de grande y esto consumirá más ancho de banda (esto no es un problema para aplicaciones iOS reales, pero esta guía cubre los sitios web y aplicaciones web solamente). Si tu sitio se utiliza mayormente sobre una red 3G, entonces tal vez no sea buena idea hacer todos tus gráficos Retina, y tal vez solamente sea bueno elegir algunas imágenes importantes. Pero si vas a crear algo que se utiliza más a menudo en una conexión Wi-Fi o tienes una aplicación que merece la espera adicional para los gráficos de alta resolución.
1. Crea el icono para tu página web en versión Retina
Cuando los usuarios agregan tu sitio web o aplicación web a su pantalla de inicio en iOS, tu sitio será representado por un icono, el icono debe ser de cierto tamaño dependiendo del dispositivo, estos son los tamaños (de Apple) para los iconos:
- iPhone 57 x 57
- iPhone Retina 114 x 114
- iPad 72 x 72
- iPad Retina 144 x 144
Para cada una de estas imágenes puedes crear un link en la cabecera de la página como el siguiente ejemplo:
(Si deseas que el dispositivo agregue las esquinas redondeadas elimina el sufijo -precomposed del nombre de archivo):
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" /><link rel="apple-touch-icon-precomposed" sizes="72x72" href="touch-icon-ipad.png" /><link rel="apple-touch-icon-precomposed" sizes="114x114" href="touch-icon-iphone4.png" /><link rel="apple-touch-icon-precomposed" sizes="144x144" href="touch-icon-ipad3.png" />
Si el tamaño correcto no se especifica el dispositivo utilizará el icono más pequeño que es mayor que el tamaño recomendado (es decir, si no se especifica la medida 114px el iPhone 4 va a utilizar el icono 144px).
Imágenes de fondo Retina
Las imágenes de fondo que se epecifican en el CSS se pueden intercambiar mediante los Media Queries @media. Para esto tal vez quiera crear 2 versiones de la misma imagen. Por ejemplo para fondoMosaico.png de 100px por 100px y otra imagen llamada \’fondoMosaico@2x.png\’ de 200px por 200px. Es muy útil contar con una convención de nomenclatura estándar, como la adición de @2x en las imágenes Retina. Ahora para agregar la nueva imagen @2x a tu sitio sólo tienes que añadir en el Media Query, que se muestra a continuación, la declaración de la imagen de fondo específica para los dispositivos con pantalla retina
.mosaicoRepetido {background: url(../images/bgPattern.png) repeat;background-size: 100px 100px;}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {.repeatingPattern {background: url(../images/bgPattern@2x.png) repeat;}}
Uso de JavaScript para reemplazar imágenes por imágenes Retina
Para las imágenes Retina que no son fondos la mejor opción parece ser tanto la creación de gráficos con CSS, usando SVG, o la sustitución de tus imágenes con JavaScript. Al igual que las imágenes de fondo, tendrás que crear una imagen normal y una imagen @2x. Luego con JavaScript se puede detectar si la proporción de píxeles del navegador es 2x, al igual que lo haces con los Media Query:
if (window.devicePixelRatio == 2) {//Código para reemplazar el src de las ing con la imagen retina}
Si estás usando jQuery rápidamente podrías reemplazar todas las imágenes como en este ejemplo muy básico que te muestro enseguida. Es una buena idea añadir una clase para identificar las imágenes con alta resolución para que no se sustituyan a otras por error. ¡Tengo una class=»empleados» para este ejemplo. También asegúrate de que tienes el estándar (no retina) de alto y el ancho establecido en el código HTML:
<img class="empleados" alt="" src="buscar.png" width="100" height="100" /><script type="text/javascript">$(function () {if (window.devicePixelRatio == 2) {var images = $("img.empleados");// Hacemos un bucle en las imágenes y las hacemos retinafor(var i = 0; i < images.length; i++) {// Crea el nuevo nombre de imagenvar imageType = images[i].src.substr(-4);var imageName = images[i].src.substr(0, images[i].src.length - 4);imageName += "@2x" + imageType;//Renombramos la ia¡magenimages[i].src = imageName;}}});</script>
Imágenes Retina del lado servidor
Si desea implementar una solución del lado servidor para mostrar imágenes Retina, te recomiendo ver esta solución hecha con PHP. Esta solución utiliza código PHP para determinar qué imagen debe ser servida. La ventaja de esta solución es que no tienes que reemplazar la pequeña imagen con la Retina por lo que estás usando menos ancho de banda, especialmente si tienes un montón de imágenes que estás reemplazando, pero en sistemas de caché o servidores muy ocupados tal vez no sea una buena opción.
Uso de Retinize.js para mostrar imágenes retina
Existe una librería de JavaScript llamada retinize.js que tiene la ventaja de servir solamente la imagen retina cuando sea necesario en lugar de la imagen normal primero y luego la imagen retina, puedes echarle un vistazo aquí.
Configura Apache para que automáticamente sirva imágenes retina
Elegir mostrar las imágenes Retina en tu sitio web es muy fácil cuando se utiliza CSS llano con imágenes de fondo, pero se vuelve un poco más complicado cuando se trata de mostrar a las imágenes mediante una etiqueta.
Una técnica mejor es darle al servidor web la inteligencia para que decida si enviar de forma automática las imágenes retina, cuando el dispositivo lo requiera necesita, y cuando existan en el servidor., aquí tienes las instrucciones de cómo implementar esta solución.
[Vía: Kyle J Larson]