Todos hemos estado allí antes: estás navegando en un sitio web que tiene un montón de imágenes enormes de comida deliciosa, o tal vez ese nuevo dispositivo que has estado mirando. Estas imágenes tiran de tus sentidos y, para los autores de contenido, son esenciales para motivar a las personas a hacer cosas.
Excepto que estas imágenes son francamente enormes. Realmente enorme. En una conexión móvil inestable, incluso puede ver estas imágenes desplegarse ante usted como una cortina de ventana descendente. De repente, recuerda los viejos tiempos del acceso telefónico.
Esto es un problema, porque las imágenes representan una parte significativa de lo que se descarga en un sitio web típico, y por una buena razón. Las imágenes son herramientas expresivas y tienen la capacidad de hablar más que la copia. El desafío está en caminar por la cuerda floja entre el contenido visualmente rico y la entrega rápida del mismo.
La solución a este dilema no es unidimensional. Existen muchas técnicas para adelgazar imágenes rebeldes y entregarlas de acuerdo con las capacidades de los dispositivos que las solicitan. Tal tema puede ser fácilmente su propio libro, pero el enfoque de esta publicación será muy específico: el formato de imagen WebP de Google, y cómo puedes aprovecharlo para servir imágenes que tengan toda la fidelidad visual que tienen tus imágenes ahora, pero en una fracción del tamaño del archivo. ¡Vamos a empezar!
¿Qué es WebP y por qué debería importarme?
WebP es un formato de imagen desarrollado y lanzado por primera vez por Google en 2010. Admite la codificación de imágenes en formatos sin pérdida y con pérdida, lo que lo convierte en un formato versátil para cualquier tipo de medio visual, y un gran formato alternativo a PNG o JPEG. La calidad visual de WebP a menudo es comparable a formatos más ubicuos. A continuación se muestra una comparación de una imagen WebP con pérdida y una imagen JPEG:
¿Puede usted decir la diferencia? (Sugerencia: la versión de WebP está a la derecha).
En el ejemplo anterior, las diferencias visuales son casi imperceptibles, pero las diferencias en el tamaño del archivo son sustanciales. La versión JPEG de la izquierda pesa 56,7 KB y la versión WebP de la derecha es casi un tercio más pequeña con 38 KB. No está mal, especialmente si se considera que la calidad visual entre los dos es comparable.
Entonces, la siguiente pregunta, por supuesto, es “¿cuál es el soporte del navegador?” No es tan delgado como podría pensar. Dado que WebP es una tecnología de Google, la compatibilidad con ella se fija en los navegadores basados en Blink. Sin embargo, estos navegadores constituyen una parte significativa de los usuarios en todo el mundo, lo que significa que casi el 70% de los navegadores en uso son compatibles con WebP en el momento de redactar este artículo. Si tuviera la oportunidad de hacer que su sitio web sea más rápido para más de dos tercios de sus usuarios, ¿la dejaría pasar? Yo creo que no.
Sin embargo, es importante recordar que WebP es no es un reemplazo para imágenes JPEG y PNG. Es un formato que puede servir a los navegadores que pueden usarlo, pero debe tener formatos de imagen más antiguos a mano para otros navegadores. Esta es la naturaleza del desarrollo para la web: tenga su Plan A listo para los navegadores que puedan manejarlo, y tenga su Plan B (y tal vez el Plan C) listo para los navegadores que tienen menos capacidad.
Suficiente con las exenciones de responsabilidad. Optimicemos!
Conversión de imágenes a WebP
Si está familiarizado con Photoshop, la forma más fácil de probar WebP es probar el complemento de Photoshop para WebP. Después de instalarlo, podrá utilizar el Guardar como (¡no Guardar para Web!) y seleccione WebP o WebP Lossless en el menú desplegable de formato.
¿Cuál es la diferencia entre los dos? Piense en ello como en las diferencias entre imágenes JPEG y PNG. Los archivos JPEG tienen pérdida y las imágenes PNG no tienen pérdida. Utilice WebP antiguo normal cuando desee convertir sus imágenes JPEG. Utilice WebP Lossless cuando convierta sus PNG.
Cuando guarda imágenes usando el formato WebP Lossless con el complemento de Photoshop, no recibe ningún mensaje. Simplemente se encarga de todo. Sin embargo, cuando elige WebP antiguo normal para sus imágenes con pérdida, obtendrá algo como esto:
El diálogo de configuración con pérdida de WebP
El diálogo de configuración para WebP con pérdida ofrece más flexibilidad para configurar la salida. Puede ajustar la calidad de la imagen usando un control deslizante de 0 a 100 (similar a JPEG), establecer la fuerza del perfil de filtrado para obtener tamaños de archivo más bajos (a expensas de la calidad visual, por supuesto) y ajustar el filtrado de ruido y la nitidez.
Mi queja con el complemento WebP Photoshop es doble: no hay una interfaz Guardar para Web para que pueda obtener una vista previa de cómo se verá una imagen con la configuración que ha elegido. Si desea guardar un montón de imágenes, debe crear un proceso por lotes. Mi segunda queja probablemente no sea un obstáculo para usted si le gusta el procesamiento por lotes en Photoshop, pero soy más un codificador, por lo que prefiero usar algo como Node para convertir muchas imágenes a la vez.
Conversión de imágenes a WebP con Node
Node. En este artículo, usaremos Node para convertir sus archivos JPEG y PNG a imágenes WebP en masa con el uso de un paquete de Node llamado imagemin.
imagemin es la navaja suiza de los procesadores de imágenes en Node, pero nos centraremos en usarla para convertir todos nuestros archivos JPEG y PNG en imágenes WebP. ¡Pero no te preocupes! Incluso si nunca antes ha usado Node, este artículo lo guiará a través de todo. Si la idea de usar Node le molesta, puede usar el complemento WebP Photoshop y seguir adelante.
Lo primero que querrá hacer es descargar Node.js e instalarlo. Esto solo debería llevarte unos minutos. Una vez instalado, abra una ventana de terminal y vaya a la carpeta raíz de su proyecto web. Desde allí, solo use Node Package Manager (npm) para instalar imagemin y el imagemin-webp enchufar:
npm install imagemin imagemin-webpLa instalación puede tardar hasta un minuto. Cuando termine, abra su editor de texto y cree un nuevo archivo llamado webp.js en la carpeta raíz de su proyecto web. Escriba el siguiente script en el archivo (actualizado para el nodo moderno por Luke Berry):
Guión original
var imagemin = require("imagemin"), // The imagemin module.
webp = require("imagemin-webp"), // imagemin's WebP plugin.
outputFolder = "./img", // Output folder
PNGImages = "./img/*.png", // PNG images
JPEGImages = "./img/*.jpg"; // JPEG images
imagemin([PNGImages], outputFolder, {
plugins: [webp({
lossless: true // Losslessly encode images
})]
});
imagemin([JPEGImages], outputFolder, {
plugins: [webp({
quality: 65 // Quality setting from 0 to 100
})]
});const imagemin = require('imagemin'),
webp = require('imagemin-webp')
const outputFolder="./images/webp"
const produceWebP = async () => {
await imagemin(['images/*.png'], {
destination: outputFolder,
plugins: [
webp({
lossless: true
})
]
})
console.log('PNGs processed')
await imagemin(['images/*.{jpg,jpeg}'], {
destination: outputFolder,
plugins: [
webp({
quality: 65
})
]
})
console.log('JPGs and JPEGs processed')
}
produceWebP()Este script procesará todas las imágenes JPEG y PNG en el img carpeta y convertirlos a WebP. Al convertir imágenes PNG, configuramos el lossless opción a true. Al convertir imágenes JPEG, configuramos el quality opción a 65. No dude en experimentar con estas configuraciones para obtener diferentes resultados. Puede experimentar con más configuraciones en el imagemin-webp página de complementos.
Este script asume que todas sus imágenes JPEG y PNG están en una carpeta llamada img. Si este no es el caso, puede cambiar los valores de la PNGImages y JPEGImages variables. Este script también asume que desea que la salida de WebP vaya al img carpeta. Si no quiere eso, cambie el valor de la outputFolder variable a lo que necesite. Una vez que esté listo, ejecute el script así:
node webp.jsEsto procesará todas las imágenes y descargará sus homólogos de WebP en el img carpeta. Los beneficios que obtenga dependerán de las imágenes que esté convirtiendo. En mi caso, una carpeta con archivos JPEG que totalizan aproximadamente 2,75 MB se redujo a 1,04 MB sin ninguna pérdida perceptible de la calidad visual. Eso es un 62% de reducción sin mucho esfuerzo! Ahora que todas sus imágenes están convertidas, está listo para comenzar a usarlas. ¡Saltemos y pongámoslos en uso!
Usando WebP en HTML
Usar una imagen WebP en HTML es como usar cualquier otro tipo de imagen, ¿verdad? Solo golpea a ese tonto en el src atributo y listo!
<!-- Nothing possibly can go wrong with this, right? -->
<img src="https://css-tricks.com/using-webp-images/img/myAwesomeWebPImage.webp" alt="WebP rules.">Esto funcionará muy bien, pero solo para navegadores que lo admitan. Ay de esos usuarios desafortunados que deambulan por su sitio cuando todo lo que está usando es WebP:
QUÉ PASÓ
Es una mierda, claro, pero así es el desarrollo de front-end, así que anímate. Algunas características simplemente no van a funcionar en todos los navegadores, y eso no va a cambiar pronto. La forma más sencilla de hacer que esto funcione es utilizar el elemento para especificar un conjunto de alternativas así:
<picture>
<source type="image/webp">
<source type="image/jpeg">
<img src="https://css-tricks.com/using-webp-images/img/creakyOldJPEG.jpg" alt="Alt Text!">
</picture>Esta es probablemente la mejor opción para obtener la compatibilidad más amplia posible porque funcionará en todos los navegadores, no solo en aquellos que admiten el elemento. La razón de esto es que los navegadores que no son compatibles simplemente mostrará cualquier fuente que se especifique en el apoyo, siempre puede dejar caer en el guión de Picturefill súper elegante de Scott Jehl.
Uso de imágenes WebP en CSS
La imagen se vuelve más compleja cuando necesita usar imágenes WebP en CSS. A diferencia del elemento en HTML que retrocede graciosamente a la
Modernizr es una conocida biblioteca de detección de funciones que detecta las funciones disponibles en los navegadores. El soporte WebP resulta ser una de esas detecciones. Aún mejor, puede hacer una compilación de Modernizr personalizada con solo detección de WebP en https://modernizr.com/download, lo que le permite detectar el soporte de WebP con una sobrecarga muy baja.
Cuando agrega esta compilación personalizada a su sitio web a través del <script> etiqueta, agregará automáticamente una de dos clases a la <html> elemento:
- El
webpLa clase se agrega cuando el navegador es compatible con WebP. - El
no-webpLa clase se agrega cuando el navegador no es compatible con WebP.
Con estas clases, podrá usar CSS para cargar imágenes de fondo de acuerdo con la capacidad de un navegador al apuntar a la clase en la etiqueta:
.no-webp .elementWithBackgroundImage {
background-image: url("image.jpg");
}
.webp .elementWithBackgroundImage{
background-image: url("image.webp");
}Eso es. Los navegadores que pueden usar WebP obtendrán WebP. Aquellos que no pueden simplemente recurrirán a los tipos de imágenes compatibles. ¡Es un ganar-ganar! Excepto…
¿Qué pasa con los usuarios con JavaScript deshabilitado?
Si depende de Modernizr, debe pensar en aquellos usuarios que tienen JavaScript desactivado. Lo siento, pero así son las cosas. Si va a utilizar la detección de funciones que puede dejar a algunos de sus usuarios en la oscuridad, deberá realizar la prueba con JavaScript desactivado. Con las clases de detección de características utilizadas anteriormente, los navegadores sin JavaScript ni siquiera mostrarán una imagen de fondo. Esto se debe a que el script deshabilitado nunca puede agregar las clases de detección al <html> elemento.
Para solucionar esto, comenzaremos agregando una clase de no-js al <html> etiqueta:
<html class="no-js">Luego, escribiremos una pequeña parte de la secuencia de comandos en línea que colocaremos antes de cualquier otra secuencia de comandos:
<script>
document.documentElement.classList.remove("no-js");
</script>Esto eliminará el no-js clase en el <html> elemento cuando se analiza.
Entonces, ¿de qué nos sirve esto? Cuando JavaScript está deshabilitado, este pequeño script nunca se ejecuta, por lo que no-js la clase permanecerá en el elemento. Esto significa que podemos agregar otra regla para proporcionar un tipo de imagen que tenga el soporte más amplio:
.no-js .elementWithBackgroundImage {
background-image: url("image.jpg");
}Esto cubre todas nuestras bases. Si JavaScript está disponible, la secuencia de comandos en línea se ejecuta y elimina la no-js class antes de que se analice el CSS, por lo que el JPEG nunca se descarga en un navegador compatible con WebP. Si JavaScript está realmente desactivado, la clase no se elimina y se usa el formato de imagen más compatible.
Ahora que hemos hecho todo esto, estos son los casos de uso que podemos esperar:
- Aquellos que pueden usar WebP obtendrán WebP.
- Aquellos que no puedan usar WebP obtendrán imágenes PNG o JPEG.
- Aquellos con JavaScript desactivado obtendrán imágenes PNG o JPEG.
Échate una mano. Acaba de aprender a utilizar progresivamente imágenes WebP.
Para concluir
WebP es un formato de imagen versátil que podemos utilizar en lugar de imágenes PNG y JPEG (si es compatible). Puede producir una reducción sustancial en el tamaño de las imágenes en su sitio web y, como sabemos, cualquier cosa que resulte en la transferencia de menos datos. reduce el tiempo de carga de la página.
¿Hay contras? Unos pocos. El más importante es que está manteniendo dos conjuntos de imágenes para lograr el mejor soporte posible, lo que puede no ser posible para su sitio web si hay un gran conjunto de imágenes que necesita convertir a WebP. Otra es que tendrás que administrar un poco de JavaScript si necesitas usar imágenes WebP en CSS. Otro aspecto notable es que los usuarios que guardan sus imágenes en el disco pueden no tener un programa predeterminado configurado para ver imágenes WebP.
La conclusión es que el esfuerzo relativamente bajo vale los ahorros que obtendrá, ahorros que mejorarán la experiencia del usuario de su sitio web al permitir que se cargue más rápido. Los usuarios que navegan a través de redes móviles se beneficiarán especialmente. ¡Ahora avance y WebP al contenido de su corazón!
Jeremy Wagner es el autor de Web Performance in Action, un próximo título de Manning Publications. Usar código de cupón csstripc para ahorrar un 38%, o cualquier otro libro de Manning.
Échale un vistazo en Twitter: @malchata