Cómo usar archivos WebP en WordPress

La mayoría de nosotros ya sabemos que la optimización de imágenes es muy importante, ya que juega un papel muy importante en los tiempos de carga total de su sitio web de WordPress. Hoy queremos compartir contigo una alternativa fácil sobre cómo integrar los archivos WebP de Google en tu sitio de WordPress. ¡Algunos usuarios han visto reducciones de tamaño de archivo de imagen de más del 70%!

¿Qué es WebP?

Si no está familiarizado con WebP, es un formato de archivo de imagen creado por el equipo de rendimiento web de Google con la intención de crear imágenes más pequeñas y rápidas. Se anunció por primera vez en 2010 y presenta métodos de compresión con y sin pérdida. Las imágenes se envían al navegador web desde un servidor web basado en el tipo MIME que utiliza, que es image / webp.

Las imágenes WebP sin pérdida son un 26% más pequeñas en comparación con las PNG y las imágenes WebP con pérdida son entre un 25% y un 34% más pequeñas que las JPEG.

Empresas como YouTube y eBay ya están utilizando WebP para impulsar silenciosamente muchos de sus sitios. A continuación se muestra un ejemplo de eBay, donde en su página de inicio promedian unos 30 archivos WebP.

uso de webp ebay

¿Por qué es tan importante WebP? De acuerdo con httparchive, a agosto de 2016, las imágenes representan más del 64% del peso promedio de una página web. Por lo general, es más que CSS, JS y HTML combinados. Por lo tanto, elegir un método de optimización de imagen robusto y un formato de imagen como WebP es crucial para que pueda disminuir el peso de su página tanto como sea posible. Generalmente, cuanto más pequeña sea su página, más rápido se cargará. Y eso complacerá no solo a sus visitantes, sino también a Google, ya que la velocidad de la página es un factor de clasificación.

Soporte WebP

Ahora, si bien WebP es muy interesante, también es importante mencionar la compatibilidad con el navegador. No todos los navegadores modernos son compatibles con WebP en este momento. Según caniuse, WebP actualmente es compatible con Chrome 23+, Opera 39+, todas las versiones de Opera mini, el navegador Android 4.3+ y Chrome para Android.

soporte del navegador webp

¡Pero espera! No te decepciones demasiado, porque en el tutorial que te mostraremos a continuación, hay un método para entregar archivos WebP a navegadores compatibles y JPG / PNG como respaldo. Esto significa que los navegadores no compatibles no verán una imagen rota, solo verán lo que estaban viendo antes. Piense en WebP como una adición a su sitio de WordPress, en lugar de una migración.

Según W3Schools, Chrome tiene el monopolio de la cuota de mercado de los navegadores en un poco más del 70%. Pero no solo tome la participación de mercado como una prueba sólida, mire los datos de sus propios visitantes y vea qué navegadores están usando, ya que pueden diferir según su nicho. Sin embargo, es posible que se sorprenda de lo sesgadas que están las estadísticas. En Google Analytics, en “Audiencia”, puede hacer clic en “Navegador y sistema operativo” y ver qué navegadores utilizan las personas cuando llegan a su sitio. Sacamos un sitio web aleatorio y, como puede ver a continuación, el 67% de los visitantes son de Chrome y otro 1% de Opera. Entonces El 68% de estas personas pueden ver y beneficiarse de WebP formato de archivo de imagen!

navegadores chrome webp

Cómo usar archivos WebP en WordPress

En el ejemplo de hoy, vamos a utilizar una combinación de dos complementos de WordPress diferentes para que WebP esté en funcionamiento en WordPress. Estos son creados y desarrollados por el equipo de KeyCDN, que es una red global de entrega de contenido (CDN).

  1. [premium] Optimus Image Optimizer: complemento de compresión de imágenes sin pérdida para WordPress, convierte imágenes a WebP
  2. [free] Habilitador de caché de WordPress: complemento de almacenamiento en caché que le permite servir WebP a navegadores compatibles

Optimizador de imagen Optimus

Puede descargar Optimus Image Optimizer desde el repositorio de WordPress, desde optimus.io o desde el panel de control de su complemento. Nota: Requiere una licencia premium si desea convertir sus imágenes a WebP. Una vez instalado, puede habilitar la “Creación de archivos WebP” en la configuración del complemento.

creación de archivos webp

