Eddie Osmani, en el artículo "El precio de JavaScript en 2018 ", expresó una idea valiosa: el tiempo requerido para procesar un script de 200 KB de tamaño y procesar una imagen que tenga el mismo tamaño varía significativamente. El hecho es que al procesar el código, el navegador necesita hacer un trabajo más extenso que al prepararse para el uso de imágenes. Esto es lo que dice el artículo al respecto:Una imagen JPEG debe decodificarse, rasterizarse y mostrarse. Y el paquete JS es necesario, si lo consideramos de manera simplista, cargar, analizar, compilar, ejecutar. De hecho, el motor tiene que resolver otros problemas en el proceso de procesamiento del código JS. En general, debe tenerse en cuenta que se gastan muchos más recursos del sistema en el procesamiento del código JavaScript, cuyo tamaño, en bytes, es comparable al tamaño de otros materiales.Estas palabras fueron escritas en 2018, pero aún son más que justas. Es cierto que, dada la situación actual, la idea expresada aquí se percibe hoy de manera un poco diferente.
Teniendo en cuenta que ahora ha estallado una pandemia en el mundo, noté que mi conexión a Internet se ha vuelto inestable. Afortunadamente, debido a que Internet está protegida por excelentes especialistas que no conocen la fatiga, la mayor parte de la World Wide Web todavía funciona bien. Pero en Internet, definitivamente algo está sucediendo. Uso una conexión de 100 Mbps, pero tengo la sensación de estar sentado en un módem 3G.Esto hace algunos cambios al razonamiento anterior. El hecho es que nuestros dispositivos pueden analizar y compilar JavaScript a la misma velocidad que podrían hacerlo hace un par de semanas. Pero los datos ahora viajan a través de las redes más lentamente. Como resultado, en este momento es extremadamente importante cuántos datos que representan un determinado recurso se transmiten a través de la red cuando se carga este recurso.Y los sitios suelen tener mucho más de 200 KB de imágenes. Una página con varios megabytes de imágenes suele ser el caso. Muchos desarrolladores (¡y yo también!), Por regla general, no piensan en absoluto sobre el tamaño de los materiales multimedia.Pero, lo cual es muy bueno, optimizar las imágenes utilizadas en las páginas web no es tan difícil. En este artículo hablaremos sobre cómo usar formatos gráficos modernos como WebP. Las imágenes guardadas en dichos formatos a menudo resultan ser 2-3 veces más pequeñas que aquellas para las que todos usan los viejos y conocidos formatos antiguos (como JPG y PNG). El uso de nuevos formatos puede mejorar seriamente la situación.Resumen general de formatos gráficos modernos
Para mejorar el trabajo con gráficos web, podemos usar los siguientes tres formatos:- JPEG 2000 es un formato que es una versión mejorada de JPG normal. Este formato fue desarrollado en 1997, principalmente para uso en cine y en medicina. Le permite comprimir imágenes más fuertes que JPEG, pero con menos artefactos.
- JPEG XR es un formato relacionado con JPEG 2000. Fue desarrollado por Microsoft en 2009.
- WebP es un formato que Google creó en 2010 para la web. El objetivo principal de su desarrollo era utilizar métodos avanzados para optimizar imágenes para reducir el tamaño de los archivos. WebP admite transparencia e incluso animación.
Aquí hablaremos principalmente sobre WebP. Formatos relacionados con JPEG, discutiremos dónde se planteará el problema de la compatibilidad del navegador.¿Cuánto puedes ganar usando formatos gráficos alternativos?
Hace unos meses, usé la siguiente imagen en un material.La imagen utilizada en un materialrealicé algunos experimentos, considerando el uso de los formatos JPG y PNG para almacenar la imagen original. Optimicé las opciones de imagen usando imagemin para descubrir lo que WebP me puede dar en lugar de estos formatos "retro".Los resultados fueron increíbles.Realicé experimentos similares con muchas imágenes. Casi siempre resultó que los archivos WebP eran un 30-70% más pequeños que incluso las versiones optimizadas de archivos gráficos de otros formatos.Esto puede plantear la cuestión de cómo la conversión a WebP puede afectar las imágenes SVG. No realicé tales experimentos con SVG. SVG es un formato vectorial. Esto significa que las imágenes que contiene se basan en instrucciones matemáticas y no en información sobre el color de los píxeles individuales. Convertir una imagen SVG en WebP significa renunciar a la capacidad de escalar imágenes SVG, lo cual, creo, es inaceptable. Además, sospecho que tal conversión, en la mayoría de los casos, conducirá a un aumento en el tamaño de los archivos.Compatibilidad del navegador
Para conocer cómo los navegadores admiten ciertos formatos gráficos, eche un vistazo a caniuse.com .El formato WebP es compatible con la mayoría de los navegadores.Soporte para el formato WebP por parte de los navegadoresAunque el nivel de soporte para este formato es muy alto, es muy malo que Safari e Internet Explorer no lo admitan.Y aquí hay información sobre el soporte de JPEG 2000.Soporte para el formato JPEG 2000 por parte de los navegadoresEntonces, ahora Safari está de nuestro lado, pero Internet Explorer está nuevamente sin trabajo.¿Qué pasa con JPEG XR?Compatibilidad con el formato JPEG XR por parte de los navegadoresY aquí se distinguió Internet Explorer. Como resultado, al usar estos tres formatos, anulamos todos los navegadores existentes (KaiOS Browser no admite ninguno de estos formatos, y le pido disculpas por ignorarlo, pero ni siquiera sé qué navegador es )Ahora hablemos sobre cómo elegir diferentes formatos de imagen diseñados para diferentes navegadores.El elemento de la imagen al rescate.
HTML tiene dos elementos para generar imágenes. El primero se puede comparar con una estrella pop internacional como Madonna. Es img. Y el segundo es como una nueva banda, conocida solo en círculos estrechos de amantes de la música. Este es un elemento picture.El elemento pictureapareció en HTML mucho más tarde que img. El objetivo principal de este nuevo elemento es permitir que los desarrolladores descarguen varios recursos gráficos dependiendo de la resolución de la pantalla o de si el navegador admite un determinado formato gráfico.Así es como se ve el código HTML que usa el elemento picture:<picture>
<source srcset="/images/cereal-box.webp" type="image/webp" />
<source srcset="/images/cereal-box.jp2" type="image/jp2" />
<img src="/images/cereal-box.jxr" type="image/vnd.ms-photo" />
</picture>
Un elemento picturepuede incluir muchos elementos secundarios sourcey un elemento img. El navegador analiza secuencialmente estos elementos, seleccionar, en base a los atributos type(s media), uno de ellos que pueden utilizarlo. Cuando se encuentra dicho elemento, el navegador descubre la dirección de la imagen usando el atributo srcsety luego muestra esta imagen usando el elemento img.El atributo srcsettiene capacidades mucho mayores que el habitual src, pero, afortunadamente, podemos considerarlo como un análogo src. En general, los elementos sourceson algo así como configuraciones que corresponden a diferentes imágenes. Se imgincluye la imagen que mejor coincide con el entorno en el que se ve la página.En Chrome, por ejemplo, después de procesar el marcado anterior, el navegador llegará a algo más o menos equivalente al siguiente código:<picture>
<img src="/images/cereal-box.webp" />
</picture>
El uso de un conjunto de elementos consecutivos sourcesignifica que al menos uno de ellos será adecuado en cada navegador. Entonces, la mayoría de los navegadores usan una imagen webp, Safari cargará una imagen jp2, es decir, una imagen jxr.Es apropiado recordar que Internet Explorer no admite el elemento picture. Este artículo es demasiado nuevo para este navegador. Pero, a pesar de esto, el fragmento de marcado anterior en IE funcionará como se esperaba.El hecho es que cuando el navegador se topa con un elemento desconocido para él, lo considera como un elemento div. Como resultado, al analizar nuestro código, IE ve muchos elementos div, así como una etiqueta<img>que contiene la ruta a la imagen jxr. Y resulta que este es el formato que admite Internet Explorer.Alternativa simplificada
El fragmento de código anterior es extremadamente bueno porque le permite usar formatos gráficos modernos en todos los navegadores actuales. Pero el uso de dicho código se basa en la suposición de la existencia de esas imágenes a las que tiene enlaces.Si crea tales imágenes usted mismo, debe invertir mucho trabajo manual en ellas. Si los genera automáticamente, esto puede aumentar significativamente el tiempo de construcción del proyecto. El procesamiento de gráficos, como saben, se convierte en un proceso muy lento cuando se trata de muchas imágenes.Solo muy pocos visitantes de mi blog usan Internet Explorer (en los últimos 7 días solo 3 personas con IE intentaron verlo, lo que representó el 0.02% del tráfico). Por lo tanto, decidí usar una versión simplificada de la solución anterior:<picture>
<source srcset="/images/cereal-box.webp" />
<img src="/images/cereal-box.jpg" />
</picture>
Doy una imagen webp compacta a los navegadores que admiten este formato (Chrome, Firefox, Edge), y a los navegadores que no admiten este formato (IE, Safari), ofrezco un legado del pasado: una imagen jpeg.Desde mi punto de vista, este es un ejemplo de mejora progresiva. El proyecto permanece operativo en navegadores antiguos, aunque la carga de imágenes lleva más tiempo. Este es un compromiso que me conviene. (Es cierto, espero que el soporte de WebP aparezca pronto también en los navegadores de Apple).Comprobando el estado de la solución
Las herramientas de desarrollador siempre supondrán que la imagen contiene lo que se escribió originalmente en el atributo de srcetiqueta img. Si marca el elemento usando la pestaña Elements, puede ver que la página está usando una imagen jpg.Para verificar la operatividad de todo esto, es mejor, como me parece, hacer clic derecho en la imagen y seleccionar el elemento …En Chrome en el menú que aparece cuando se ejecuta el comando, el sistema debería ofrecer guardar el archivo con la extensión .webp. Pero en Safari será un archivo jpeg.Para saber exactamente qué archivo gráfico se recibió del servidor cuando se cargó la página, puede consultar la barra de herramientas del desarrollador Network.Convierte archivos de imagen a formato WebP
Google ha creado un conjunto de herramientas destinadas a trabajar con archivos webp. Una de esas herramientas se llama cwebp . Le permite convertir archivos gráficos de otros formatos a WebP.Si está utilizando MacOS, puede instalar este kit de herramientas utilizando Homebrew:brew install webp
En otras plataformas, creo que será necesario descargar el paquete libwebp apropiado del repositorio.Después de instalar las herramientas, puede usarlas así:cwebp -q 80 cereal.png -o cereal.webp
Considere este comando:- La bandera le
-q 80permite configurar la calidad de la imagen. Su valor varía de 1 (peor calidad) a 100 (mejor). Puedes experimentar con diferentes valores. Descubrí que es mejor preguntar algo en la región de 70-80. - El nombre del archivo
cereal.jpges la imagen original que debe convertirse a webp. - La construcción
-o cereal.webpestablece la ruta al archivo de salida.
Nadie quiere perder el tiempo escribiendo dichos comandos manualmente. Afortunadamente, esta tarea puede ser automatizada.Usar formatos de imagen modernos en aplicaciones React
Un componente es una excelente manera de ignorar algunas de las rarezas del elemento <picture>. Yo uso React componentes para esto. En mi opinión, es muy conveniente. Así es como se ve:const ImgWithFallback = ({
src,
fallback,
type = 'image/webp',
...delegated
}) => {
return (
<picture>
<source srcSet={src} type={type} />
<img src={fallback} {...delegated} />
</picture>
);
};
Usar el componente es ImgWithFallbackmuy similar a trabajar con una etiqueta normal img:<ImgWithFallback
src="/images/cereal.webp"
fallback="/images/cereal.png"
alt="A photo showing the expiration date on a box of Lucky Charms"
/>
El uso de formatos gráficos modernos con componentes estilizados.
Si usa bibliotecas styled-componentso emotionpuede estar acostumbrado a un diseño de imagen especial:const FancyImg = styled.img`
whatever: stuff;
`
Lo bueno es que funciona con nuestro componente ImgWithFallback. Puede envolverlo en el contenedor apropiado como cualquier otro componente:const FancyImg = styled(ImgWithFallback)`
whatever: stuff;
`
La razón de la operatividad de este diseño es cómo funciona exactamente la estructura auxiliar styled. Genera una clase y la incrusta en la hoja de estilo del documento. Luego, el nombre de la clase generada se pasa al componente como una propiedad:<ImgWithFallback className="sc-some-generated-thing" />
Delegamos todas las propiedades a la etiqueta secundaria <img>, como resultado, los estilos correctos se aplican a la imagen, como suele suceder. Todo funciona exactamente como cabría esperar.Usando el paquete gatsby-image
Si está utilizando Gatsby, tenga en cuenta que el paquete gatsby-image, cuando se usa normalmente, ya usa muchas optimizaciones de imagen. Esto incluye la conversión de imágenes a formato webp (aunque, para esto, debe habilitar la opción adecuada).El paquete gatsby-imageno pretende ser un reemplazo img. Su uso puede no ser tan simple, sus mecanismos internos pueden generar sorpresas que dificulten la vida del desarrollador.Si está interesado en este paquete, eche un vistazo a su documentación .Contras de WebP
El único inconveniente real de webp que logré encontrar es que es muy inconveniente trabajar con archivos de este formato.La mayoría de los paquetes de imágenes de escritorio aún no lo admiten. Por ejemplo, no puedo abrir archivos webp en Vista previa en MacOS. Esto significa, digamos que si guardo una imagen webp de una página web, ¡no podré verla en mi computadora!La conversión de archivos webp a archivos jpeg es un proceso bastante simple. En Internet puede encontrar muchos servicios gratuitos que realizan dicha conversión. Pero, de nuevo, esto no es tan conveniente como trabajar con formatos gráficos tradicionales. Si su sitio ofrece a los usuarios descargar archivos gráficos de él, puede decidir que no necesita cambiar a webp.Resumen
Realmente me gusta el hecho de que usando webp pude reducir el tamaño de las imágenes en mi blog en aproximadamente un 50%. Además del hecho de que en nuestros tiempos difíciles esto mejora la experiencia del usuario de trabajar con él, también espero que esto me permita ahorrar un poco en el pago del tráfico.Por supuesto, la idea de convertir manualmente archivos de imagen a formato webp parece poco práctica. Ya estoy estudiando la cuestión de cómo convertir automáticamente archivos jpg y png a este formato. Idealmente, este proceso debería ocurrir completamente desapercibido por el desarrollador, durante el ensamblaje del sitio.Los creadores de proyectos web generalmente no están particularmente interesados en las características del uso de nuevos formatos de imagen. Pero creo que entender este problema es muy útil. Después de todo, usar WebP es probablemente la forma más fácil de reducir el tamaño de su proyecto web en cientos de kilobytes.¡Queridos lectores! ¿Utiliza el formato WebP?