martes, abril 23, 2024
No menu items!
InicioBlogsCómo usar archivos WebP en WordPress

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.

ūüĒ• Leer:  C√≥mo convertirse en afiliado de Amazon: la gu√≠a para principiantes

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
ūüĒ• Leer:  C√≥mo ver la foto de perfil de Instagram en tama√Īo completo (+ Descargar)

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%
ūüĒ• Leer:  C√≥mo cambiar la contrase√Īa de Spotify (gu√≠a breve)

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.

Recomendamos

Populares