Sur la plupart des sites que j'audite, la première cause de lenteur n'est pas le code. C'est une image. Un portrait exporté en PNG, une capture d'écran jamais recompressée, une bannière chargée trop tôt ou trop tard. Voici les réglages d'images qui comptent vraiment, et un constat honnête : mon propre site n'est pas parfait sur ce point.
1. Toujours déclarer la largeur et la hauteur
C'est le réglage le plus simple et le plus souvent oublié. Avec width et height sur la balise <img>, le navigateur connaît le rapport de proportions de l'image avant de l'avoir téléchargée. Il réserve la place, et le texte autour ne saute pas quand l'image arrive.
<img src="/assets/karting.png" alt="Aperçu du site" width="600" height="340">Sans ces attributs, la page se décale au moment où l'image s'affiche. C'est exactement ce que mesure le CLS (Cumulative Layout Shift), l'un des Core Web Vitals. Le CSS peut ensuite adapter l'image à la largeur disponible (max-width: 100%; height: auto;) : le ratio reste respecté.
Sur mon site, toutes les images ont leurs dimensions déclarées. Ça, c'est fait.
2. Le lazy-loading, mais pas partout
L'attribut loading="lazy" demande au navigateur de ne télécharger l'image que lorsqu'elle approche de l'écran. C'est idéal pour tout ce qui est sous la ligne de flottaison : galeries, captures de projets, portrait en bas de page.
L'erreur classique est de l'appliquer à toutes les images, y compris celle qui apparaît tout en haut. Cette image-là est souvent l'élément qui définit le LCP (Largest Contentful Paint), le moment où la page paraît « chargée ». La différer, c'est ralentir exactement ce que le visiteur attend. La règle que j'applique :
- l'image visible au chargement : pas de
loading="lazy", et si c'est elle le LCP, j'ajoutefetchpriority="high"pour que le navigateur la télécharge en priorité ; - toutes les autres :
loading="lazy".
<img src="/assets/hero.webp" alt="…" width="1200" height="630" fetchpriority="high">3. Le bon format, pas seulement la bonne taille
Le PNG est fait pour les aplats, les logos et les images avec peu de couleurs. Pour une capture d'écran riche ou une photo, il est souvent bien plus lourd que nécessaire. WebP et AVIF compressent beaucoup mieux, à qualité visuelle comparable, et ils sont lus par les navigateurs courants aujourd'hui.
Pour rester prudent avec les navigateurs plus anciens, on utilise <picture> : le navigateur prend le premier format qu'il comprend, et se rabat sur l'image classique sinon.
<picture>
<source srcset="/assets/portrait.avif" type="image/avif">
<source srcset="/assets/portrait.webp" type="image/webp">
<img src="/assets/portrait.jpg" alt="Portrait" width="420" height="420" loading="lazy">
</picture>Pas de JavaScript, pas de bibliothèque : c'est du HTML pur, et ça marche sur un site statique.
4. Servir la bonne taille à chaque écran
Une image de 2000 pixels de large affichée dans un cadre de 400 pixels, c'est du poids inutile, surtout sur mobile. srcset et sizes laissent le navigateur choisir parmi plusieurs versions :
<img src="/assets/projet-800.webp"
srcset="/assets/projet-400.webp 400w, /assets/projet-800.webp 800w, /assets/projet-1600.webp 1600w"
sizes="(max-width: 700px) 100vw, 600px"
alt="…" width="800" height="450" loading="lazy">Il faut produire plusieurs fichiers, ce qui demande un peu de rigueur au moment de l'export. Mais c'est un réglage qui se fait une fois et qui profite à chaque visite.
Ce que je dois encore corriger sur mon propre site
Je vérifie toujours mes propres pages avant de donner des conseils. Et le constat est instructif. Les dimensions sont déclarées, le lazy-loading est en place sous la ligne de flottaison. Mais mes visuels sont encore en PNG : le portrait pèse environ 2,9 Mo, la capture du projet de karting environ 0,8 Mo. C'est trop pour des images affichées en petit. Les convertir en WebP ou AVIF, avec une taille adaptée à leur cadre, est mon prochain chantier sur ce point.
Je le dis parce que c'est exactement ce que je vois chez mes clients : les bases sont souvent posées, et le gain se cache dans le poids des fichiers. Un audit rapide des images suffit généralement à le repérer.
En résumé
Déclarer les dimensions, différer ce qui est hors écran, ne jamais différer l'image principale, choisir un format moderne, servir la bonne taille. Cinq réglages, aucun framework, et un effet direct sur la vitesse perçue et sur les Core Web Vitals.
Si votre site charge lentement et que vous soupçonnez vos images, parlons-en : je peux regarder vos pages et vous dire précisément où sont les kilo-octets inutiles.