Usar imágenes Webp en WordPress

por | Mar 25, 2021 | Aprender WordPress

Usar imágenes Webp en WordPress

Con los recientes y constantes avances tecnológicos y nuevos móviles que no paran de sorprendernos cada día se hace indispensable ofrecer una experiencia de usuario que permita navegar en nuestro sitio web de forma rápida, esto nos hace pensar que necesitamos cada día ofrecer contenido de mejor calidad y eficiencia en nuestro sitio web.

Y una de las partes fundamentales es que a la hora de que el usuario acceda a tu página, las imágenes carguen muy rápido.

En este artículo te mostraremos otro método para optimizar imágenes en WordPress y que tu web cargue como un rayo.

  Ten en cuenta que si usas el formato Webp en tu web, es posible que puedas encontrarte con algunos problemas en navegadores de dispositivos móviles que ya no se actualicen por X motivo.

Aquí encontrarás información sobre los navegadores que aceptan imágenes con el formato Webp

Además, el plugin de optimizador.io no soporta dicha optimización de formato por el momento.

 

¿Que es WebP?

Hoy en día los sitios web se adaptan para ofrecer mejor sus contenidos, y por esta necesidad nace WebP, un formato de archivo desarrollado por Google en 2010 que permite proporcionar una tasa de compresión más alta para las imágenes logrando que se reduzca el tamaño de estas, pero manteniendo la calidad de las mismas.

 

¿Cuáles son las ventajas de WebP?

Una de las principales ventajas es que, se obtiene un tamaño de imágenes más reducidos logrando que tu sitio web cargue mucho más rápido.

Sin embargo, uno de los principales retos a los que nos enfrentamos cuando deseamos servir imágenes en este tipo de formatos en nuestro sitio web con WordPress, es que actualmente este CMS no lo soporta.

Esto significa que no podemos comenzar a subir imágenes en este formato en nuestro biblioteca de medios, pero tenemos un súper héroe que viene a ayudarnos a que podamos usarlas 😀

Actualmente tenemos diferentes complementos que nos permiten convertir nuestras imágenes en formato WebP y servir este formato en nuestro sitio web, uno de los más usados y que yo recomiendo es el plugin WebP Express.

Webp Express Plugin

Este plugin utiliza la biblioteca WebP Convert para convertir imágenes en formato WebP, logrando de esta forma que las imágenes desde tu biblioteca de medios se sirvan en este formato.

 

¿Cómo instalar y configurar el plugin WebP Express?

Instalar el complemento es muy sencillo, solo tenemos que ir al apartado Plugins -> Añadir nuevo

instalar Webp Plugin

Una vez en esta sección solo hacer falta buscar dentro del buscador WebP Express y pulsar Instalar Ahora.

Instalar Webp Plugin

Una vez instalado accedemos a la administración del plugin y vemos las opciones de configuración.

Settings Webp Plugin

  • Scope: Permite seleccionar que carpeta o contenido se convertirá por el plugin.
  • Images type to work on: Seleccione con cuales imagines el plugin funcionara.
  • Destination folder:
    • Mingled: Cuando se selecciona «Mingled«, las imágenes Webp se colocarán en la misma carpeta que el original, pero solo para las imágenes en la carpeta de uploads. Otras imágenes, como las imágenes de temas, se almacenan por separado.

      Si está utilizando WebP Express junto con el habilitador de caché o Shortpixel, elija esta opción.

    • En carpeta separada: Las imágenes se almacenan en una carpeta separada (wp-content / webp-express / webp-images / doc-root).

      Nota: Cambiar esta opción hará que las imágenes webp existentes se muevan.

  • Destination structure: Esta configuración determina cómo se estructuran los archivos convertidos dentro de la carpeta que utiliza WebP Express para almacenar imágenes webp (de aquí en adelante llamada » raíz de la caché»)
  • Reglas .htaccess para la generación de WebP

    Por lo general, en este modo de operación, habilitaría las dos primeras opciones, lo que efectivamente habilita las respuestas de imagen variadas (de modo que una solicitud de un jpeg / png resultará en un webp en los navegadores que admiten webp).

    La primera opción hace que esto suceda para las imágenes que ya están convertidas.

    La segunda opción lo hace posible incluso para imágenes que aún no se han convertido, al redirigir la solicitud al convertidor, que convierte, guarda y entrega.

    La tercera opción solo es relevante si está utilizando Alter HTML además de ofrecer respuestas de imágenes variadas.

  • Conversion

    • Jpeg options: La configuración de «jpeg» se aplica cuando la imagen que se convierte es un jpeg.
    • PNG options: La configuración «png» se aplica cuando la imagen que se convierte es un png.
  • Metadata: Decida qué hacer con los metadatos de la imagen, como Exif.

    Tenga en cuenta que esta configuración no es compatible con el método de conversión «Gd», ya que no es posible copiar los metadatos con la extensión Gd. Imagickbinary también carece de soporte actualmente.

  • Conversion method: Arrastre para reordenar. Primero se probará el método de conversión en la parte superior. Si falla, se utilizará el siguiente, puedes leer más información sobre los métodos de conversión en el siguiente enlace –> The WebP converters.
  • Convert on upload: Convierta las imágenes en el momento en que se hayan cargado a través de la biblioteca multimedia.
  • Alter HTML: Al habilitar esto, se altera el código HTML de modo que las imágenes WebP se sirven a los navegadores que admiten WebP.

    Se recomienda habilitar esto incluso cuando la redirección también está habilitada, por lo que las respuestas de imágenes variadas solo se usan para aquellas imágenes que no se pueden reemplazar en HTML.

    Las respuestas variadas generalmente conducen a un almacenamiento en caché más deficiente en proxies y CDN. Y si los usuarios descargan esas imágenes, tendrán la extensión jpg / png, aunque sean WebP.

 

