Sur la majorité des sites actuels, les images constituent la principale source de données transférées. Très loin devant le HTML, le CSS ou même le JavaScript.

À ce poids s'ajoute un facteur souvent sous-estimé : le nombre de requêtes HTTP nécessaires pour charger ces médias.

Quelques constats factuels :

• une image = un fichier à transférer, parfois décliné en plusieurs variantes ;
• une galerie ou un carrousel = une multiplication rapide des requêtes ;
• chaque requête sollicite le réseau, le serveur et le terminal utilisateur ;
• sur mobile, l'impact est immédiat : latence accrue, consommation énergétique, batterie sollicitée.

Dans une démarche d'éco-conception, l'image n'est jamais neutre. Elle doit être justifiée, maîtrisée, et parfois supprimée.

Cette image est-elle réellement nécessaire ?

La question doit être posée dès la conception, pas en phase de finition.

Image informative vs image décorative

Image informative : elle apporte une information que le texte seul ne permet pas de transmettre — schéma, photo produit, capture d'écran, illustration explicative.

Image décorative : elle sert principalement à habiller la page, sans valeur informationnelle directe.

Dans une logique d'éco-conception :

• les images informatives sont légitimes, mais doivent être strictement dimensionnées et optimisées ;
• les images décoratives doivent être interrogées, voire éliminées.

Un fond illustré pleine largeur, une texture bitmap répétée, un visuel d'ambiance redondant : coût élevé, valeur faible.

Alternatives graphiques plus sobres

Réduire le recours aux images ne signifie pas renoncer à toute esthétique. Cela implique de changer de leviers graphiques.

La typographie comme élément visuel

Une hiérarchie typographique solide permet souvent de remplacer un bandeau illustré, une image de titre ou un visuel d'introduction.

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.1;
  max-width: 20ch;
}

Avantages : aucun transfert d'image, lisibilité renforcée, accessibilité améliorée.

SVG plutôt que bitmap

Lorsqu'une illustration est nécessaire, préférer le SVG pour les pictogrammes, schémas simples et illustrations vectorielles.

<svg aria-hidden="true" viewBox="0 0 24 24">
  <path d="..." />
</svg>

CSS plutôt que fichiers image

Dégradés, séparateurs, formes simples, ombres légères : CSS natif plutôt que PNG ou JPEG.

