Emplear WebP en WordPress implica transformar las imágenes JPEG, PNG o GIF a dicho formato y entregarlas únicamente a los navegadores que lo admiten. Resulta necesario porque Google PageSpeed y Core Web Vitals lo penalizan, si bien en bastantes ocasiones no logre mejorar la compresión. Se soluciona con plugins como Imagify (sencillo), WebP Express (gratuito y más complejo) o EWWW Image Optimizer.
Cuando Google adquirió On2 Technologies y nos dio a conocer WebP, ya se intuía que era un formato de imagen que había llegado para quedarse.
La posición de mercado de Google les permite introducir ciertos «estándares» y forzar a los usuarios a usarlos, aunque realmente no supongan una mejora.
Y justamente ese es el caso del formato de imagen WebP, puesto que en realidad en la mayoría de las situaciones no supone una mejora frente a PNG o JPEG, debido a que no se dan las circunstancias.
Un ejemplo de esto es que el sistema de optimización de imágenes Polish de CloudFlare solo realiza la conversión a WebP cuando de verdad supone una mejora, aunque solo sea de 0,1 byte, aunque esto a Google (PageSpeed y Core Web Vitals) no le gusta demasiado.
Así que suponiendo que queramos cumplir al 100% con Google PageSpeed y Core Web Vitals, puede que incluso lleguemos a ralentizar nuestro sitio web.
Por eso digo que Google introdujo el formato WebP con calzador y forzando, pese a que no supone una mejora, pudiendo incluso ser un lastre en algunos casos.
Ventajas del formato de imagen WebP
En el párrafo de arriba he llegado a hablar mal de WebP, pero no todo son desventajas. El formato WebP tiene algunas ventajas al ser utilizado en un sitio web o en cualquier imagen subida a Internet y cargada por un navegador web.
- Carga progresiva: Esto es útil para imágenes muy grandes. Las imágenes WebP pueden cargar de forma progresiva para optimizar los tiempos de carga, de forma similar al Lazy Load, pero integrado en la imagen. No se nota excepto si hablamos de imágenes de más de 3000×3000.
- Imágenes animadas: Las imágenes WebP pueden ser animadas, como los GIF. Hoy por hoy, nadie usa esta función de WebP y se siguen utilizando los GIF.
- Transparencias: WebP permite transparencias, como el formato PNG.
- Compresión sin pérdida: Una de las cosas que «vende» Google para WebP es que permite compresión sin pérdida con tasas de compresión mejores que otros formatos de imagen. Pero la realidad es que en la práctica esto no es exactamente así.
- Resolución máxima de 16383 x 16383: Una resolución máxima bastante alta si lo comparamos con otros formatos de imagen. Normalmente, estos tamaños se utilizan en mapas o imágenes sacadas de cámaras y este formato, hasta donde yo sé, no está soportado por ninguna cámara profesional.
Podemos definir al formato WebP como una mezcla de las transparencias y la calidad de PNG, la compresión de JPEG y las animaciones de GIF, añadiendo además la carga progresiva.
Parece interesante, ¿no? Pues el tema es que en muchos casos no consigue una compresión superior a PNG sin perder calidad.
No es un formato mal pensado y tampoco es malo, pero creo que obligar a todos los webmasters a convertir y servir las imágenes en WebP para tener una buena puntuación en Google PageSpeed o en Core Web Vitals es algo fuera de lugar.
Desventajas del formato de imagen WebP
Realmente existen dos desventajas; sin embargo, una se irá solucionando con el paso de los años.
La primera desventaja es precisamente lo que comentábamos en la última línea de la sección anterior, ya que en muchos casos no vamos a conseguir la tasa de compresión buscada.
La segunda desventaja, y que con los años se solucionará, es que aún hay mucha gente utilizando navegadores web que por la versión utilizada no son compatibles con el formato de imágenes WebP. Eso hace que los webmasters debamos adaptarnos a las circunstancias.
Hoy por hoy, todos los navegadores web han implementado la compatibilidad con imágenes WebP:
Pero como dije anteriormente, mucha gente sigue utilizando versiones antiguas.
Es raro encontrarse un Google Chrome o similar (cualquier navegador web basado en Chromium) sin compatibilidad con WebP. Sin embargo, otros navegadores web, como Mozilla Firefox, sí que es común encontrárselos desactualizados.
De hecho, el último navegador que se hizo compatible fue Safari de Apple, y eso que al principio parecía que Safari nunca iba a ser compatible con el formato WebP.
Como he comentado arriba, no es un mal formato y tampoco tiene grandes desventajas que sean difícil es de solucionar. Es un formato «all in one» que puede ser una gran apuesta de futuro, pero no desde el punto de vista del WPO.
Convertir cualquier imagen a WebP
Existen conversores online para convertir cualquier formato de imagen a WebP, aunque en este caso vamos a hablar de cómo convertir archivos de imagen a WebP al subirlos a nuestro sitio web WordPress.
Si TODO el mundo tuviera un navegador compatible con WebP, podríamos subir directamente las imágenes en WebP a nuestro WordPress.
Además, la mayoría de las imágenes que nos encontramos en Internet son en JPEG o PNG, e incluso animaciones en GIF. Por esta razón, en la mayoría de los casos, si queremos tener un archivo WebP, vamos a tener que convertirlas.
¿Buscas un conversor online? Aquí te dejo algunos:
Lo gracioso es que, buscando en Google en español, se encuentran más conversores de WebP a otros formatos que de otros formatos a WebP.
Convertir a WebP en WordPress
Existen muchísimos plugins para convertir imágenes a WebP al subirlas a la galería de nuestro WordPress. No obstante, para elegir plugin no solo debemos mirar que pueda convertir, sino también servir de forma condicional esas imágenes.
¿Quieres un plugin para convertir imágenes a WebP? Pues te voy a hablar de varios plugins para WordPress que convierten y sirven imágenes en WebP.
Imagify para convertir y servir en WebP
Lo pongo el primero porque es el que yo utilizo. Un plugin de los creadores de WPRocket que tiene un buen algoritmo de compresión, pero que también permite convertir y servidor WebP.
Imagify tiene la opción de convertir todas las imágenes subidas a WordPress y nos ofrece dos posibilidades para servirlas condicionalmente: mediante rewrites en el .htaccess o mediante etiquetas <picture>.
Además, como puedes ver en la captura anterior, tendremos un botón llamado «Generar las versiones WebP que faltan» para forzar a Imagify a generar las imágenes que no tengan su archivo WebP correspondiente.
Si tengo que destacar algo de Imagify desde el punto de vista de WebP, es que es muy fácil de configurar y casi no requiere conocimientos, como ocurre con otras alternativas.
Además, aunque Imagify es de pago, en la mayoría de los casos la cuota gratuita nos bastará para hacer la conversión a WebP si sabemos cómo.
Puedes encontrar más información sobre Imagify aquí: https://imagify.io/
El plugin está disponible sin coste en el repositorio oficial de WordPress: https://es.wordpress.org/plugins/imagify/
WebP Express para convertir y servir en WebP
Otra opción, si bien en este caso completamente gratuita, es WebP Express.
El plugin WebP Express se puede localizar en el repositorio oficial de WordPress.
WebP Express resulta bastante más complejo que Imagify y, para quienes se inician, puede no ser la elección adecuada.
Durante estos años, he aconsejado con frecuencia WebP Express a usuarios que no querían pagar por Imagify, aunque contaban con un sitio web de gran tamaño o requerimientos particulares en cuanto a las imágenes.
No obstante, también me he topado con numerosos usuarios que han tenido problemas con el plugin WebP Express, pues suele presentar dificultades según la configuración del servidor web en el que se ejecute.
WebP Express es mucho más configurable y flexible que otras alternativas, pero eso mismo provoca que no sea apto para todo tipo de públicos.
Si deseas ampliar la información sobre el plugin WebP Express, la hallarás en su ficha del repositorio oficial: https://es.wordpress.org/plugins/webp-express/
EWWW Image Optimizer para convertir y servir en WebP
Años atrás empleaba EWWW Image Optimizer para optimizar y comprimir las imágenes en mi WordPress. No obstante, dejé de usarlo debido a que su algoritmo de compresión en las versiones gratuitas no es el más adecuado.
Sin embargo, en lo referente a WebP lo he vuelto a examinar, ya que he comprobado que muchos alumnos y clientes míos lo utilizan para convertir y servir imágenes en WebP.
Al habilitar la opción «Conversión WebP», aparecerán de forma automática las opciones para servir correctamente WebP.
Mientras que Imagify permitía escoger entre emplear los rewrites del .htaccess y la etiqueta <picture>, EWWW Image Optimizer posibilita usar Javascript o la etiqueta <picture> para servir WebP de manera condicional.
Aunque EWWW Image Optimizer cuenta con menos opciones que WebP Express, considero que es una alternativa muy válida para no complicarse.
Si quieres ampliar la información sobre EWWW Image Optimizer, la encontrarás en el repositorio oficial de WordPress: https://es.wordpress.org/plugins/ewww-image-optimizer/
Servir imágenes WebP al vuelo en WordPress
Hasta este punto hemos tratado plugins que permitían convertir y servir, pero existen algunos plugins (de los que no soy muy partidario) que posibilitan convertir y servir al vuelo imágenes WebP en WordPress.
Esta forma de servir imágenes convertidas al vuelo puede resultar algo más lenta mientras las imágenes convertidas no se almacenen en caché.
Uno de mis preferidos para lograrlo es Flying Images, un plugin gratuito que se puede hallar en el repositorio oficial.
Como se puede observar, el plugin no dispone de opciones: basta con activarlo para que la parte de WebP empiece a funcionar.
Este plugin posibilita muchas otras acciones con las imágenes, pero en este artículo nos centraremos en WebP.
Si necesitas ampliar la información sobre Flying Images, la encontrarás aquí: https://wordpress.org/plugins/nazy-load/
Subir imágenes en WebP a WordPress
A partir de la versión 5.8 de WordPress ya no hay que hacer «malabares» para subir los archivos WebP, dado que la galería multimedia de WordPress los admite.
En la actualidad, basta con arrastrar y soltar un archivo WebP en la galería para que se suba. El inconveniente surgirá si servimos esa imagen a un visitante cuyo navegador web use una versión que todavía no es compatible con WebP, ya que no podrá ver la imagen al no reconocer el tipo de archivo.
Preguntas Frecuentes
¿WordPress acepta imágenes WebP de forma nativa?
Sí, desde la versión 5.8 puedes subir archivos WebP al medio y usarlos como cualquier JPG o PNG. Antes de esa versión el sistema los rechazaba. El matiz: aceptarlos no implica que tu servidor los entregue de forma optimizada; para eso necesitas un plugin o configurar el CDN.
¿WebP es mejor que JPEG en calidad y peso?
En términos generales sí, sobre todo en peso: un WebP suele ocupar entre un 25% y un 35% menos que un JPEG con calidad visual similar. La ventaja se nota más en imágenes pequeñas o con transparencias. El matiz: en fotos con mucho detalle y compresión agresiva, el JPEG puede igualar o superar al WebP.
¿Por qué hay gente que no le gusta el formato WebP?
La queja más común es la compatibilidad: programas de diseño, visores de imágenes y algunos flujos de trabajo antiguos no lo abren bien. También molesta que no permita edición no destructiva como el RAW. El matiz: en la web la adopción es amplia; el rechazo se concentra en el uso fuera del navegador.
