Le web se caractérise généralement par l'utilisation d'images. Avez-vous déjà visité un site Web qui ne contient pas d'images ? Je vous assure que ce n'est pas le cas. Les images sont le contenu multimédia par excellence du web, il est donc important d’apprendre à les gérer pour offrir un site web optimal avec une bonne expérience utilisateur.
Squoosh est un outil open source sécurisé et facile à utiliser créé et maintenu par l'équipe de développement de Google Chrome pour optimiser les images en réduisant leur poids mais sans perdre en qualité de présentation pour l'utilisateur final.
Nous pouvons accéder à son site officiel où vous pouvez télécharger vos images et, selon votre cas d'utilisation, jouer avec leur poids et leur qualité.
Par exemple, nous chargeons une image au format .png qui pèse 1,62 Mo et après le processus d'optimisation nous pouvons obtenir la même image avec un poids de 154 Ko, une optimisation de 90% rien qu'en utilisant l'outil :
On peut voir la démo de l'exemple pour le vérifier.
Un autre moyen simple de gérer l'optimisation des images consiste à utiliser le chargement différé sur les images qui ne sont pas immédiatement chargées dans la fenêtre d'affichage de l'utilisateur, cela signifie économiser la bande passante du client en évitant de demander des images qui ne sont probablement pas nécessaires.
Regardons un exemple simple :
La dernière image de l'exemple ne sera pas chargée par défaut puisqu'elle a l'attribut chargement="lazy", cela ne la chargera que lorsque l'utilisateur fera défiler, ce qui indiquera au navigateur que l'utilisateur a besoin de l'image, donc le fardeau.
Comme vous le voyez, c'est un moyen très simple d'économiser de la bande passante et de manière native avec du HTML pur.
Le dépôt officiel Squoosh est le suivant :
Squoosh est une application Web de compression d'images qui réduit la taille des images dans de nombreux formats.
Squoosh n'envoie pas votre image à un serveur. Tous les processus de compression d'images localement.
Cependant, Squoosh utilise Google Analytics pour collecter les éléments suivants :
À développer pour Squoosh :
npm install
npm run build
npm run dev
Squoosh est un projet open source qui apprécie toute implication de la communauté. Pour contribuer au projet, suivez le guide de contribution.
L'utilisation d'outils open source pour optimiser les images d'un site Web est très importante pour améliorer ses performances, ce qui, combiné à des fonctionnalités HTML natives telles que le chargement paresseux, conduit à une amélioration significative et extrêmement simple des performances.
Autres articles de ma paternité qui pourraient vous intéresser :
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
