WebP para mejorar el rendimiento en Drupal
En un gestor de contenidos como es Drupal es muy habitual por no decir "casi obligatorio" trabajar de forma recurrente con imágenes. Mi experiencia en proyectos anteriores viene hoy a exponerte por qué es tan importante analizar detenidamente la estructura y lógica que determina cómo se subirán las imágenes en el CMS.
En este artículo vamos a repasar la importancia de los formatos de imagen o extensiones. Concretamente vamos a hablar sobre uno de los más usados y eficientes...
WebP
WebP es un formato de imagen moderno desarrollado por Google que ofrece una compresión y una calidad muy superiores comparado con otros formatos tradicionales como JPEG y PNG. Admite compresión con y sin pérdida, transparencia y animación, lo que lo convierte en una opción versátil y altamente recomendable para trabajar con imágenes.
En resumen, WebP ayuda a mejorar el rendimiento del sitio web al reducir el tamaño de los archivos, lo que se traduce en tiempos de carga más rápidos y una mejor experiencia de usuario.
Soporte de WebP en navegadores
Desde 2020, todos los navegadores principales son compatibles con WebP. Si te tranquiliza, puedes echar un vistazo aquí para ver la compatibilidad con todos los navegadores.
Configurar Drupal para habilitar WebP
Desde Drupal 9.2.0 se introdujo la compatibilidad totalc con WebP en el núcleo de Drupal, haciendo mucho más sencillo y accesible el uso de este formato en los portales web que tuvieran dicha versión en adelante. Antes de 9.2.0, es necesario el uso de módulos contribuidos o implementaciones personalizadas que permitan la integración con WebP.
Nos centraremos en Drupal 10 en adelante, ya que la solución ya está incluida en el núcleo y es mucho más sencillo. Tan solo sigue los siguientes pasos:
- Ve a Configuración > Multimedia > Estilos de imagen.
- Localiza el estilo de imagen que uses en tus imágenes; si es más de uno, repite el paso 3 en cada uno de ellos.
- Añade el efecto "Convert", y selecciona "WEBP".
- ¡Listo!
Pruebas
Ahora todas las imágenes que usen el estilo de imagen o los estilos de imagen que has modificado para que se conviertan a WEBP deberían tener dicho formato. Si no es así, restablece las cachés.
Abre el inspector de elementos de tu navegador favorito y comprueba el formato de las imágenes. Ahora deberían ser WebP.
Beneficios
Los beneficios y mejoras en optimización son evidentes. El tamaño de las imágenes debería reducirse hasta un 50% si usabas formatos tradicionales. Quizás en una imagen o dos no se note o perciba diferencia, ¡pero en sitios webs con múltiples imágenes puede conllevar una mejora significativa!
Ahora bien, si por necesidades o porque simplemente haces poco uso de imágenes no quieres optar por usar WebP, puedes seguir usando los formatos tradicionales y usar otras técnicas de compresión y optimización de imágenes.
