Reading time aprox: 5 minutes, 23 seconds
Usando WebP en WordPress.
En un artículo anterior, te comenté sobre el formato WebP y su «desconocimiento» por parte de WordPress, a la hora de trabajar con él.
Aquí te contaré más sobre este formato y cómo debes usar las imágenes de forma correcta, para que tu bitácora aparezca en todo su esplendor, sea cual sea el navegador de tu cliente.
Usando WebP en WordPress
Si estás leyendo este artículo, seguramente ya sabes que existe este formato de archivo. En todo caso, empezaré por el principio, contándote algo sobre este tema.
Qué es WebP
WebP (pronunciado «weppy» 😉) es un formato gráfico en forma de contenedor, que sustenta tanto compresión con pérdida1 (Lossy compression) como sin ella2 (Lossless compression).
Cómo funciona WebP
El algoritmo de compresión de WebP está basado en la codificación intra-frame del formato VP89 y RIFF como formato contenedor.
Este formato de archivo está basado en la predicción de bloques. Cada bloque se predice a través de los tres bloques superiores y un bloque de la izquierda.
Hay cuatro modos básicos de predicción de bloques: horizontal, vertical, DC (para un solo color) y True Motion. Las transformaciones se llevan a cabo con operaciones aritméticas de punto fijo para evitar errores de redondeo.
La salida de la imagen es comprimida con codificación entrópica. Al igual que el formato «PNG», WebP soporta transparencia en la imagen.
Para entendernos, la imagen resultante ocupa usualmente un 35% de lo que ocupa la misma imagen en formato «JPG».
Usando WebP en WordPress.
¿Quién entiende el formato WebP?
Más concretamente, ¿qué navegadores, de los que puede usar tu visitante, entienden WebP? La respuesta puede condicionar cómo ven tu bitácora (lo que se conoce como experiencia de usuario).
A partir del año 2019, los navegadores considerados modernos, excepto el «Safari» de Apple, reconocen, entienden y usan el formato WebP.
Estoy hablando de que reconocen este formato, de forma nativa, «Opera», «Edge», «Firefox», «Brave» y de forma discreta, a través de Javascript y el estándar «WebM», cualquier otro.
Al ser este formato, un desarrollo de «Google», el navegador «Chrome browser» usa este formato de imagen como integrado, (aunque hay que aclarar que «Chrome» es un producto propietario, mientras el motor de renderizado «Blink» es de código abierto, y es usado por otros navegadores como «Chromium» o «Edge»).
WebP y WordPress
Como ya sabes, «WebP» no es un formato de imagen que WordPress maneje de forma nativa, así que debes recurrir al uso de plugins externos, si quieres usar este tipo de imágenes.
Los plugins que permiten el uso de este formato, ya se hacen cargo de las modificaciones necesarias para que WordPress admita el formato WebP y, hay muchos que comprimen ellos mismos las imágenes en este formato, para evitarte la necesidad de crear una nueva colección (una nueva librería).
WebP Converter
«WebP Converter for Media» es un plugin bastante fácil de usar, una vez instalado no tienes que hacer nada más.
Este plugin es de los que generan una nueva librería, a partir de las imágenes que tienes en tu sitio. Crea un nuevo juego de imágenes en formato comprimido WebP, a partir de los archivos en formato JPG, PN o GIF.
El punto interesante en su funcionamiento, es que las imágenes son servidas de forma dinámica. Las imágnes existentes en formato JPG, no cambian, los enlaces en las páginas no cambian, pero si el plugin detecta que el navegador del visitante soporta el formato WebP, enviará esta copia en su lugar.
Tiene el «inconveniente» de que su funcionamiento está basado en reglas del servidor Apache, lo que hace que no funcione en otros servidores que no tengan el módulo «mod_rewrite»
EWWW Image Optimizer
El plugin «EWWW Image Optimizer» es uno de los más fiables, aunque no sólo realiza una conversión en formato WebP. La nota jocosa es que «EWWW» (pronunciado «iuuuu») es la expresión anglosajona para mostrar disgusto, lo que en español sería: «puajjj» 😉.
Este plugin funciona como un acelerador de tu sitio, ya que ofrece la posibilidad de gestionar tus imágenes (de cualquier formato) de forma comprimida, para rebajar el tiempo de carga.
Trabaja con imágenes de la galería de medios, así como archivos en formato PDF, pero también puede ajustarse para hacer uso de otros directorios del servidor.
Opcionalmente, también es capaz de gestionar la carga diferida de las imágenes, mejorando aún más, el rendimiento de tu sitio (si lo necesitas).
WebP Express
Realmente sencillo, «WebP Express no hce otra cosa que convertir las imágenes de tu galería, al formato WebP.
Su interfaz es avanzada y tiene muchas opciones, de modo que puedes tener bastantes dudas para configurar el funcionamiento tanto de la conversión como de la forma de servir.
Una de las características que hacen interesante este plugin, es que permite seleccionar la forma de comportamiento del «HTML» generado.
Smush
Con el nombre completo de «Smush – Lazy Load Images, Optimize & Compress Images», este plugin es bastante completo.
No solamente es un plugin para la conversión de imágenes a formato WebP, también se hace cargo de la carga diferida de imágenes («Lazy Load»), compresión en diferentes formatos y la oferta de la imagen optimizada para cada juego de navegador/definición que tenga el visitante.
Usando WebP en WordPress.
La forma manual
Como ya es costumbre, no quiero ofrecerte un listado de plugins para realizar una tarea determinada, quiero que sepas que hacen estos plugin y como hacer el trabajo, sin necesidad de recurrir a ellos.
Lo primero que puedes pensar es que necesitarás conocimientos de programación y hacer tu mismo un plugin … Bueno, dejame decirte que aunque no sería tan difícil, no es estrictamente necesario.
Lo primero que hay que saber, es lo que tenemos entre manos, jeje 😊
La imagen de «La Cibeles» en formato JPG, tiene un peso de 284,1 KB.
La imagen de «La Cibeles» en formato webp, tiene un peso de 283,1 KB.
Y lo primero que piensas es: «¿Para qué tanto esfuerzo si me ahorro sólo 1 KB?» La respuesta es que, la compresión de esta imagen tan pequeña (su tamaño es de 641 x 428 píxeles), quizá no merece la pena, pero cuando en tu sitio existen cientos de imágenes y seguramente más grandes…
La imagen en tamaño original de 1000 x 667 píxeles, ocupa 432,1 KB en formato JPG y 94,5 kB en formato webp.
Una vez que la imagen está comprimida en el formato WebP, la cuestión es ¿Cómo la presentamos al cliente?
Cuando se está escribiendo en la bitácora de WordPress, si se pulsa en el botón de «Añadir objeto», se genera un marcado HTML, con la etiqueta <img> (probablemente rodeada de una meta-etiqueta [caption]…[/caption]).
Esta acción nos brinda la posibilidad de añadir una imagen, pero no la de escoger entre varias. Pero, hay una forma de presentar varias posibilidades, de forma que se presente al visitante, la mejor de ellas.
Usando WebP en WordPress.
Para esto, NO hay que programar, pero si hay que retocar el marcado HTML de la bitácora. Si ya disponemos de las imágenes en formato JPG y en formato WebP, presentamos las dos imágenes y, será el navegador del visitante, quien decida cual representa. ¿Sencillo, verdad?
La modificación del marcado es sencilla, te la presento a continuación y luego te daré la explicación:
<picture>
<source type="image/webp" srcset="slwp_cibeles01.webp">
<img src="slwp_cibeles01.jpg" alt="Imagen de La Cibeles">
</picture>
La etiqueta «picture se utiliza cuando quieres mostrar diferentes imágenes en lugar de mostrar diferentes tamaños de la misma imagen. Del mismo modo, también podrías querer mostrar la misma imagen, pero en otros formatos.
Para mostrar diferentes tamaños, hacemos uso de la misma técnica, pero nos valemos de las capacidades CSS de los navegadores:
<picture>
<source media="(min-width: 600w)" srcset="persona-600.jpg" sizes="100vw">
<source media="(min-width: 900w)" srcset="persona-900.jpg" sizes="100vw">
<source media="(min-width: 1200w)" srcset="persona-1200.jpg" sizes="800px">
<img src="persona.jpg" alt="Imagen de una persona">
</picture>
Combinando ambas técnicas, puedes presentar las imágenes que sean mejores para cada uno de los diferentes navegadores de tus visitantes.
Conclusión
Siempre puedes confiar en los plugin externos para realizar esa tarea que te permite mejorar las prestaciones de tu sitio con WordPress.
Ahora ya sabes una forma de acelerar la carga de tu sitio, con imágenes optimizadas. Bien sea de forma manual o con la implementación de plugins, el formato WebP está en tu futuro.
Puedes encontrar muchos plugin que te permiten manejar este formato, en el repositorio oficial de WordPress.
Recuerda, #QuédateEnCasa, #UsaMascarilla, #LavateLasManos, juega, experimenta y, sobre todo, ¡divertirte!
¡Gracias por leernos!
¡Tus comentarios y preguntas nos ayudan a mejorar, por favor comenta!
Algoritmo de compresión con pérdida se refiere a cualquier procedimiento de codificación que tenga como objetivo representar cierta cantidad de información utilizando una menor cantidad de la misma, siendo imposible una reconstrucción exacta de los datos originales. Esto es porque, en lugar de guardar una copia exacta, solo se guarda una aproximación. Esta aproximación se aprovecha de las limitaciones de la percepción humana para esconder la distorsión introducida. ↩
Se denomina algoritmo de compresión sin pérdida a cualquier procedimiento de codificación que tenga como objetivo representar cierta cantidad de información utilizando u ocupando un espacio menor, siendo posible una reconstrucción exacta de los datos originales. ↩