Cómo funcionan las imágenes WebP en WordPress

Ya hemos mencionado en más de una ocasión que la velocidad de carga de nuestra web es un factor clave a la hora de posicionarla bien en los buscadores. Y aunque es posible que no necesite alcanzar la cima en Google Speed, cualquier esfuerzo relacionado con la optimización de imágenes es particularmente crítico para mejorar el SEO.

La comunidad de WordPress es muy consciente de ello, y por ello, en la última versión 5.8 añadió la funcionalidad para soportar el formato de imagen WebP.

¿Qué son las imágenes WebP?

WebP es un formato de imagen desarrollado por Google en 2010 para ser una alternativa a formatos como PNG y JPG, produciendo tamaños de archivo mucho más pequeños y manteniendo calidades de imagen similares. A diferencia de otros formatos, WebP admite compresión con pérdida y sin pérdida, así como transparencia y animación.

Incluso con estas características, WebP siempre ofrece tamaños de archivo más pequeños que sus alternativas. En un estudio comparativo de Google de estos formatos de imagen, se descubrió que las imágenes con pérdida de WebP eran, en promedio, un 30 % más pequeñas que las JPG y un 25 % más pequeñas que las PNG.

Además, Google PageSpeed ​​Insights, que es un evaluador del nivel de optimización de tu sitio web, te recomienda utilizar formatos de imagen modernos como una de las oportunidades para mejorar la velocidad de carga de tu sitio web.

Una de las preguntas que puede tener al considerar si debe tener todas las imágenes en WebP es el soporte actual para diferentes navegadores. Lo último que querrías es que tus lectores no puedan ver las imágenes correctamente.

Y la realidad es que el apoyo en cada uno de ellos va en aumento. Actualmente, ya estamos hablando de un 95% de soporte.

Cómo convertir imágenes a WebP

Para subir una imagen WebP a la biblioteca, obviamente, lo primero que debemos tener es dicha imagen en el formato en cuestión. Si descargas una imagen de un banco de imágenes, seguramente la descargarás en formato JPEG o PNG. Así que tu primera tarea será convertir la imagen a ese formato. ¿Qué alternativas tenemos?

Herramientas de diseño de imagen

Algunas herramientas de diseño de imágenes, como Sketch, Adobe Photoshop o Cloudinary, entre otras, incluyen la opción de guardar cualquier imagen en formato WebP. Es tan simple como abrir la imagen que desea convertir y luego guardarla en el nuevo formato.

Pero si no es tu caso, no te preocupes porque tienes alternativas gratuitas, como veremos a continuación.

Herramienta oficial de Google

Otra opción es descargar cwebp , una herramienta para Linux, Widows o Mac para convertir cualquier imagen PNG o JPG a WebP. Una vez descargado e instalado, puede ejecutar directamente las instrucciones para convertir cualquier imagen en su computadora. Entonces, por ejemplo, puede convertir un archivo de imagen PNG en una imagen WebP con un rango de calidad de 80 con el comando:

cwebp -q 80 image.png -o image.webp

Si necesita convertir muchas imágenes al mismo tiempo, este artículo explica las instrucciones, en un entorno similar a Unix (como macOS o Ubuntu), para que pueda convertir un gran conjunto de imágenes.

Y en el mismo artículo también te hablan de la alternativa de programar la conversión con Node.js usando la herramienta imagin-webp.

Convertidores en línea

Otra alternativa si no desea escribir una sola línea de código es utilizar un convertidor de imágenes en línea. Buscar en Google muestra fácilmente una larga lista de convertidores, incluidos los siguientes:

• Ezgif Webp
• Cloudconvertir
• Convertio
• Convertir en línea
• FreeConvert

En todos ellos solo tienes que subir la imagen, realizar la conversión y descargar el archivo convertido.

Complementos de WordPress

Finalmente, como te explicaré a continuación, verás que también existen complementos que convierten imágenes a formato WebP cuando las subes a tu sitio de WordPress.

