Por Marcel Pazos
Cómo usar imágenes webp en Wordpress
Queridos lectores como sabrán la velocidad de carga es uno de los factores más importantes a la hora de posicionar un sitio, y resulta que estoy desarrollando un sitio web para una empresa de embutidos en Guayaquil, La Serdenya y queriamos mejorar la velocidad de carga, es por esto que hemos decidido en este sitio manejar las imágenes en formato WEBP por lo que decidí escribir este artículo al respecto.
¿Qué es WebP?
Los sitios web se están adaptando hoy para servir mejor su contenido, y de esta necesidad nació WebP, un formato de archivo desarrollado por Google en 2010 que proporciona una mayor compresión de imágenes, reduciendo su tamaño pero conservando su calidad.
Por ejemplo, tienes formatos de imagen como JPEG o JPG y PNG, ¿verdad? WebP es un formato de archivo de imagen alternativo. WebP se enfoca en servir los mismos archivos de imagen, solo que en un tamaño de archivo más pequeño. Al reducir el tamaño de sus archivos de imagen, aún puede brindar la misma experiencia a los visitantes de su sitio, pero su sitio se cargará más rápido.
Por ejemplo, en el estudio de compresión WebP de Google, Google encontró que un archivo de imagen WebP era en promedio.:
- 25-34% más pequeño que las imágenes JPEG comparables.
- 26% más pequeño que las imágenes PNG comparables.
Entonces, si está ejecutando un sitio web usando PageSpeed Insights, una de las muchas recomendaciones es mostrar imágenes en formatos de próxima generación como WebP.
¿Cuáles son las ventajas de WebP?
Una de las mayores ventajas es que puede obtener tamaños de imagen más pequeños, lo que hace que su sitio web se cargue más rápido. Pero cuando queremos usar WordPress para proporcionar imágenes de este tipo de formato en nuestro sitio, uno de los mayores desafíos que enfrentamos es que el CM actual no lo admite.
Esto significa que no podemos cargar imágenes en este formato a la biblioteca de medios, pero tenemos varios plugin que nos ayudan a esta misión, los mismos que trataremos más adelante al igual que el paso a paso como configurarlo.
¿Qué navegador web admite WebP?
Para que las imágenes WebP funcionen, el navegador del visitante debe admitirlas. Desafortunadamente, aunque la compatibilidad con los navegadores ha crecido mucho, la compatibilidad con WebP aún no es universal. Los navegadores populares admiten imágenes WebP, como:
- Chrome (PC y móvil).
- Firefox (para escritorio y móvil). borde.
- Opera (ordenador y móvil).
Safari, al momento de escribir este artículo, ni la versión de escritorio ni la versión móvil admiten imágenes WebP.
Internet Explorer también carece de soporte para WebP (pero Edge sí porque está basado en Chrome). En general, alrededor del 77% de los usuarios de Internet utilizan un navegador habilitado para WebP. Entonces, si bien la mayoría de las personas definitivamente está a favor, el 23% es demasiado grande para ignorarlo.
Soluciones para implementar WEBP en tu Wordpress hay varios plugins:
El que yo he probado y te voy a explicar su configuración paso a paso es WebP Express:
- Añade un nuevo plugin en tu wordpress, busca el "Webp Express", instalaló y activaló.
- Ingresa a la configuración del plugin. Ahora toca comenzar a configurar cada opción.
- En Operation Mode: colocamos CDN friendly.
- En Scope: Selecciona si deseas comprimir todos los archivos de imagen, uploads (los que has subido), los del theme (plantilla), en mi caso seleccione uploads unicamente.
- En Image types to work on: seleccionas el tipo de imagen que vas a convertir jpg, png, etc. yo escogí todas.
- En Destination folder: 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 carga. Otras imágenes, como las imágenes del tema, se almacenan por separado. Si está utilizando WebP Express junto con Cache enabler o Shortpixel, elija esta opción. In separte folder, 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. Yo escogí Mingled.
- File extension: Hay que dejarlo por default como .webp que es la extensión que tendran los archivos.
- 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 denominada "caché raíz").
- .htaccess rules for webp generation: En esta opción deberás ponerle un check a las 2 primeras opcioens, Enable direct redirection to existing converted images?, Enable redirection to converter? . La 3er opción ,Create webp files upon request?, agregará líneas en el .htaccess que redirigirá las solicitudes de archivos webp no existentes al script del convertidor (webp-realizer.php). De esta manera, puede hacer referencia a webps antes de que realmente existan. Yo solo seleccione las 2 primeras opciones.
- En conversión JPG y PNG dejas como viene por default.
- En la opción Metada: copy all metadata para que se copien junto con las imágenes.
- En Conversion method pones en orden los formatos de conversión. En mi caso puse primero cwebp.
- En Alter HTML?, habilitas esta opción. Esto hará que se Modifique HTML para usar la sintaxis de etiquetas de imagen para apuntar a versiones webp o apuntar directamente a webps.
- Finalmente das clic en la opción de Bulk Convert.
- Terminado el proceso obtendrás unos resultados como este. de la optmización de tus imagenes a formato Webp.
Espero que este tutorial te sirva para implementar la carga de imagenes WEBP en tu sitio web desarrollado en Wordpress, con lo cual ganaras no solo en tiempo de carga más rápido sino una experiencia de usuario más amigable por tanto más visitas.
![Generador de enlace personalizado de Whatsapp [Herramienta Gratis]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdi0H7wcZaWRBjfCDv_IiD5K3l8yi5xg_mfmLZGv0L5P5FeY-CCZuwAg3p6l46XNOa9rUFHvtJD0TFWvJJaU5L_T8yzEfZIhDF59LpZBOemPUJagM3EumaDxka0t72OzBkjin_qvQwW8ReEapANU2E56nol2vFuDH50NgZJjFd-nP-0UEofHtNWXlD6g/s1920/Generador%20de%20enlace%20personalizado%20de%20Whatsapp%20%5BHerramienta%20Gratis%5D.jpg)
![Colocar el TRADUCTOR DE GOOGLE [GOOGLE TRANSLATE] en HTML](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1lBBpSI0UCp90qslb6iJLNwWzvxd7rA6s0qMVok6c-u5mntPzJ4fMKRKLzgvyuFgAOKXOTtzt2XhXZPb1voB9uhNCAgqfaJTrkUl_LZ-c3jGgnW1KQ2rCy0HsFzfWcNa8a9Tv9idAngwf6UkNYxAY7Eu3QBxFcWqsW0G6lfLJaitEPxrJ_QtHu7TRrQ/s1920/C%C3%93MO%20PONER%20EL%20TRADUCTOR%20DE%20GOOGLE.jpg)