¿Como podemos identificar que el plugin esta funcionando?

Si ya tenemos archivos añadidos en nuestra biblioteca de medios, desde los ajustes del plugin podemos pulsar en la opción de Conversión masiva.

Funcionamiento Webp Plugin

Al hacerlo aparecerá un mensaje indicando esta realizar una búsqueda de los archivos a convertir, mostrando el resultado de todos las imágenes que se encuentran añadidas.

Archivos Webp Plugin

Solo debes pulsar iniciar conversión y el plugin comenzará a hacer su trabajo.

Conversión Webp Plugin

A medida que el plugin procese y convierta las imágenes podrás ver el resultado con la nueva imagen convertida.

Debes tener en cuenta que este proceso suele demorar un poco dependiendo de la cantidad de imágenes añadidas en tu sitio web así como cada una de las miniaturas que se generan dentro de WordPress.

Imágenes Webp Plugin

Una vez los archivos se han convertidos podemos verificar dentro de nuestro sitio web si esta funcionando, si inspeccionamos el código de nuestro sitio web veremos que ahora las imágenes están servidas en formato WebP.

Verificar Webp Plugin

Verificación Webp Plugin

 

¿Qué sucede si subimos una nueva imagen?

En este caso el sistema se encarga de realizar la conversión de forma automática y servir la imagen en formato WebP.

Subir nueva imagen Webp Plugin

 

¿Qué sucede si no podemos convertir las imágenes y servirlas en formato Webp?

Es posible que cuando tengamos configurado nuestro plugin aún no veamos las imágenes servidas en el nuevo formato,
¿Cómo podemos solucionar este error y servir las imágenes de forma adecuada?
Para ello podemos ver que dentro de las opciones de FQAs del desarrollador nos envían indicaciones como:
WebP Express funciona bien en NGINX, sin embargo, la interfaz de usuario aún no está optimizada para NGINX. Y, por supuesto, NGINX no procesa los archivos .htaccess que genera WebP Express.
WebP Express se puede usar sin redireccionamiento, ya que puede alterar HTML para usar etiquetas de imagen que enlazan con la alternativa webp.
La opción sencilla para solucionar esto es activar la opción “CDN Friendly” en las opciones del Modo de operación del plugin “Operation mode”

Luego de ello pulsa en la opción “Bulk convert” ten en cuenta tener activa la opción de “Convert on upload”

Por ultimo activa la opción “Alter HTML” el cual se encarga de entregar webp a los navegadores habilitados para webp mientras sigue entregando el jpeg / png original a los navegadores que no admiten webp.

Conclusiones:

Como podemos ver, activar la opción del formato WebP en nuestro sitio web nos permitirá ayudar a tener imágenes de menor tamaño y mejor calidad ayudándonos de este modo que nuestro sitio web cargue más rápido y ofrecer una experiencia de usuario muchos más gratificante.

Pero recuerda que hay otros elementos que ayudarán a optimizar tus imágenes, por eso te dejamos esta guía seo en imágenes que te puede servir.

 

Hosting WPFácil