¿Por qué debería importarte?
Las imágenes WebP son más pequeñas que sus equivalentes JPEG y PNG, por lo general, tienen la magnitud de una reducción del 25 al 35% en el tamaño del archivo. Esto disminuye el tamaño de las páginas y mejora el rendimiento.
- YouTube descubrió que cambiar a miniaturas WebP aceleraba las cargas de la página un 10%.
- Facebook experimentó un ahorro de tamaño de archivo de entre un 25% y un 35% para los archivos JPEG y del 80% en el de los PNG cuando comenzó a usar WebP.
WebP es un excelente reemplazo de imágenes JPEG, PNG y GIF. Además, WebP ofrece compresión con y con 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 expensas de una posible reducción de 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 de cwebp o el complemento WebP de Imagemin (paquete npm). Por lo general, el complemento WebP de Imagemin 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 necesitarás convertir imágenes una vez.
Cuando conviertes imágenes a WebP, tienes la opción de establecer una amplia variedad de parámetros de compresión, pero para la mayoría de las personas lo único que debes preocuparte es la configuración de calidad. Puedes especificar un nivel de calidad de 0 (peor) a 100 (mejor). Vale la pena experimentar con esto. Averigua qué nivel es el equilibrio adecuado entre la calidad de la imagen y el tamaño del archivo según tus necesidades.
Usar cwebp
Convierte un solo archivo usando la configuración de compresión predeterminada de cwebp:
cwebp images/flower.jpg -o images/flower.webp
Convierte un solo archivo usando un nivel de calidad de 50:
cwebp -q 50 images/flower.jpg -o images/flower.webp
Convierte todos los archivos en un directorio:
for file in images/*; do cwebp "$file" -o "${file%.*}.webp"; done
Usa Imagemin
El complemento WebP de Imagemin se puede usar solo o con tu herramienta de compilación favorita (Webpack/Gulp/Grunt, etcétera). Por lo general, esto implica agregar aproximadamente 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 con Webpack, Gulp y Grunt.
Si no usas una de esas herramientas de compilación, puedes usar Imagemin por sí sola como una secuencia de comandos de Node. Esta secuencia de comandos convertirá los archivos en el 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, publica WebP en navegadores más nuevos y una imagen de resguardo en 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 unas de otras, 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 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> 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 la admita. Por lo tanto, solo "ve" la etiqueta <img src="flower.jpg" alt=""> y carga esa imagen.
Lee el encabezado HTTP Accept
Si tienes un servidor web o un backend de la aplicación que te permite reescribir solicitudes, puedes leer el valor del encabezado HTTP Accept, que anunciará qué formatos de imagen alternativos son compatibles:
Accept: image/webp,image/svg+xml,image/*,*/*;q=0.8
Leer el encabezado de esta solicitud y reescribir la respuesta según su contenido tiene el beneficio de simplificar el lenguaje de marcado de tu imagen. El lenguaje de marcado de <picture> puede ser bastante largo con muchas fuentes. A continuación, se muestra una regla mod_rewrite de Apache que puede publicar 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, deberás configurar el encabezado de respuesta HTTP Vary para garantizar que las cachés comprendan que la imagen se puede entregar con distintos 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 publicará con el encabezado Content-Type adecuado. Esto te permitirá usar un lenguaje de marcado de imágenes similar al siguiente con compatibilidad automática de 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 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 de Entrega imágenes en formatos de nueva generación. Lighthouse mostrará una lista de las imágenes que no se entregan en WebP.