Optimiser ses images pour le web : format, taille, chargement

Une photo qui sort d'un smartphone pèse souvent plusieurs mégaoctets. Affichée telle quelle sur un site, elle ralentit la page, consomme des données et fatigue le visiteur. Bonne nouvelle : on peut l'alléger fortement sans perte de qualité visible.

1. Choisir le bon format

• JPEG : adapté aux photos, mais pas le plus léger
• PNG : utile pour les images avec transparence ou les logos, souvent lourd pour les photos
• WebP : un format moderne, pris en charge par les navigateurs actuels, généralement nettement plus léger qu'un JPEG ou un PNG de qualité équivalente
• SVG : idéal pour les logos et les icônes, car il s'adapte à toutes les tailles

2. Adapter les dimensions

Inutile d'envoyer une image de 4 000 pixels de large pour un emplacement de 800 pixels. Redimensionnez-la à la taille d'affichage, avec une marge pour les écrans haute densité.

Mieux : proposer deux ou trois tailles, pour que le téléphone télécharge la petite et l'ordinateur la grande.

3. Régler la compression

Une compression à environ 75-85 % est un bon compromis pour les photos : la différence est rarement visible à l'œil, mais le poids chute.

4. Charger à la demande

Une image située en bas de page n'a pas besoin d'être téléchargée tant que le visiteur ne s'en approche pas. C'est le chargement différé (« lazy loading »).

5. Décrire ses images

Renseignez toujours un texte alternatif : il aide les personnes qui utilisent un lecteur d'écran, et il s'affiche si l'image ne se charge pas.

6. Se passer d'une image quand c'est possible

Le meilleur gain reste de supprimer l'image décorative qui n'apporte rien. Une page plus sobre est aussi plus claire.

Bonne nouvelle pour vos articles de blog

Sur ce blog, les images insérées dans un article sont automatiquement redimensionnées et converties en WebP. Vous n'avez rien à préparer : déposez votre photo, nous nous occupons du reste.

Vous voulez des conseils pour votre site ? Découvrez nos gestes d'éco-conception.

#images #WebP #performance #écoconception

Commentaires

Aucun commentaire pour le moment. Soyez le premier à réagir.

Laisser un commentaire