Encoder les images de manière efficace

La section "Opportunités" de votre rapport Lighthouse répertorie toutes les images non optimisées, avec des économies potentielles en kibioctets (Kio). Optimisez ces images pour que la page se charge plus rapidement et consomme moins de données:

Capture d'écran de l'audit d'encodage des images avec efficacité de Lighthouse

Comment Lighthouse signale les images comme optimisables

Lighthouse collecte toutes les images JPEG ou BMP sur la page, définit le niveau de compression de chaque image sur 85, puis compare la version d'origine à la version compressée. Si les économies potentielles sont d'au moins 4 Kio, Lighthouse indique que l'image peut être optimisée.

Optimiser les images

Vous pouvez prendre de nombreuses mesures pour optimiser vos images, y compris les suivantes:

Optimiser des images à l'aide d'outils IUG

Une autre approche consiste à exécuter vos images via un optimiseur que vous installez sur votre ordinateur et que vous exécutez en tant qu'IUG. Par exemple, avec ImageOptim, vous glissez-déposez des images dans son interface utilisateur, puis les compressent automatiquement sans nuire sensiblement à la qualité. Si vous exécutez un site de petite taille et que vous pouvez gérer manuellement l'optimisation de toutes les images, cette option est probablement suffisante.

Squoosh est une autre option. Squoosh est géré par l'équipe Google Web DevRel.

Conseils spécifiques à la pile

Drupal

Pensez à utiliser un module qui optimise et réduit automatiquement la taille des images importées sur le site, tout en préservant la qualité. Veillez également à utiliser les styles d'image responsifs intégrés de Drupal (disponibles dans Drupal 8 et versions ultérieures) pour toutes les images affichées sur le site.

Joomla

Envisagez d'utiliser un plug-in d'optimisation d'images qui compresse vos images tout en préservant leur qualité.

Magento

Pensez à utiliser une extension Magento tierce qui optimise les images.

WordPress

Pensez à utiliser un plug-in WordPress d'optimisation d'images qui compresse vos images tout en conservant leur qualité.

Ressources