¿Qué es WebP y cómo usar este formato de imagen en WordPress?

Dado que las imágenes generalmente representan el 50% del peso promedio de una página web, lo que sea que pueda hacer para optimizar sus imágenes no solo le ahorra espacio en el servidor, sino que le asegura que las páginas se transmiten más rápido. Afortunadamente, con el formato de imagen WebP, puede crear imágenes más pequeñas y ricas, que son 26% más pequeñas que PNGS y 25-34% más pequeñas que JPEG-en al mismo tiempo que mantienen la misma calidad. En esta publicación veremos qué es WebP y cómo usar este formato de imagen en su sitio de WordPress para reducir el tamaño de sus imágenes.
¿Qué es WebP? WebP es un formato de archivo de imagen creado por el equipo de rendimiento web de Google, desarrollado como un reemplazo para JPEG, PNG y GIF, que al mismo tiempo acepta compresión, transparencia y buenas animaciones. Se anunció por primera vez en septiembre de 2010 como un estándar abierto para gráficos con pérdidas de color verdaderas, produciendo archivos de tamaño más pequeños, comparables a JPEG. El soporte para imágenes sin pérdida y translúcido se anunció en 2012, lo que hace que WebP sea una alternativa al formato PNG. La compresión con pérdidas de WebP utiliza codificación predictiva para codificar una imagen, el mismo método utilizado por el códec de video VP8 para comprimir los marcos clave en los videos. La codificación predictiva funciona a través del uso de valores en los bloques vecinos de píxeles para predecir el valor de un bloque y luego solo codifica la diferencia.
Compresión sin pérdidas WebP utiliza fragmentos de imagen ya vistos para reconstruir nuevos píxeles y puede usar una paleta local si no se encuentra ninguna coincidencia. Como puede ver en los ejemplos a continuación en la Galería WebP de Google, no hay una diferencia de calidad notable entre las imágenes JPEG a la izquierda y las versiones WebP a la derecha. Lo que no ve, a menos que verifique el tamaño del archivo, es que las imágenes de WebP son más del 30% más pequeñas que el JPEG. Después de decir en este blog, cuando se trata del peso de la página, el tamaño es importante. Después de todo, cuanto menor sea el tamaño de una página web, más rápido se cargará. Es una idea en absoluto.

Por lo tanto, reduciendo las dimensiones de los archivos de sus imágenes. Usando un formato como WebP, en combinación con otras técnicas, como la función de carga perezosa del cohete WP, puede transmitir imágenes más pequeñas y puede asegurarse de que las páginas se entreguen más rápido . Last but not least, using the webp format, you will optimize the highest degree of content paint, one of the Core Web Vitals scores.
El soporte del navegador para WebP podría ser preguntándose, porque WebP ha existido durante ocho años, ¿por qué no es más popular? ¿Por qué seguimos usando JPEG y PNG cuando WebP puede producir archivos de tamaño más pequeño?
Al igual que muchas tecnologías en la web que luchan por encontrar sus pies, no todos los navegadores modernos aceptan webp. Según Can I Use …, los navegadores que aceptan WebP incluyen Chrome, Opera, Opera Mini, Android Browser y Chrome para Android.
Microsoft ha anunciado que admitirá WebP en su navegador Edge en octubre del año pasado, Mozilla haciendo un anuncio similar en breve para Firefox. Ahora, es solo el Safari de Apple que permanece atrás sin ninguna compatibilidad. Después de que inicialmente mostró interés en apoyar el formato de imagen cuando agregó soporte de webp en iOS 10 y MacOS Sierra, Apple lo reemplazó con Heif, un formato de imagen basado en el estándar de compresión de video HEVC (también conocido como H.265 y MPEG-H parte). 2). Uso de WebP: con JPEG/PNG como alternativa solo porque Apple no acepta WebP no significa que no debe usar el formato. Es posible entregar archivos WebP a los visitantes que utilizan navegadores aceptados mientras se muestran archivos JPEG y PNG como una alternativa a los usuarios de Safari. De esta manera, en lugar de proporcionar WebP a todos los usuarios y arriesgarse a que los usuarios de Safari vean imágenes rotas, puede asegurarse de que todos los visitantes de su sitio vean imágenes, mientras que los navegadores aceptados se benefician de una experiencia más rápida.

