Partez de l’image que le lecteur voit réellement
Examinez les dimensions affichées, la ressource sélectionnée, les octets transférés et le rôle de l’image dans la page. Un schéma aux petits libellés demande un traitement différent d’une photographie. Un gros fichier source n’a pas à être servi tel quel à chaque visiteur.
Identifiez l’élément Largest Contentful Paint réel dans une trace. Il peut s’agir d’un texte plutôt que d’une image. Optimiser une vignette située sous la ligne de flottaison ne corrigera pas une feuille de style bloquante sans rapport.
Choisissez le format et la qualité fichier par fichier
Comparez AVIF et WebP à votre JPEG ou PNG actuel aux tailles réellement utilisées. Vérifiez les contours, les dégradés, les tons chair, la transparence et le texte. Le gain de poids dépend du contenu et des réglages de l’encodeur ; un pourcentage universel n’est pas un objectif de qualité utile.
Utilisez le SVG pour les schémas et icônes qui s’y prêtent, afin que les libellés et les traits restent nets, tout en gardant une version matricielle pour les plateformes de partage si nécessaire. Les explications essentielles doivent aussi figurer en HTML. N’appelez pas « sans perte » une image compressée avec perte au motif qu’elle obtient un score de similarité perceptuelle élevé.
Écrivez un balisage responsive fidèle à la mise en page
L’exemple suivant suppose une image pleine largeur dans une colonne de contenu de 48rem avec des marges de 1rem sur petit écran. Adaptez sizes à votre mise en page réelle. Le navigateur utilise les largeurs candidates, la taille de l’emplacement et les caractéristiques de l’appareil pour choisir une ressource.
<picture>
<source type="image/avif"
srcset="/media/diagram-480.avif 480w,
/media/diagram-960.avif 960w,
/media/diagram-1440.avif 1440w"
sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem">
<img src="/media/diagram-960.webp"
srcset="/media/diagram-480.webp 480w,
/media/diagram-960.webp 960w,
/media/diagram-1440.webp 1440w"
sizes="(max-width: 50rem) calc(100vw - 2rem), 48rem"
width="1440" height="900"
loading="eager" fetchpriority="high" decoding="async"
alt="Public requests pass through a cache before the origin">
</picture>Pour une image secondaire hors écran, utilisez plutôt le chargement différé et une priorité de téléchargement normale. La largeur et la hauteur réservent le ratio d’aspect ; le CSS peut toujours rendre l’image fluide. Gardez le même ratio d’aspect pour toutes les variantes, sauf si vous faites volontairement de la direction artistique.
Utilisez la chaîne d’images de WordPress dès que possible
Pour les images de la médiathèque, utilisez les fonctions d’images jointes de WordPress afin que les tailles disponibles et les attributs responsives soient générés à partir des métadonnées du fichier joint. Vérifiez le résultat : un balisage personnalisé ou des variantes manquantes peuvent court-circuiter ces avantages. Les illustrations du thème peuvent utiliser un jeu de tailles explicite et versionné.
Le texte alternatif doit transmettre l’information qu’apporte l’image. Les reprises décoratives du titre voisin peuvent avoir un attribut alt vide. Ne transformez pas le texte alternatif en liste de mots-clés ciblés.
Validez la diffusion et le comportement du cache
- Vérifiez les URL d’images sélectionnées sur écrans étroits et larges, y compris à haute densité de pixels.
- Assurez-vous que l’image principale est découvrable sans attendre le JavaScript.
- Contrôlez la qualité de l’image à sa taille d’affichage réelle, pas seulement dans un petit aperçu.
- Confirmez que les médias hors écran ne dominent pas le transfert initial.
- Si un CDN négocie les formats, vérifiez que les clés de cache distinguent correctement les réponses.
- Versionnez les fichiers modifiés ou purgez les caches concernés pour que les lecteurs reçoivent la mise à jour.
Questions fréquentes
Avez-vous besoin d’un CDN d’images ?
Un CDN avec transformations peut simplifier une médiathèque volumineuse qui change souvent. Un petit blog peut très bien fonctionner avec quelques variantes générées et un cache statique ordinaire. Comparez le coût récurrent, la complexité d’exploitation et le gain de transfert réel avant d’ajouter un service.
L’image principale du hero doit-elle être chargée en différé ?
En général non, si elle est visible immédiatement ou si c’est l’élément LCP de la page. Rendez son URL découvrable dans le HTML initial, fournissez des candidates responsives adaptées et envisagez une priorité de téléchargement élevée de façon sélective. Chargez en différé les images secondaires situées sous la zone visible initiale.
AVIF est-il toujours meilleur que WebP ?
Aucun format ni réglage de qualité ne l’emporte pour toutes les images. Comparez le poids obtenu et la qualité visuelle sur le fichier réel, y compris les libellés fins, les dégradés et la transparence. Gardez une solution de repli adaptée et vérifiez le fichier choisi par le navigateur.
Pourquoi indiquer largeur et hauteur si la mise en page est responsive ?
Ces attributs établissent un ratio d’aspect intrinsèque pour que le navigateur réserve l’espace avant l’arrivée de l’image. Le CSS peut toujours la rendre fluide. Indiquez des dimensions correctes et des sources responsives, puis contrôlez les décalages dans la mise en page réelle. Le guide de vitesse WordPress replace la diffusion des images dans l’ensemble de la démarche de performance.
Sources et lectures complémentaires
Pour aller plus loin
Poursuivez avec le diagnostic des Core Web Vitals ou la checklist complète de performance.
Leave a Reply