Cómo usar archivos webp en WordPress

La mayoría de nosotros sabemos hasta ahora que la optimización de imágenes es muy importante, porque juegan un papel muy importante durante el tiempo de carga total de su sitio de WordPress. Hoy queremos compartir una alternativa fácil sobre cómo integrar los archivos de Google WebP en su sitio de WordPress. ¡Algunos usuarios han visto descuentos más del 70% del tamaño del archivo de imagen! ¿Qué es WebP? Si no está familiarizado con WebP, este es un 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 ambos métodos de compresión de pérdidas, así como métodos de compresión sin pérdida. Las imágenes se entregan al navegador web en un servidor web en función del tipo MIME que utiliza, que es Image/WebP.
Las imágenes de Webless son un tamaño 26% más pequeño en comparación con los PNG, y las pérdidas de WebP son 25-34% más pequeñas que los JPEG. Empresas como YouTube y eBay ya están utilizando WebP para silenciar a muchos de sus sitios. A continuación se muestra un ejemplo de eBay, donde unos 30 archivos webp median en su página inicial.

¿Por qué es tan importante la webp? Según HttParchive, desde 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 robusto de optimización de imágenes y formato de imagen, como WebP, es crucial, por lo que puede reducir el peso de la página tanto como sea posible. En general, cuanto más pequeña sea su página, más rápido se cargará. Y esto agradecerá no solo a sus visitantes, sino también a Google, porque la velocidad de la página es un factor de clasificación. Soporte de WebP ahora, aunque WebP es muy interesante, es importante mencionar el soporte del navegador. Actualmente, no todos los navegadores modernos aceptan WebP. Según Canius, WebP se acepta actualmente en Chrome 23+, Opera 39+, todas las versiones de Mini Opera, Android 4.3+ Browser y Android.
¡Pero espera! No se decepcione demasiado, porque en el tutorial mostraremos a continuación, hay un método de entrega de los archivos WebP a los navegadores aceptados y JPG / PNGS como reserva. Esto significa que los navegadores no aceptados no verán una imagen rota, sino que solo verán lo que vieron antes. Piense en WebP como un suplemento para su sitio de WordPress en lugar de una migración.

Según W3Schools, Chrome tiene un monopolio del mercado de los navegadores con poco más del 70%. Pero no solo tome la cuota de mercado como una prueba sólida, mire a sus propios visitantes y vea qué están utilizando los navegadores, ya que podrían diferir dependiendo de su nicho, puede sorprenderse de cuán inclinadas son las estadísticas. En Google Analytics, bajo la “audiencia”, puede hacer clic en “Browser y sistema operativo” y ver qué navegadores usan personas al acceder a su sitio. Creamos un sitio aleatorio y, como puede ver a continuación, el 67% de los visitantes son de Chrome y otro 1% del trabajo. Por lo tanto, el 68% de estas personas pueden ver y beneficiarse del formato de archivo de imagen WebP! Cómo usar archivos WebP en WordPress en el ejemplo de hoy, usaremos una combinación de dos complementos diferentes de WordPress para poner en funcionamiento en WordPress. Son creados y desarrollados por el equipo KeyCDN, que es una red global de entrega de contenido (CDN).
[Premium] Optimus Image Optimizer: complemento de compresión de imágenes libres de WordPress, convertir imágenes en webp

[GRATIS] WordPress Cache Enabler: complemento de caché que le permite transmitir los navegadores web
Optimus Image Optimizer Puede descargar Optimus Image Optimizer de WordPress Warehouse, Optimus.io o desde el enchufe en el enchufe. Nota: requiere una licencia premium si desea convertir sus imágenes en webp. Una vez instalado, puede activar “Crear archivos WebP” en la configuración del complemento.
Después de activar la webp, esencialmente crea una imagen adicional para todo lo que se convierte. Entonces, si carga un archivo PNG o JPG, también hay una versión .Webp de su imagen, recuerde, PNG / JPG sigue siendo necesario, ya que todavía se usan para navegadores no aceptados. Optimus no tiene compresión de pérdida, por lo que su PNG y JPG también son tabletas. También hay una opción de optimización de bloques si ya ha comprimido sus imágenes y debe convertirlas en WebP.
WordPress Cache Enabler, así que ahora tiene imágenes webp, necesita una forma de decir WordPress a los navegadores web de transmisión y PNG / JPG a otros navegadores. Esto se puede hacer con el complemento gratuito de habilitador de caché de WordPress. Puede descargar el complemento desde el almacén de WordPress o instalarlo desde el enchufe en el enchufe. Una vez instalado, puede activar “Crear una versión de caché WebP adicional” en la configuración del complemento.

Después de activar esta opción, se crea una versión WebP adicional de su página.


¡Y eso es!Ahora debe tener archivos WebP que se ejecutan en su sitio web de WordPress.Comparación de JPG en WebP Hicimos una comparación entre JPG y WebP para mostrar las diferencias que puede hacer./Tr>
JPG-TO-WEBP-1.JPG 758 KB 685 kb 109 kb 86% jpg-to-wabp-2.jpg 599 kb 529 kb 58.8 kb 90% jpg a-webp- 3.jpg 960 kb 881 kb 200 kb 79% JPG-TO-WABP-4.JPG 862 kb 791 kb 146 kb 83% jpg-to -webp-5.jpg 960 kb 877 kb 71.7 kb 93%

WebP condujo a una disminución en el 85.87% del tamaño de imagen promedio. Comparación PNG en WebP nuevamente,

También hicimos una comparación entre PNG y WebP para mostrar las diferencias que puede hacer.
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-wabp-3.png 43 kb 31 kb 25 kb 42% png-to -WABP-4.PNG 30 kb 24 kb 18 kb 40% png-to-webb-5. png 15 kb 11 kb 8 kb 47 % png-to-webp-6.png 34 kb 24 kb 18 KB 47% png-to-webp-7.png 15 kb 13 KB 8 kb 47% png-to-wabp-8.png 63 KB 47 kb 44 kb 30% png-to-wabp-9. png

48 kb 36 kb 33 kb 31% png-to-webp-11.png 18 kb 13 kb 9 kb 50% png-to-webp-1.png 61 kb 45 kb 39 kb 36% png-to-webp-13.png 32 kb 25 kb 21 kb 35% png-to-wabp-44 > 21 kb 17 kb 35% png-to-wabp -15.png 14 kb 12 kb 9 kb 36% png -to-wabp- 16.png 36 kb 27 kb 24 kb 33% PNG-TO WEBP-17.P

ng 14 kb 12 kb 8 kb 43% Png-to-webp-18.png 21 kb 18 kb 13 kb 38% png-to-webp-9.png 42 kb 30 kb 27 kb

36% png-to-wabp-20.png 23 kb 20 kb 18 kb 22%

webP condujo a una disminución del 42.8% en el tamaño de imagen promedio. Es muy fácil de implementar en su sitio web de WordPress y puede hacerse más pequeño Tamaños de archivo de imagen drástica!No hay compresión de imagen que se pueda comparar con los ahorros de WebP.A, y mencionó que WebP tiene la capacidad de usar compresión sin pérdida?Esto significa que no verá pérdidas de calidad notables.Si está buscando una mejor manera de acelerar WordPress, WebP puede ser una excelente solución.