.section {
  background: linear-gradient(180deg, #f5f5f5, #ffffff);
}

Choisir le bon format

Le choix du format a un impact direct sur le poids des fichiers.

Recommandations :

• AVIF offre le meilleur rapport qualité/poids (prioritaire).
• WebP est un bon compromis, largement supporté.
• PNG uniquement si transparence indispensable.
• SVG pour tout ce qui est vectoriel.

Optimisation en amont

L'éco-conception commence avant l'import dans le CMS.

• Dimensions réelles adaptées à l'affichage (pas de 4000 px pour un affichage de 800 px).
• Compression maîtrisée avant upload.
• Aucun média "au cas où".

Outils recommandés :

• Squoosh (web, gratuit, tous formats)
• ImageOptim (macOS)
• TinyPNG / TinyJPG (web)
• SVGO pour les SVG

Niveaux de compression recommandés :

• JPEG / WebP : qualité 75-85 % (invisible à l'œil)
• AVIF : qualité 60-75 % (très efficace)
• PNG : compression sans perte (optimiser avec des outils dédiés)

Images responsives et formats modernes

Pour servir le bon format au bon navigateur :

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg"
       alt="Description pertinente"
       width="800"
       height="450"
       loading="lazy"
       decoding="async">
</picture>

Les attributs width et height sont essentiels : ils permettent au navigateur de réserver l'espace et d'éviter les décalages de mise en page (CLS).

Chargement intelligent

Toutes les images n'ont pas besoin d'être chargées immédiatement.

Lazy loading

Les images situées hors de l'écran initial peuvent être chargées à la demande :

<img src="photo.webp"
     loading="lazy"
     decoding="async"
     alt="Description">

Priorisation de l'image principale

Pour l'image critique (souvent le hero), indiquer explicitement la priorité :

<img src="hero.webp"
     fetchpriority="high"
     decoding="async"
     alt="Description de l'image principale">

Attention : ne jamais appliquer loading="lazy" à l'image LCP.

Réduction du nombre de requêtes

Limiter les carrousels, galeries lourdes et icônes bitmap.

Pour les icônes, utiliser un sprite SVG :

<!-- Définition (une seule fois, cachée) -->
<svg style="display:none">
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="..." />
  </symbol>
  <symbol id="icon-arrow" viewBox="0 0 24 24">
    <path d="..." />
  </symbol>
</svg>

<!-- Utilisation (sans requête HTTP) -->
<svg><use href="#icon-check"></use></svg>
<svg><use href="#icon-arrow"></use></svg>

Cas WordPress : maîtriser les tailles générées

Par défaut, WordPress génère de nombreuses tailles d'images à chaque upload. Chaque taille supplémentaire implique un fichier stocké, une variante dans le srcset, du poids potentiellement inutile.

Limiter aux tailles réellement utilisées

// Définir uniquement les tailles nécessaires
add_theme_support('post-thumbnails');

add_image_size('hero', 1600, 900, true);
add_image_size('content', 800, 0, false);
add_image_size('thumb', 400, 0, false);

Désactiver les tailles par défaut inutiles

add_filter('intermediate_image_sizes_advanced', function ($sizes) {
    unset($sizes['medium_large']);
    unset($sizes['1536x1536']);
    unset($sizes['2048x2048']);
    return $sizes;
});

Contrôler le srcset

Limiter la largeur maximale des variantes :

add_filter('max_srcset_image_width', function () {
    return 1600;
});

Formats modernes dans WordPress

• WebP est supporté nativement depuis WordPress 5.8.
• AVIF nécessite une configuration serveur spécifique.
• Préférer la conversion en amont plutôt que des plugins lourds.

Discipline éditoriale

Le principal risque dans WordPress n'est pas technique mais éditorial : images ajoutées sans réflexion, médias jamais supprimés, accumulation progressive de dette.

Bonnes pratiques :

• une image = une intention claire,
• pas d'image "par défaut" sur les articles,
• audit régulier de la médiathèque.

Impact sur le SEO et les Core Web Vitals

Les images influencent directement le référencement naturel.

LCP (Largest Contentful Paint)

Dans la plupart des pages, l'élément LCP est une image. Si elle est trop lourde ou mal priorisée, le score chute.

Points de vigilance :

• Ne pas appliquer loading="lazy" à l'image LCP.
• Utiliser fetchpriority="high" sur l'image principale.
• Compresser agressivement l'image hero.

CLS (Cumulative Layout Shift)

Les images sans dimensions provoquent des décalages de mise en page. Toujours définir width et height dans le HTML.

Accessibilité et SEO sémantique

• Attribut alt descriptif et utile (pas de bourrage de mots-clés).
• Noms de fichiers explicites (facade-maison.webp plutôt que IMG_2847.webp).
• Ne jamais enfermer de texte stratégique dans une image.

Crawl budget

Chaque image est une URL crawlable. Réduire le nombre d'images inutiles permet un crawl plus efficace, une indexation plus stable et une meilleure lisibilité globale du site.

Check-list projet

Conception

• Chaque image a un rôle informationnel clair
• Aucune image décorative non justifiée
• Alternatives envisagées (typo, CSS, SVG)

Design

• Dimensions d'affichage définies dès la maquette
• Pas de visuels pleine largeur systématiques
• Pictogrammes en SVG

Production des médias

• Images exportées aux dimensions réelles
• Compression effectuée avant upload
• Formats modernes utilisés (AVIF / WebP)

Intégration front-end

• Attributs width et height présents
• loading="lazy" hors images critiques
• fetchpriority="high" sur l'image LCP
• Balise <picture> pour les formats modernes

CMS / Exploitation

• Tailles WordPress maîtrisées
• srcset contrôlé
• Audit périodique de la médiathèque

Conclusion

Moins d'images inutiles, ce n'est pas moins de design. C'est plus de sens, plus d'efficacité, et un web plus sobre.

Moins de tailles générées, moins de requêtes : c'est à la fois bon pour la performance, bon pour le SEO, et cohérent avec une démarche d'éco-conception.

Pour aller plus loin

• Qu'est-ce que l'éco-conception web — les principes fondamentaux.
• Éco-concevoir un site WordPress — guide pratique complet.
• Typographie et éco-conception — un autre levier graphique sous-estimé.