Cómo cargar una imagen WebP en la biblioteca de medios

Una vez que tengamos la imagen en este formato, debería poder subirla a su biblioteca de medios de WordPress como de costumbre, pero…

¡Uy, no funciona! Al menos, no lo fue para mí. Y es posible que enfrente el mismo problema según el proveedor de alojamiento que esté utilizando actualmente.

WordPress tiene una limitación incorporada en los tipos de archivos MIME que puede cargar en su sitio por razones de seguridad. MIME significa Extensiones de correo de Internet multipropósito. Los navegadores y otros dispositivos de Internet utilizan los tipos MIME para determinar el tipo de contenido asociado con una página. Por ejemplo, si tiene un archivo .png y un archivo .jpeg en una página, el navegador sabrá por sus tipos MIME (no por su extensión de archivo) que debe tratar ambos archivos como imágenes, en lugar de videos u otros tipos de archivos.

De forma predeterminada, WordPress almacena una lista de tipos MIME registrados en wp-includes/functions.php . Sin embargo, no se pueden cargar todos los tipos MIME reconocidos.

Y si intenta cargar un archivo con una extensión fuera de esta lista predefinida, como es el caso de WebP, verá el mensaje de error anterior.

En la documentación de tu empresa de hosting encontrarás varias alternativas para modificar cómo permitirte subir este nuevo tipo MIME. Esto suele ser mediante el uso de un complemento con el que puede agregar tipos de archivos adicionales o modificar directamente el archivo, o usar su propio complemento con el siguiente código:

 function nelio_custom_upload_mimes( $existing_mimes ) { $existing_mimes['webm'] = 'image/webm'; return $existing_mimes; } add_filter( 'mime_types', 'nelio_custom_upload_mimes' );

O, alternativamente, modifique el archivo wp-config.php , agregando la siguiente línea de código:

 define( 'ALLOW_UNFILTERED_UPLOADS', true );

Una vez que haya realizado las modificaciones necesarias, debería poder cargar su imagen. Próximo intento...

Pues parece que tampoco será posible…

En este caso, como se comenta en el foro de WordPress, para algunos la solución ha sido asegurarse de que la biblioteca imagick estaba instalada y reiniciar el servidor. Para otros (como en mi caso), la única forma de cargar la imagen era usar el enlace del cargador del navegador que se encuentra en la parte inferior del panel de carga de imágenes.

Y listo , ¡tengo mi imagen WebP cargada!

Complementos de WordPress para convertir imágenes a WebP

Ya os he hablado del ahorro de espacio y carga de tener las imágenes en este formato WebP. Y el problema surge cuando pensamos en cómo convertir todas las imágenes que ya hemos subido a nuestro servidor. La buena noticia, como la gran mayoría de las veces en WordPress, es que tenemos varios complementos que pueden hacer este trabajo.

Y no sólo esto, algunos de ellos, antes de subir cualquier imagen a tu biblioteca, pueden forzar la conversión de la imagen a WebP, sin que tengas que preocuparte por ello. Algunos de los más conocidos son:

• Optimizador de imágenes EWWW
• WebP Express
• Píxel corto
• imaginar
• Optimol
• WebPConverter para medios

Por último, me gustaría señalar que las principales empresas de alojamiento de WordPress son muy conscientes de la importancia de tener imágenes optimizadas en su sitio web. Por eso, algunos de ellos ya ofrecen plugins propios integrados en sus servidores que se encargan de generar automáticamente las imágenes que subes a la biblioteca de WebP para que siempre estén servidas a los navegadores que las soportan. Este es el caso, por ejemplo, del plugin SG Optimizer de Siteground.

Conclusión

El WebP es rápido, eficiente y está ganando mucho impulso. Seguramente estamos más cerca de lo que pensamos de su adopción masiva en WordPress y navegadores. Nos alegra que WordPress no se quede atrás y que entre todos podamos optimizar el SEO de nuestras webs apoyando el formato de imagen WebP.

Imagen destacada de la marina en Unsplash .