Imágenes responsivas en Wordpress.

Imágenes responsivas para tu blog

Un aspecto pendiente en Wordpress desde hace algún tiempo era la automatización de la responsividad de las imágenes que hasta el momento, no ofrecían dicha funcionalidad. Por fortuna, ya se ha lanzado una primera versión de un complemento que automatiza dicha funcionalidad, el RICG, y a continuación comentaremos cuáles son sus ventajas y como funciona.

La navegación en Internet ha cambiado rotundamente en los últimos años, volcándose cada vez más hacia el acceso desde los dispositivos móviles.

Dichos dispositivos varían ampliamente en tamaño de pantalla y resoluciones, situación que torna absolutamente necesario contar con sitios web programados en plataformas responsivas que se adapten a los tamaños de navegación de cada caso, para no perjudicar la experiencia del usuario. Las plataformas de gestores de contenido se han adaptado de manera brillante a esta nueva necesidad de la industria, pero en el caso de las imágenes la responsividad no estaba automatizada.

La opción que les quedaba a los administradores de sitios web era modificar manualmente las hojas de  código de las distintas páginas de sitio, para que llamen en cada caso distintas versiones de una misma imagen de distintos tamaños. Por otro lado, era necesario crear las distintas versiones de las imágenes manualmente y subirlas, también de manera manual, a la carpeta de media del gestor de contenidos.

Este proceso resultaba engorroso y riesgoso para aquellos usuarios que no cuentan con conocimientos avanzados de programación y no se sienten cómodos con la manipulación de archivos HTML.

En respuesta a esta necesidad de todos los usuarios de Wordpress, un grupo de desarrolladores independientes crearon con el apoyo del soporte técnico oficial de Wordpress, el complemento RICG (Risponsive Image Community Group) que se ocupa específicamente de automatizar este proceso de responsividad de las imágenes de cualquier tipo en sitio web desarrollado en dicha plataforma.

Su funcionamiento es bastante simple, al agregar una imagen a WordPress el complemento crea tres imágenes de distintos tamaños (miniatura, mediana y grande), funcionalidad que se logra a través de la manipulación de la función functions.php. Por defecto, el complemento respetará las dimensiones originales de la imagen, utilizando el tamaño necesario para cada caso, pero si tu intención es que la imagen se corte en ciertos contextos, está funcionalidad también puede ser programada.

Una vez instalado el complemento RICG Responsive Images, todas las imágenes serán tratadas de la misma manera, excluyendo aquellas subidas al sitio con anterioridad a la instalación. El complemento funciona gracias a la utilización de un atributo denominado srcset que permite atribuirle a una imagen múltiples orígenes, en el cual el código inteligente interpreta las características de la pantalla y llama, en cada caso, la imagen óptima para dicha resolución.

Es así que junto con una función en JavaScript denominada Picturefil.js, el atributo srcset permite que las imágenes respondan a las distintas resoluciones y se adapten al entorno.

Este nuevo complemento resulta muy beneficioso para el usuario y la editorial de todo blog porque aumenta la velocidad de carga en cada una de las versiones y asegura la visualización optima de las imágenes sin importar el tipo de dispositivo que se esté utilizando para visitar el sitio web.

Adaptarnos a las nuevas necesidades del mercado, respondiendo a las nuevas tecnologías que se popularizan entre los usuarios es muy necesario para mantenerse a la vanguardia y ofrecer el mejor producto posible para los lectores de blogs. El tiempo de carga, la calidad de imagen, la accesibilidad garantizada desde todo tipo de dispositivos y la responsividad son características indispensables en todo sitio web moderno. Por lo tanto, los blogueros debemos mantenernos siempre actualizados, para ofrecerles a nuestros lectores la mejor experiencia digital posible y no perder potenciales usuarios en el camino.

El complemento RICG Responsive Images  es un avance tecnológico más que nos permite crecer como profesionales de la comunicación en línea.