Una vez que se habilita WebP, esto esencialmente crea una imagen adicional para todo lo que se convierte. Entonces, si carga un archivo PNG o JPG, ahora también hay una versión .webp de su imagen. Recuerde, el PNG / JPG todavía es necesario porque todavía se utilizan para servir a navegadores no compatibles. Optimus realiza una compresión sin pérdidas, por lo que sus PNG y JPG también están comprimidos.

archivos webp y png

También hay una opción de optimización masiva en caso de que ya haya comprimido sus imágenes antes y aún necesite convertirlas a WebP.

optimizador de imagen masiva

Habilitador de caché de WordPress

Entonces, ahora que tiene imágenes WebP, necesita una forma de decirle a WordPress que entregue imágenes WebP a los navegadores compatibles y PNG / JPG a los otros navegadores. Esto se puede lograr con el complemento gratuito WordPress Cache Enabler. Puede descargar el complemento desde el repositorio de WordPress o instalarlo desde el panel de control de su complemento. Una vez instalado, puede habilitar “Crear una versión adicional en caché de WebP” en la configuración del complemento.

configuración del habilitador de caché

Una vez que habilita esa opción, se crea una versión WebP adicional almacenada en caché de su página.versiones webp

¡Y eso es todo! Ahora debería tener archivos WebP ejecutándose en su sitio web de WordPress.

Comparación de JPG a WebP

Realizamos una comparación de JPG con WebP para mostrar las diferencias que puede lograr.

NOMBRE DEL ARCHIVO JPG ORIGINAL JPG COMPRIMIDO FORMATO WEBP DIFERENCIA DE TAMAÑO%
jpg-a-webp-1.jpg 758 KB 685 KB 109 KB 86%
jpg-a-webp-2.jpg 599 KB 529 KB 58.8 KB 90%
jpg-a-webp-3.jpg 960 KB 881 KB 200 KB 79%
jpg-a-webp-4.jpg 862 KB 791 KB 146 KB 83%
jpg-a-webp-5.jpg 960 KB 877 KB 71,7 KB 93%

WebP resultó en un Disminución del 85,87% en el tamaño medio de la imagen.

Comparación de PNG a WebP

Nuevamente, también realizamos una comparación de PNG con WebP para mostrar las diferencias que puede lograr.

Nombre del archivo PNG original PNG comprimido Formato WebP Diferencia de tamaño%
png-to-webp-1.png 44 KB 34 KB 30 KB 32%
png-to-webp-2.png 46 KB 35 KB 33 KB 28%
png-to-webp-3.png 43 KB 31 KB 25 KB 42%
png-a-webp-4.png 30 KB 24 KB 18 KB 40%
png-to-webp-5.png 15 KB 11 KB 8 KB 47%
png-a-webp-6.png 34 KB 24 KB 18 KB 47%
png-to-webp-7.png 15 KB 13 KB 8 KB 47%
png-to-webp-8.png 63 KB 47 KB 44 KB 30%
png-to-webp-9.png 48 KB 36 KB 33 KB 31%
png-to-webp-10.png 17 KB 14 KB 11 KB 35%
png-to-webp-11.png 18 KB 13 KB 9 KB 50%
png-to-webp-12.png 61 KB 45 KB 39 KB 36%
png-a-webp-13.png 32 KB 25 KB 21 KB 35%
png-to-webp-14.png 26 KB 21 KB 17 KB 35%
png-to-webp-15.png 14 KB 12 KB 9 KB 36%
png-to-webp-16.png 36 KB 27 KB 24 KB 33%
png-to-webp-17.png 14 KB 12 KB 8 KB 43%
png-a-webp-18.png 21 KB 18 KB 13 KB 38%
png-to-webp-19.png 42 KB 30 KB 27 KB 36%
png-a-webp-20.png 23 KB 20 KB 18 KB 22%

WebP resultó en un 42,8% de disminución en el tamaño medio de la imagen.

Resumen

Como puede ver, WebP es muy fácil de implementar en su sitio de WordPress y puede lograr tamaños de archivo de imagen drásticamente más pequeños. No existe una compresión de imágenes que se pueda comparar con los ahorros de WebP. Ah, ¿y mencionamos que WebP tiene la capacidad de usar compresión sin pérdidas? Eso significa que no verá ninguna pérdida de calidad notable. Si está buscando una mejor manera de acelerar WordPress, WebP puede ser una gran solución.