¿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 orden de una reducción del 25% al 35% en el tamaño del archivo. Esto reduce los tamaños de página y mejora el rendimiento.
- YouTube descubrió que cambiar a miniaturas WebP generó una carga de páginas un 10% más rápida.
- Facebook experimentó una reducción de entre el 25 y el 35% en el tamaño de los archivos JPEG y una reducción del 80% en el tamaño de los archivos PNG cuando cambió a WebP.
WebP es un excelente reemplazo para las 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 se pierden datos. La compresión con pérdida reduce el tamaño del archivo, pero a costa de reducir la calidad de la imagen.
Cómo convertir imágenes a WebP
Por lo general, las personas usan uno de los siguientes enfoques para convertir sus imágenes a WebP: la herramienta de línea de comandos cwebp o el complemento WebP de Imagemin (paquete npm). Por lo general, el complemento Imagemin WebP es la mejor opción si tu proyecto usa secuencias de comandos de compilación 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 necesitas convertir imágenes una vez.
Cuando conviertes imágenes a WebP, tienes la opción de establecer una amplia variedad de parámetros de configuración de compresión, pero para la mayoría de las personas, lo único que debes tener en cuenta es la configuración de calidad. Puedes especificar un nivel de calidad de 0 (peor) a 100 (mejor). Vale la pena probar esto y encontrar cuál es el nivel correcto entre la calidad de la imagen y el tamaño del archivo para tus necesidades.
Usa 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 Imagemin WebP se puede usar solo o con tu herramienta de compilación favorita (Webpack/Gulp/Grunt/etc.). Por lo general, esto implica agregar alrededor de 10 líneas de código a una secuencia de comandos de compilación o al archivo de configuración de tu herramienta de compilación. Estos son ejemplos de cómo hacerlo para Webpack, Gulp y Grunt.
Si no usas 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 los guardará 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 navegadores compatibles con WebP, puedes dejar de leer. De lo contrario, envía WebP a navegadores más nuevos y una imagen de resguardo a navegadores más antiguos:
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>
Las etiquetas <picture>, <source> y <img>, incluida la forma en que se ordenan entre sí, 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 que se enumeran en las etiquetas <source>, se recurrirá a la carga de la imagen especificada por la etiqueta <img>.
<img>
La etiqueta <img> es lo que hace que este código funcione en navegadores que no admiten la etiqueta <picture>.
Si un navegador no admite la etiqueta <picture>, ignorará las etiquetas que no admita. Por lo tanto, solo "ve" la etiqueta <img src="flower.jpg" alt=""> y carga esa imagen.
Cómo leer 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 Accept de HTTP, que anunciará qué formatos de imagen alternativos son compatibles:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Leer este encabezado de solicitud y reescribir la respuesta según su contenido tiene el beneficio de simplificar el marcado de imagen. El marcado <picture> puede ser bastante largo con muchas fuentes. A continuación, se muestra una regla mod_rewrite de Apache que puede entregar imágenes WebP alternativas:
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, deberás configurar el encabezado de respuesta HTTP Vary para asegurarte de que las cachés comprendan que la imagen se puede entregar 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 de WebP, se entregará con el encabezado Content-Type adecuado. Esto te permitirá usar un lenguaje de marcado de imagen similar al siguiente con compatibilidad automática con WebP:
<img src="flower-320w.jpg" srcset="flower-320w.jpg 320w, flower-640w.jpg 640w, flower-960w.jpg 960w">
Verifica el uso de WebP
Lighthouse se puede usar para verificar que todas las imágenes de tu sitio se publiquen con WebP. Ejecuta la auditoría de rendimiento de Lighthouse (Lighthouse > Opciones > Rendimiento) y busca los resultados de la auditoría Publica imágenes en formatos de nueva generación. Lighthouse mostrará una lista de las imágenes que no se entregan en WebP.