Parece que las novedades de Apple han afectado en gran medida cómo se ven las páginas web y, sobre todo, cómo tiene que configurar un blogger su blog para que sus contenidos se visualicen correctamente.
La cosa comenzó con la irrupción del iPhone y el iPad, obligando a todo el mundo a redefinir la anchura de las páginas de cada sitio web para que se adaptaran a los nuevos formatos.
Luego llegaron las pantallas con calidad ‘retina’, en serio Apple, los usuarios estarán contentos, pero vaya trabajito que nos estás dando a muchos … hoy concretamente vamos a echar un vistazo a las imágenes en WordPress y cómo adaptarlas correctamente para que se visualicen en pantallas ‘retina’.
Resoluciones de pantallas retina
En primer lugar vamos a echar un vistazo a eso de las ‘pantallas retina’. Mencionar que se llaman así porque su resolución está cercana al límite que una retina humana es capaz de percibir, concretamente:
Para un iPhone a partir de la versión 4/4S: 960 por 640 pixels con una resolución de 326 dpi.
Para un iPad a partir de la versión 3: 2048 por 1536 con una resolución de 264 dpi.
Para un MacBook Pro con pantalla retina: 2880 por 1880 con resolución 220 dpi.
Dirás que cómo es posible que aquí aparezcan dos resoluciones diferentes, una en píxels clásicos y otra en dpi, ¿qué es eso de ‘dpi’?
Dpi aquí indica ‘puntos por pulgada’ y, básicamente, es la resolución real de la pantalla, mayor de la que la tarjeta gráfica del dispositivo o el ordenador es capaz de mostrar. Esto significa que, por ejemplo, en la resolución de 960×640 cada pixel puede estar formado por otros píxels más pequeños, dando como resultado que la impresión visual es mucho mayor, prácticamente el doble de lo normal tanto en alto como en ancho.
Teniendo en cuenta este dato, una forma sencilla de visualizar una imagen en una pantalla retina es ésta:
– Si quieres visualizar una imagen de tamaño 600×400 entonces créala al doble y visualízala a la mitad ¿ehhhh? no tan rápido, suena raro pero es muy sencillo:
1. Creas la imagen a 1.200×800, justo el doble del tamaño que que queremos visualizar.
2. Cuando la vayas a cargar en la página, la cargas a la mitad de la resolución de la imagen, que es justo la que queremos, es decir, la visualizas en una zona de tamaño 600×400.
De esta forma estás ‘calzando’ una imagen grande en un espacio pequeño para aproveche todos los pixels de la pantalla retina.
Esto tiene una implicación colateral que no suele gustar al webmaster o blogger medio: las imágenes grandes tardan más en cargar, y nosotros no queremos que las páginas de nuestros blogs sean lentas y los visitantes vayan a Google aburridos a buscar otra ¿cierto?
La solución aquí no existe, si quieres visualizar una imagen con calidad aceptable en una pantalla retina, entonces las imágenes tienen que ser el doble de grandes.
Lo que sí puedes hacer es asegurarte de que estas imágenes excepcionalmente grandes se carguen sólo cuando sean necesarias, en este caso en pantallas retina.
Esta idea te obliga a que, por cada imagen, tengas que tener dos versiones diferentes. En nuestro ejemplo anterior, una imagen ‘grande’ a 1.200×800 que se cargará en dispositivos con pantalla retina y otra imagen ‘normal’ a resolución 600×400 que se cargará en el resto de pantallas.
La buena noticia es que, como en tantas otras ocasiones, tienes a tu disposición uno de esos plugins que te facilitan las cosas y hacen casi todo el trabajo por ti. En este caso:
WP Retina 2x
Este plugin se encarga de realizar todo el trabajo pesado en el caso de que no quieras hacerlo tú mismo a mano.
En este caso, por cada imagen que subas a tu blog, el plugin se encarga de crear una segunda imagen añadiéndole al final @2x. Por ejemplo, si la imagen original es foto.jpg, la imagen adaptada para pantallas retina tendría este otro nombre: foto@2x.jpg.
La elección del sufijo para el nombre del archivo no es capricho, Apple lo recomienda así por algún motivo y en este caso el plugin cumple con el estándar.
Por último, el plugin se encarga de decidir cuándo debe mostrarse la imagen normal y cuándo visualizar la imagen adaptada para pantallas retina de forma automática, así que prácticamente se trata de un plugin de ‘instalar y listo’.
Puedes encontrar el plugin aquí: WP Retina 2X
Por último, mencionar que se trata de un plugin más que recomendable, no sólo para adaptar tu web a este tipo de pantallas, sino para evitar que se quede desfasada antes de tiempo cuando, tarde o temprano, las pantallas retina se conviertan en un estándar en la mayoría de ordenadores y gadgets.