Une photo sortie d’un téléphone peut être beaucoup plus grande que l’espace qu’elle occupe sur une page web. La convertir dans un autre format aide parfois, mais la première économie consiste à envoyer des dimensions adaptées à l’affichage.
Ce guide propose un ordre de travail : mesurer, redimensionner, comparer les formats, puis contrôler le chargement. Les exemples HTML sont des modèles à adapter aux fichiers et à la largeur réelle de votre site.
Commencer par les images qui pèsent le plus
Ouvrez une page représentative et consultez l’onglet Réseau des outils de développement du navigateur. Filtrez les images, rechargez et relevez leur taille transférée. Choisissez en priorité les fichiers lourds visibles en haut de page et ceux présents sur beaucoup de pages.
Préservez les originaux dans un dossier séparé. Vous pourrez refaire un export si une compression abîme les détails. Donnez aux variantes des noms lisibles, par exemple bureau-640.webp et bureau-1280.webp.
Notez avant modification le fichier, ses dimensions, son poids et son emplacement. Cette petite liste rend les résultats comparables et évite d’optimiser une icône minuscule pendant qu’une grande photo reste inchangée.
Exporter des dimensions utiles
Une image affichée dans une colonne de 700 pixels n’a généralement pas besoin de ses 6 000 pixels d’origine. Prévoyez toutefois les écrans à forte densité : une variante plus large peut être utile pour garder une image nette.
Pour un article, commencez avec deux ou trois variantes correspondant à votre mise en page. Comparez-les sur téléphone et ordinateur. Les dimensions adaptées dépendent du cadre, du recadrage et de la densité de l’écran ; il n’existe pas une largeur universelle à appliquer à toutes les images.
Recadrez avant la compression. Une grande zone que le visiteur ne voit jamais consomme du poids sans améliorer le résultat.
Comparer WebP, AVIF et les autres formats
Le guide des formats de MDN décrit WebP et AVIF comme des formats modernes intéressants pour les images matricielles. Le meilleur choix pour votre fichier reste celui qui conserve les détails nécessaires au poids le plus faible.
| Contenu | Premier essai à faire |
|---|---|
| Photo | Comparer WebP et AVIF au même rendu visuel |
| Capture avec petits caractères | Surveiller les contours et la lisibilité |
| Image avec transparence | Vérifier le fond et les bords après export |
| Logo vectoriel existant | Conserver un SVG adapté au web |
Les pourcentages de qualité ne sont pas directement comparables entre encodeurs. Une valeur de 80 ne signifie pas la même chose dans chaque outil. Inspectez à la taille d’affichage normale, puis agrandissez une zone contenant du texte ou des détails fins.
Laisser le navigateur choisir une variante
Les attributs srcset et sizes, expliqués dans le guide des images adaptatives, permettent de proposer plusieurs largeurs. Voici un exemple pour une colonne qui atteint 800 pixels :
<img
src="/images/bureau-1280.webp"
srcset="/images/bureau-640.webp 640w,
/images/bureau-1280.webp 1280w"
sizes="(max-width: 840px) calc(100vw - 32px), 800px"
width="1280"
height="853"
alt="Un bureau avec un ordinateur portable et un carnet"
>Les fichiers doivent exister et conserver les mêmes proportions. La valeur de sizes doit représenter la largeur réellement disponible, marges comprises. Si votre contenu est plus étroit, adaptez cette valeur.
Ajoutez également une règle CSS appropriée, par exemple max-width: 100%; height: auto;. Les attributs width et height indiquent les proportions et aident le navigateur à réserver l’espace avant l’arrivée de l’image.
Différer les images situées plus bas
Pour une illustration après plusieurs paragraphes, loading="lazy" peut différer son chargement. En revanche, évitez cette option sur une grande image visible dès l’ouverture et susceptible de déterminer le LCP. Ce point est détaillé dans les guides MDN sur le chargement différé et le LCP des images.
Ne mettez pas toutes les images en priorité élevée. Commencez par laisser le navigateur travailler, puis intervenez sur une ressource importante si une mesure révèle un retard.
Vérifier après la mise en ligne
Rechargez avec le cache désactivé, comparez les tailles transférées et contrôlez le fichier réellement choisi par le navigateur. Faites ensuite défiler la page sur une petite largeur : images floues, débordements et déplacements du texte sont plus faciles à repérer ainsi.
Vérifiez aussi les textes alternatifs. Décrivez l’information utile de l’image ; une illustration purement décorative peut recevoir un attribut alt vide. Pour comprendre les indicateurs concernés, poursuivez avec notre guide des Core Web Vitals.