Portada Wordpress Plugins WordPress «Retina» con WP Retina 2x
Desde hace algunos años, la resolución de las pantallas de nuestros dispositivos está aumentando a niveles impresionantes.
Teléfonos móviles, tablets y monitores de ordenador llevan los PPI (píxeles por pulgada) a niveles asombrosos y se consigue no ver ningún píxel en ningún momento.
Esto plantea un problema, ya que a mayor resolución de las imágenes mayor peso tienen y más tardarán en cargar los sitios web, además de consumir más recursos de nuestro hosting, además, no todos los dispositivos tienen resoluciones altas y no necesitan de esas imágenes a gran resolución.
La solución está muy clara, mostrar las imágenes de gran resolución a los dispositivos que las acepten y mostrar las mismas imágenes con menos resolución a los dispositivos que no sean capaces de visualizar PPI muy altos.
De esta manera mostraremos las imágenes a la resolución perfecta dependiendo del dispositivo con el que se vea el sitio web. Es decir que tendremos un diseño adaptable.
√ ¿Necesitas un hosting rápido y de confianza para tu WordPress? CLICK AQUÍ
Para poder gestionar que imágenes mostrar tenemos un plugin muy interesante que nos ayudará con este proceso llamado WP Retina 2x.
Lo de retina viene por el nombre comercial que Apple le dio a la pantalla de su iPhone 4 allá por el 2012. Se definía como retinaa la resolución necesaria para no ver ningún píxel usando el dispositivo a una distancia normal.
Desde entonces el término retina se ha popularizado bastante y en este plugin hace uso de la misma palabra para dar a entender que se trata de la gestión de imágenes en alta resolución.
El plugin lo podemos encontrar en el repositorio de plugins de nuestro WordPress, o podemos descargarlo desde aquí.
Una vez activo veremos que en la sección de Medios tenemos una nueva opción llamada Retina .
Si entramos en esta opción veremos que nos muestra todas las imágenes que hemos subido a nuestro WordPress.
En cada imagen veremos que tenemos varias opciones seguidas de unas casillas con letras en colores naranjas y rojos.
Cada una de las letras corresponde a una resolución, si alguna aparece en rojo significa que la imagen que hay subida es demasiado pequeña como para generar dicha resolución y la única opción que tenemos es subir la imagen con más resolución.
Por cada imagen que tengamos, el plugin generará 8 más con distintas resoluciones para poder mostrar las imágenes adecuadas en cualquier dispositivo.
En los botones de la derecha de la pantalla tenemos:
Si hacemos click en Generate el plugin creará todas las versiones de la imagen que pueda, dejando en rojo las que no ha podido generar por falta de resolución por si queremos y podemos subirla.
Si queremos que el plugin nos cree las versiones de todas las imágenes que tengamos en nuestra biblioteca de medios, sólo tenemos que hacer click en Bulk Generate. También tenemos la opción de eliminar el paquete de imágenes si fuera necesario.
En el menú de Ajustes tenemos una sección de Retina donde podemos configurar varios aspectos del plugin.
En las opciones básicas nos permite desactivar algunas de las resoluciones que se generan por defecto. Esto viene bien por si tenemos la certeza de que no vamos a usar una de esas resoluciones y no queremos que ocupen espacio en nuestro alojamiento.
En las siguientes opciones podemos seleccionar si queremos que se generen las imágenes retina de manera automática al subirla marcando la casilla Auto Generate.
Las siguientes opciones nos permiten desactivar las imágenes que genera por defecto el propio WordPress. Como ya sabréis, cada vez que se sube una imagen a la biblioteca de medios, WordPress crea imágenes más pequeñas para gestionar las miniaturas de las mismas.
En la pestaña Advanced podemos gestionar el método con el que queremos que el plugin trabaje. El primero, Picturefill, está marcado por defecto y es el que recomienda usar. Si en algún alojamiento web el plugin da algún problema, es bueno saber que existe opciones alternativas.
También podemos seleccionar el nivel de compresión de las imágenes que se generen, activar el Debug Mode para la detección de errores o configurar un CDN.
Con la configuración básica del plugin podemos encontrar las opciones suficientes para que el plugin funcione correctamente, de hecho funciona correctamente sin tener que modificar ninguna de las opciones que vienen por defecto.
Con las configuración por defecto crearemos las imágenes necesarias para mostrar la imagen correcta dependiendo de la resolución del dispositivo que visite nuestro WordPress.
Como punto negativo sólo encontramos que generar tantas imágenes hace que el espacio que ocupamos en nuestro alojamiento sea mayor y los hosting con poco espacio en disco se pueden ver afectados.