1. Introducción
La web por lo general se caracteriza por el uso de imágenes. ¿Alguna vez visitaste un sitio web que no tenga imágenes? Te aseguro que no es el caso. Las imágenes son el contenido multimedia por excelencia de la web por lo que aprender a gestionarlas es importante para brindar una web óptima y con una buena experiencia de usuario.
2. ¿Qué es Squoosh?
Squoosh es una herramienta open source segura y sencilla de usar creada y mantenida por el equipo de desarrollo de Google Chrome para optimizar imágenes reduciendo el peso de las mismas pero sin perder calidad de presentación para el usuario final.
Podemos acceder a su web oficial donde podrás cargar tus imágenes y dependiendo al caso de uso que tengas ir jugando con el peso y la calidad de las mismas.
Por ejemplo, cargamos una imagen en formato .png que pesa 1.62Mb y luego del proceso de optimizado podemos obtener la misma imagen con un peso de 154Kb, una optimización del 90% con solo usar la herramienta:
Podemos ver la demo del ejemplo para comprobarlo.
3. Lazy loading
Otra manera simple de gestionar la optimización de imágenes es usando lazy loading o carga perezosa en las imágenes que no son inmediatamente cargadas en el viewport del usuario, esto significa un ahorro en el ancho de banda del cliente evitando solicitar imágenes que probablemente no necesita usar.
Veamos un ejemplo sencillo:
La última imagen del ejemplo no se cargará por defecto puesto que tiene el atributo loading="lazy", esto hará que solo se cargue cuando el usuario haga scroll lo que le indicará al navegador es el usuario necesita la imagen, entonces la carga.
Como ves es una manera muy sencilla de ahorrar ancho de banda y manera nativa con HTML puro.
4. Referencias
El repositorio oficial de Squoosh es el siguiente:
Make images smaller using best-in-class codecs, right in the browser.
Squoosh is an image compression web app that reduces image sizes through numerous formats.
Squoosh does not send your image to a server. All image compression processes locally.
However, Squoosh utilizes Google Analytics to collect the following:
- Basic visitor data.
- The before and after image size value.
- If Squoosh PWA, the type of Squoosh installation.
- If Squoosh PWA, the installation time and date.
To develop for Squoosh:
- Clone the repository
- To install node packages, run:
npm install
- Then build the app by running:
npm run build
- After building, start the development server by running:
npm run dev
Squoosh is an open-source project that appreciates all community involvement. To contribute to the project, follow the contribute guide.
5. Conclusiones
Usar herramientas open source para la optimización de imágenes de una web es muy importante para mejorar el rendimiento de la misma que combinadas con características nativas de HTML como lazy loading conlleva a una mejora significativa y sumamente sencilla de la performance.
Otros post de mi autoría que te pueden interesar:
Source link
lol
