En quoi cela vous concerne-t-il ?
Les images non compressées alourdissent vos pages avec des octets inutiles. Étant donné que les images peuvent être candidates au Largest Contentful Paint (LCP), ces octets inutiles peuvent augmenter la durée de chargement des ressources de l'image, ce qui peut entraîner des temps LCP plus longs.
La photo de droite est 40% plus petite que celle de gauche, mais elle serait probablement identique pour l'utilisateur moyen.
|
|
|
|---|
Mesurer
Exécutez Lighthouse pour vérifier les possibilités d'améliorer le chargement des pages en compressant les images. Ces possibilités sont listées sous "Encoder les images de manière efficace" :
Imagemin
Imagemin est un excellent choix pour la compression d'images, car il est compatible avec une grande variété de formats d'image et s'intègre facilement aux scripts et outils de compilation. Imagemin est disponible en tant que CLI et module npm. En général, le module npm est le meilleur choix, car il offre plus d'options de configuration, mais la CLI peut être une alternative intéressante si vous souhaitez essayer Imagemin sans toucher au code.
Plug-ins
Imagemin est basé sur des "plug-ins". Un plug-in est un package npm qui compresse un format d'image particulier (par exemple, "mozjpeg" compresse les JPEG). Les formats d'image courants peuvent avoir plusieurs plug-ins au choix.
La chose la plus importante à prendre en compte lors du choix d'un plug-in est de savoir s'il est "avec pertes" ou "sans pertes". Dans la compression sans perte, aucune donnée n'est perdue. La compression avec pertes réduit la taille du fichier, mais au détriment de la qualité de l'image. Si un plug-in ne mentionne pas s'il est "avec pertes" ou "sans pertes", vous pouvez le savoir grâce à son API : si vous pouvez spécifier la qualité de l'image de sortie, il est "avec pertes".
Pour la plupart des utilisateurs, les plug-ins avec pertes sont le meilleur choix. Ils offrent des économies de taille de fichier beaucoup plus importantes, et vous pouvez personnaliser les niveaux de compression en fonction de vos besoins. Le tableau ci-dessous répertorie les plug-ins Imagemin courants. Ce ne sont pas les seuls plug-ins disponibles, mais ils seraient tous de bons choix pour votre projet.
| Format d'image | Plug-in(s) avec pertes | Plug-in(s) sans pertes |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | imagemin-gifsicle |
| SVG | imagemin-svgo | |
| WebP | imagemin-webp | imagemin-webp |
CLI Imagemin
La CLI Imagemin fonctionne avec cinq plug-ins différents : imagemin-gifsicle, imagemin-jpegtran, imagemin-optipng, imagemin-pngquant et imagemin-svgo. Imagemin utilise le plug-in approprié en fonction du format d'image de l'entrée.
Pour compresser les images du répertoire "images/" et les enregistrer dans le même répertoire, exécutez la commande suivante (remplace les fichiers d'origine) :
$ imagemin images/* --out-dir=images
Module npm Imagemin
Si vous souhaitez utiliser Imagemin avec un bundler, vérifiez si le bundler choisi dispose d'un plug-in. Par exemple, webpack est un bundler courant qui est parfaitement compatible avec Imagemin. Pour en savoir plus sur l'utilisation d'Imagemin avec webpack, consultez cet atelier de programmation.
Vous pouvez également utiliser Imagemin seul en tant que script Node. Ce code utilise le plug-in "imagemin-mozjpeg" pour compresser les fichiers JPEG avec une qualité de 50 ("0" étant la pire et "100" la meilleure) :
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
(async() => {
const files = await imagemin(
['source_dir/*.jpg', 'another_dir/*.jpg'],
{
destination: 'destination_dir',
plugins: [imageminMozjpeg({quality: 50})]
}
);
console.log(files);
})();