Pero antes de decidir si usar o no WebP en su sitio, hay algunas cosas para recordar. En primer lugar, sabes que Chrome es el navegador más popular con una cuota de mercado del 64%. Por lo tanto, es muy probable que la mayoría de los visitantes de su sitio puedan ver imágenes de WebP en su sitio.
Es una buena idea consultar Google Analytics para ver qué navegadores usan sus visitantes antes de llamar si usar este método o pantalla sin reserva. Aquí, puede ver que los visitantes de mi sitio están utilizando principalmente Chrome y Firefox, lo que significa que el 83% de mis visitantes se beneficiarían si usara WebP. Por otro lado, Safari es el tercer navegador más popular que se beneficia de una opción de imagen alternativa . Cómo usar WebP con WordPress WordPress 5.8 ha agregado el soporte de WebP, por lo que ahora puede cargar sus imágenes WebP en el tablero. Sin embargo, WordPress no convierte el formato original en WebP.
Sin dramas, como decimos en Australia. Siempre puede convertir sus imágenes en formato WebP: debe usar un complemento. Con el complemento de expresión web gratuito, puede servir imágenes webp generadas automáticamente en navegadores que aceptan WebP, mientras que transmiten aún más los usuarios de JPEG/PNG Safari. Esta opción funciona para cualquier imagen en su sitio, incluidas las de la biblioteca de medios, galerías y temas.

La característica del sitio del acelerador de JetPack (anteriormente conocido como Photon) también convierte JPEG y PNG en el formato de imagen WebP. Aquí hay un ejemplo de calidad de compresión que ofrece la API de Photon cuando se establece en 50%:
Alternativamente, puede usar su CDN sus nubes con planes pagados puede acceder a la función polaca del CDN, que proporciona una conversión automática de WebP. Al igual que las otras soluciones que mencionamos anteriormente, el polaco funciona cambiando las imágenes JPEG y PNG de las versiones de WebP para navegadores que aceptan este tipo de archivo. ¡Nuestra Imagify favorita las imágenes IMBP! A principios de mayo de 2019, WP Media (la compañía detrás de WP Rocket) lanzó Imagify 1.9. Esta versión principal finalmente introdujo la función que muchos de nuestros clientes estaban esperando: ¡Soporte de WebP! Ahora, para cada imagen que optimice con el complemento Imagify, también recibirá su versión webp (si verifica las opciones desde la configuración); En su biblioteca de medios, esto dará como resultado las siguientes versiones de imagen:

Imagen optimizada a tamaño completo

Imagen webp a tamaño completo

miniaturas optimizadas

WebP de miniaturas
La optimización funcionará para imágenes incluidas en su tarea y complementos.
Si lo desea, Imagify también puede mostrar imágenes WebP en el front-end de dos maneras:
Etiqueta
Reescribe las reglas en el archivo .htaccess.
La primera opción reemplaza las etiquetas con etiquetas . Esta debería ser la solución favorita, pero tenga en cuenta que algunos temas pueden romperse: por lo que si elige esta opción, asegúrese de que todo se muestre correctamente en el frente. La segunda opción agrega reglas de reescritura al archivo de configuración de su sitio (.htaccess) y no cambia el código de sus páginas un detalle importante a considerar: ¡esta opción no funciona con CDN! ¿Pero las imágenes ya optimizadas? Si ha mantenido una copia de seguridad de las imágenes originales, puede crear su versión WebP por separado (una por una o por optimización en el bloque). ¡Descargue la imagen gratis! Comparación JPG/PNG vs WebP Google Web Performance Team promete pérdidas 26% más bajas que las imágenes PNGPS y WebP con un 25-34% más bajo que las imágenes JPEG. Así que hice algunas pruebas de comparación para ver las diferencias de tamaño que podrían hacerse con WebP. JPEG Comparación con WebP Descargar seis imágenes JPEG de Unsplash, las comprimí para ver qué tipo de ahorros podría obtener y luego convertir las imágenes originales en la webp para compararlas. % Del tamaño de la imagen. Me sorprendió ver la diferencia de tamaño entre las versiones JPEG y WebP de Image4.jpg, pero el fondo rosa simple explica la gran diferencia de tamaño. A continuación, puede ver las dos versiones una al lado de la otra. La imagen JPEG a la izquierda es ligeramente más clara que la imagen WebP a la derecha.
Comparación de PNG con WebP nuevamente, elegí seis imágenes al azar, esta vez los archivos PNG en freepgs.com. Las comprimí y luego convertí las imágenes originales en WebP para compararlas. Las mayores diferencias en el tamaño del archivo fueron para las imágenes detalladas de las hojas y una máquina de café (Image4.png y, respectivamente, Image5.png), mientras que las más pequeñas La diferencia era para las imágenes en blanco y negro de un gato (imagen3.png). En general, la conversión de PNG a WebP ha llevado a una disminución promedio del 67% del tamaño del archivo. La conclusión del formato de archivo WebP sigue aumentando en popularidad y soporte, pero hay mucho que ganar de este formato de archivo. Puede reemplazar los formatos de archivo JPEG y PNG (y GIF) con pérdidas y pérdidas, pero ofrece archivos mucho más pequeños. Realmente no hay otro formato de imagen u otra herramienta de optimización web que pueda obtener archivos más pequeños, sin pérdidas de calidad visibles, así como WebP. Por lo tanto, le recomendamos que comience a usar el formato WebP para mejorar el rendimiento de su sitio.