En quoi cela vous concerne-t-il ?
Les images non compressées surchargent vos pages d'octets inutiles. Étant donné que les images peuvent être candidatures au LCP (Largest Contentful Paint), ces octets inutiles peuvent augmenter la durée de chargement des ressources de l'image, ce qui peut entraîner des délais LCP plus longs.
La photo de droite est 40% plus petite que celle de gauche, mais elle sera probablement identique à celle de l'utilisateur moyen.
|
|
|
|---|
Mesurer
Exécutez Lighthouse pour savoir comment améliorer le chargement des pages en compressant les images. Les opportunités suivantes sont indiquées dans la section "Encoder les images efficacement" :
Min. d'image
Imagemin est un excellent choix pour la compression d'image, car il accepte de nombreux formats d'image, et s'intègre facilement aux scripts de compilation outils. Imagemin est disponible sous forme CLI et 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 bonne alternative si vous voulez essayer Imagemin sans toucher au code.
Plug-ins
Imagemin repose sur des "plug-ins". Un plug-in est un package npm qui compresse format d'image spécifique (par exemple, "mozjpeg" compresse des JPEG). Formats d'image populaires peut proposer plusieurs plug-ins.
La chose la plus importante à prendre en compte lors du choix d'un plug-in est de savoir s'il "avec perte" ou « sans perte ». Avec la compression sans perte, aucune donnée n'est perdue. Avec pertes la compression réduit la taille du fichier, mais peut réduire qualité. Si un plug-in n'indique pas s'il s'agit d'un plug-in "avec perte" ou « sans perte », vous grâce à son API: si vous spécifiez la qualité d'image de la sortie, est « avec perte ».
Pour la plupart des utilisateurs, les plug-ins avec pertes constituent le meilleur choix. Ils offrent beaucoup de réduction de la taille des fichiers, et vous pouvez personnaliser les niveaux de compression pour qu'ils répondent vos besoins. Le tableau ci-dessous liste les plug-ins Imagemin les plus courants. Ce ne sont pas les seuls plug-ins disponibles, mais ils seraient tous de bons choix pour votre projet.
| Format d'image | Plug-ins avec perte | Plug-in(s) sans perte |
|---|---|---|
| JPEG | imagemin-mozjpeg | imagemin-jpegtran |
| PNG | imagemin-pngquant | imagemin-optipng |
| GIF | imagemin-giflossy | gifsicle-imagemin |
| 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 adapté au format d'image du saisie.
Pour compresser les images dans le composant "images/" et les enregistrer dans le même répertoire, exécutez la commande suivante (en écrasant les fichiers d'origine):
$ imagemin images/* --out-dir=images
Module npm Imagemin
Si vous utilisez l'un de ces outils, les ateliers de programmation pour Imagemin webpack, gulp, ou un grognement.
Vous pouvez également utiliser Imagemin seul en tant que script Node. Ce code utilise l'en-tête "imagemin-mozjpeg" pour compresser les fichiers JPEG sur 50 ("0" correspond à la moins bonne ; "100" à la meilleure note):
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);
})();