“Retiniza” tu tema WordPress

Apple ha introducido en muchos de sus dispositivos el concepto de visualización llamado “Retina display“, mediante el cual un dispositivo mostrará el doble (por lo menos) de resolución de otro similar, gracias a las pantallas de alta calidad que usan, por ejemplo, los últimos iPhone, iPad y ordenadores MacBook.

Si has probado uno de estos dispositivos con pantalla retina habrás comprobado que la resolución de las tipografías y las imágenes es realmente espectacular.

Para tener una web “retina ready” hay que tener en cuenta varios aspectos, los principales son estos:

  • Imágenes a mayor resolución, algo fácil de añadir mediante varios métodos que veremos más adelante.
  • Iconos y botones mediante CSS, para poder mostrar diferentes versiones según el dispositivo.
  • Favicons, lo más fácil, pues solo tienes que subir un favicon a 32×32 pixels en vez del estándar a 16×16

Y, cómo no, en WordPress podemos estar preparados para ofrecer una versión “retina ready” de nuestra web, para lo que tenemos varias posibilidades, algunas realmente sencillas. Vamos a ver algunas opciones, unas más fáciles que otras …

…Plugins WordPress…

WP Retina 2x: Este plugin convierte nuestro WordPress en “retina ready“, al menos en lo que a imágenes se refiere. Ofrece dos modos distintos de servir imágenes a tus visitantes, pudiendo elegir el que se adapte mejor a tu alojamiento y entorno. También dispone de soporte para WordPress multisitio.

El plugin, una vez activo, crea los archivos de imagen necesarios para dispositivos con pantalla Retina. Si la resolución de las imágenes originales no fuera lo suficientemente alta te muestra un aviso en la Librería Multimedia para que subas imágenes a mayor resolución.

Desde el primer momento, el plugin reconoce el dispositivo desde el que se esté visualizando tu web y mostrará la versión de las imágenes adecuada al mismo, siendo la de mayor resolución en el caso de los de pantalla Retina.

Simple WP Retina: otro estupendo plugin que cambia, cuando tu web se ve desde un dispositivo con pantalla retina, a la versión @2x de las imágenes.

Para ello, el plugin crea versiones @2x de las imágenes de las entradas y también para las miniaturas. No hay nada que configurar, pero también tienes que instalar el plugin regenerate thumbnails una vez instalado Simple WP Retina y ejecutar el regenerado de miniaturas, el resto es automático.

… Temas WordPress …

Por supuesto, te ahorrará tiempo y esfuerzos utilizar un tema que ya esté listo para pantallas retina, como Responsive (gratuito) u otro montón que puedes encontrar (ya de pago)

… Redimensionado mediante CSS …

Esto ya existe, no tienes que instalar ni aprender nada. La idea es sencilla: servir imágenes al doble de resolución pero redimensionadas a la mitad. El dispositivo con pantalla Retina mostrará la imagen a su tope de resolución, la única pega es que siempre cargas la imagen a tope de resolución, aunque no sea necesario en dispositivos sin pantalla Retina.

Vamos, que lo que tienes que hacer es adquirir la costumbre de siempre subir las imágenes al doble de resolución de las que las vas a mostrar en tu tema y redimensionarlas ,usando los atributos “width” y “height“, todas a la mitad al insertarlas.

En definitiva, sería algo así para una imagen de resolución 640×400:
<img src="http://midominio.com/wp-content/uploads/2012/11/03/pedazo_de_foto.png" width="320" height="200" />

… Javascript …

Un modo de conseguir lo mismo que con los anteriores métodos es mediante el script Retina.js. Una vez lo descargues del sitio oficial el proceso es este:

  1. Sube el archivo retina.js a tu servidor
  2. Añade el script necesario al archivo footer.php de tu tema activo, antes de la etiqueta </body>:
    <script type="text/javascript" src="/scripts/retina.js"></script>

Lo que hace el script es asumir que usas el modificador de alta resolución recomendado por Apple (@2x) para identificar variaciones de imágenes de alta resolución en tu web y, de este modo, si insertas una imagen llamada, digamos pedazo_de_foto.png, entonces buscar una llamada pedazo_de_foto@2x.png que será la que mostrará a dispositivos con pantalla retina. Así que ya sabes lo que toca: subir siempre la susodicha, o en su defecto utilizar el truco de LESS CSS cómo se explica en la web oficial de Retina.js.

… Fuentes iconizadas …

Una de las cosas más horribles al “retinizar” una web son las fuentes, pues la redimensión las muestra horriblemente pixelizadas. Para solucionar esta importante faceta podemos utilizar la técnica @font-face, muy implantada a partir de Twitter bootstrap, y bastante fácil de añadir a nuestro WordPress mediante Font awesome, que permite instalar iconos de fuentes tipográficas en forma de vectores que, sin recargar enormemente tu web, mostrarán una versión a alta calidad que se verán de maravilla en pantallas Retina.

Una vez descargues Fong Awesome haz lo siguiente:

  1. Copia la carpeta “Font Awesome” en tu servidor
  2. Copia los archivos font-awesome.less o font-awesome.css en la carpeta de tu tema WordPress activo.
  3. Abre el archivo CSS subido y edita la URL de la fuente para que apunte a la carpeta donde subiste Font Awesome

Otro modo de hacerlo es crear tu propia tipografía con servicios como Font builder y luego implementar las nuevas fuentes en tu sitio creando clases CSS que usen @font-face.


Bueno, como verás hay de todo, desde lo más sencillo hasta modos especiales para desarrolladores. Lo que parece que está claro es que la web tiende a retinizarse poco a poco y hay que tener en cuenta estas técnicas si queremos que nuestra web creada con WordPress sea competitiva y aporte valor añadido a estos dispositivos con pantalla Retina que cada vez se usan más.

AVISO: esta publicación es de hace dos años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado.

Valora este artículo para mejorar la calidad del blog ...

Al hacer una valoración se recoge una cookie con la IP de tu dispositivo

FlojitoNo está malEstá bienMe ha servidoFantástico (2 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando Tellado

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran. Autor del libro WordPress - La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

Al dejar un comentario se solicitan datos como tu correo y nombre que se almacenan en una cookie para que no tengas que volver a completarlos en próximas visitas. Para enviar un comentario debes aceptar nuestra política de privacidad | Responsable de los datos: Fernando Tellado García | Finalidad: Gestión y moderación de comentarios | Legitimación: Tu consentimiento expreso | Destinatario: Disqus (acogido a EU-US Privacy Shield) | Derechos: Tienes derecho al derecho al acceso, rectificación, supresión, limitación, portabilidad y olvido de sus datos

Centro de preferencias de privacidad

Cookies imprescindibles

Se usan para almacenar tu nombre, correo, IP y demás datos que dejas en los formularios de comentarios, contacto, acceso y tus preferencias de privacidad.

AUTH_KEY, SECURE_AUTH_KEY, LOGGED_IN_KEY, NONCE_KEY, comment_author, comment_author_email, comment_author_url, rated, gdpr, gawdp

Cookies de terceros

Usamos cookies de terceros en las que se almacenan externamente para conocer tus usos de navegación, si ya estás suscrito al boletín y los elementos compartidos en redes sociales

cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform, _ga, _gid
cfduit_, intercom-id, intercom-lou, mailerlite:language, mailerlite:webform
_ga, _gid

¿Quieres cerrar tu cuenta?

Se cerrará tu cuenta y todos los datos se borrarán de manera permanente y no se podrán recuperar ¿Estás seguro?

Pin It on Pinterest