Optimisez les images du site : vérifiez la page avant publication

Vérifier d’abord

Commencez par ce que le navigateur télécharge

Les fichiers de design et dossiers médias ne reflètent pas ce que l’utilisateur reçoit. Le navigateur montre l’URL chargée, la taille affichée, la réservation d’espace et la réutilisation d’un gros fichier là où un petit suffirait.

Plan d’image

Planifiez chaque image importante avant conversion

Un plan d’image sépare ce guide des articles sur les convertisseurs. Il définit les besoins de chaque zone : taille, ordre de chargement, solution de secours, rôle des métadonnées, et une vérification finale confirmant l’usage du bon fichier.

Quand le plan indique que des fichiers doivent être mis à jour, utilisez le guide de conversion d’images pour choisir la prochaine étape. Utilisez le Guide JPG vers WebP pour le travail WebP normal et le guide AVIF uniquement pour les grandes photos nécessitant plus d’économies.

Tailles d’image

Définissez des tailles claires pour chaque zone d’image

Les images responsives fonctionnent uniquement si le HTML correspond à la mise en page. Mesurez la zone, choisissez quelques largeurs utiles, réservez le ratio et évitez d’envoyer un original volumineux juste parce qu’il existe.

Contrôle simple : si une carte de 360 px télécharge un fichier de 2400 px, la compression n’est pas le problème principal. La page a besoin d’une version plus petite ou le HTML pointe vers un mauvais fichier.

Ordre de chargement

Chargez volontairement la première image

L’image qui compose le premier écran nécessite une règle différente des images plus bas sur la page. Identifiez l’image probable du LCP, évitez son chargement différé par erreur, et gardez les images inférieures silencieuses jusqu’à leur besoin.

1. 1

   Nommez l’image LCP

   Si la première image significative est probablement le Largest Contentful Paint, ne la chargez pas en différé par erreur.

2. 2

   Gardez les images inférieures discrètes

   Les images sous le premier viewport doivent généralement utiliser le chargement différé et le décodage asynchrone.

3. 3

   Vérifier les arrière-plans CSS

   Un arrière-plan recadré peut toujours télécharger un fichier volumineux. Utilisez un fichier de taille adaptée à la zone visible.

4. 4

   Vérifier les requêtes répétées

   Une petite image de carte devient coûteuse lorsque le même fichier surdimensionné est répété des dizaines de fois.

HTML

Utilisez un HTML responsive pour la zone mesurée

Pour les images importantes, clarifiez le choix du navigateur. L’exemple montre options de largeur, tailles, dimensions fixes et solution de secours. Adaptez le chargement selon la zone, pas par habitude.

<picture>
  <source
    type="image/avif"
    srcset="/images/article/product-640.avif 640w,
            /images/article/product-960.avif 960w,
            /images/article/product-1280.avif 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <source
    type="image/webp"
    srcset="/images/article/product-640.webp 640w,
            /images/article/product-960.webp 960w,
            /images/article/product-1280.webp 1280w"
    sizes="(max-width: 768px) 100vw, 720px" />
  <img
    src="/images/article/product-960.jpg"
    alt="Capture d’écran du tableau de bord montrant le flux d’upload"
    width="960"
    height="540"
    loading="lazy"
    decoding="async" />
</picture>

Recherche et partage

Faites que images, texte alternatif et métadonnées racontent une même histoire

Le SEO image ne se limite pas aux mots-clés. L’image visible, le texte proche, le texte alternatif utile, les balises Open Graph et les liens JSON-LD doivent décrire clairement la même page. Les images décoratives restent décoratives.

Quand le contrôle détecte des aperçus sociaux faibles, poursuivez avec le Guide des images Open Graph. Si les schémas et méta-tags posent problème, utilisez le Guide des métadonnées Blazor pour garder JSON-LD et métadonnées cohérents.

Étapes

Un contrôle simple des images pour chaque page

1. 1

   Ouvrir la page réelle

   Commencez par l’URL actuelle, pas le dossier d’assets. Notez les images réellement chargées.

2. 2

   Élaborez le plan d’image

   Pour chaque image importante, notez largeur cible, ratio, ordre de chargement, solution de secours et rôle des métadonnées.

3. 3

   Convertir uniquement ce qui a changé

   Utilisez les outils de conversion uniquement pour les fichiers identifiés par le contrôle, au lieu de réexporter tout le dossier média.

4. 4

   Mettez à jour HTML et métadonnées

   Pointez srcset, sizes, dimensions, Open Graph et liens JSON-LD vers les fichiers préparés.

5. 5

   Vérifiez la sortie du navigateur

   Vérifiez la page, les requêtes réseau, les métadonnées sociales, les données structurées et la mise en page mobile.

6. 6

   Conservez la règle pour la prochaine fois

   Documentez les décisions d’image pour éviter les suppositions lors des futures mises à jour.

Liste de contrôle

Liste de contrôle des images avant publication

Utilisez cette liste avant la mise en ligne d’un article, d’une page d’accueil ou produit. Elle détecte des problèmes que la conversion seule ne résout pas.