¿Por qué debería interesarte?
Las imágenes WebP son más pequeñas que sus contrapartes JPEG y PNG, por lo general, en el de reducción del 25% al 35% en el tamaño del archivo. Esto reduce el tamaño de las páginas y mejora el rendimiento.
- YouTube descubrió que cambiar a las miniaturas WebP generó un 10% que las páginas se carguen más rápido.
- Facebook experimentó Un ahorro de entre un 25% y un 35% en el tamaño de los archivos JPEG y un ahorro del 80% en el tamaño de los archivos PNG cuando cambiaron a usar WebP.
WebP es un excelente reemplazo para imágenes JPEG, PNG y GIF. Además, WebP ofrece compresión con y sin pérdida. En la compresión sin pérdida, no hay datos. se pierde. La compresión con pérdida reduce el tamaño del archivo, pero posiblemente a expensas reduciendo la calidad de las imágenes.
Cómo convertir imágenes a WebP
En general, los usuarios utilizan uno de los siguientes enfoques para convertir sus imágenes a WebP: el Herramienta de línea de comandos cwebp o el complemento de Imagemin WebP (npm de un paquete de aplicaciones). El complemento de WebP de Imagemin suele ser la mejor opción si tu proyecto usa la compilación de comandos o herramientas de compilación (p.ej., Webpack o Gulp), mientras que la CLI es una buena opción para proyectos simples o si solo tienes que convertir imágenes una vez.
Cuando conviertes imágenes a WebP, tienes la opción de configurar una amplia variedad de de compresión, pero para la mayoría de las personas, lo único que necesitan es la configuración de calidad. Puedes especificar un nivel de calidad desde 0 (peor) a 100 (mejor). Vale la pena experimentar con esto, descubrir ¿qué nivel se logra con respecto a la compensación correcta entre calidad de imagen y tamaño de archivo necesidades empresariales.
Usar cwebp
Convierte un solo archivo con la configuración de compresión predeterminada de cwebp:
cwebp images/flower.jpg -o images/flower.webp
Convierte un solo archivo con un nivel de calidad de 50:
cwebp -q 50 images/flower.jpg -o images/flower.webp
Convierte todos los archivos de un directorio:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
Usa Imagemin
El complemento de WebP de Imagemin se puede usar solo o con tu herramienta de compilación favorita. (Webpack/Gulp/Grunt/etc.). Por lo general, esto implica agregar unas 10 líneas de código a un la secuencia de comandos de compilación o el archivo de configuración de tu herramienta de compilación. Aquí hay ejemplos de cómo hacer eso para Webpack Gulp y Grunt.
Si no estás usando una de esas herramientas de compilación, puedes usar Imagemin por sí solo como
una secuencia de comandos de Node. Esta secuencia de comandos convertirá los archivos del directorio images.
y guárdalas en el directorio compressed_images.
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
imagemin(['images/*'], {
destination: 'compressed_images',
plugins: [imageminWebp({quality: 50})]
}).then(() => {
console.log('Done!');
});
Ofrece imágenes WebP
Si tu sitio solo admite WebP compatible navegadores, puedes dejar de leer. De lo contrario, Publica WebP en navegadores más nuevos y una imagen de resguardo en navegadores anteriores:
Antes:
html
<img src="flower.jpg" alt="">
Después:
html
<picture>
<source type="image/webp" srcset="flower.webp">
<source type="image/jpeg" srcset="flower.jpg">
<img src="flower.jpg" alt="">
</picture>
El
<picture>:
<source>,
y <img>, incluida la forma en que se ordenan entre sí, todas
interactúan para lograr este resultado final.
<picture>
La etiqueta <picture> proporciona un wrapper para cero o más etiquetas <source> y una etiqueta <img>.
<source>
La etiqueta <source> especifica un recurso multimedia.
El navegador usa la primera fuente de la lista que está en un formato compatible. Si el navegador no admite ninguno de los formatos enumerados en las etiquetas <source>, recurre a la carga de la imagen especificada por la etiqueta <img>.
<img>
La etiqueta <img> hace que este código funcione en navegadores
que no admiten la etiqueta <picture>.
Si un navegador no admite la etiqueta <picture>,
ignora las etiquetas que no admite. Por lo tanto, solo "ve" el
<img src="flower.jpg" alt=""> y carga esa imagen.
Lee el encabezado HTTP Accept
Si tienes un backend de aplicación o un servidor web que te permite reescribir solicitudes, puedes leer el valor del encabezado HTTP Accept, que anunciará qué formatos de imagen alternativos se admiten:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Leer el encabezado de la solicitud y reescribir la respuesta en función de su contenido tiene el beneficio de simplificar el lenguaje de marcado de tu imagen. El lenguaje de marcado de <picture> puede ser bastante extenso con muchas fuentes. A continuación, se muestra una regla mod_rewrite de Apache que puede entregar alternativas de WebP:
RewriteEngine On
RewriteCond %{HTTP:Accept} image/webp [NC]
RewriteCond %{HTTP:Content-Disposition} !attachment [NC]
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f [NC]
RewriteRule (.+)\.(png|jpe?g)$ $1.webp [T=image/webp,L]
Si eliges esta opción, tendrás que configurar el encabezado de respuesta HTTP Vary para asegurarte de que las cachés comprendan que la imagen se puede publicar con diferentes tipos de contenido:
<FilesMatch ".(jpe?g|png)$">
<IfModule mod_headers.c>
Header set Vary "Content-Type"
</IfModule>
</FilesMatch>
La regla de reescritura anterior buscará una versión WebP de cualquier imagen JPEG o PNG solicitada. Si se encuentra una alternativa WebP, se publicará con el encabezado Content-Type adecuado. Esto te permitirá usar un lenguaje de marcado de imágenes similar al siguiente con la compatibilidad automática con WebP:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
Cómo verificar el uso de WebP
Lighthouse se puede usar para verificar que se publiquen todas las imágenes de tu sitio con WebP. Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Opciones > Performance) y busca los resultados de Serve images in next-gen de formatos. Lighthouse enumerará las imágenes que no se publiquen en WebP.