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 más 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 sin pérdida de WebP son 26% más pequeño de tamaño en comparación con PNG y las imágenes con pérdida de WebP son 25-34% más pequeño que 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.
¿Por qué es tan importante WebP? De acuerdo a 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 bien, 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. De acuerdo a Puedo usar, WebP actualmente es compatible con Chrome 23+, Opera 39+, todas las versiones de Opera mini, el navegador Android 4.3+ y Chrome para Android.
¡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.
De acuerdo a W3Schools, Chrome tiene el monopolio de la cuota de mercado de los navegadores con 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!
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).
- [premium] Optimus de imagen Optimus: Complemento de compresión de imágenes sin pérdida para WordPress, convierte imágenes a WebP
- [free] Habilitador de caché de WordPress: Complemento de almacenamiento en caché que le permite servir WebP a los navegadores compatibles
Optimus de imagen Optimus
Puede descargar Optimus Image Optimizer desde el Repositorio de WordPress, desde optimus.io, o desde el panel de control de tu 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.
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.
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.
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 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 instálelo 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.
Una vez que habilita esa opción, se crea una versión WebP adicional almacenada en caché de su página.
¡Y eso es todo! Ahora debería tener archivos WebP ejecutándose en su sitio web de WordPress.
Comparación de JPG a WebP
Hicimos una comparación de JPG a 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 a WebP para mostrar las diferencias que puedes 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-to-webp-4.png | 30 KB | 24 KB | 18 KB | 40% |
png-to-webp-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-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-a-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.