Formats, compression et critères de qualité
Chaque image source (PNG ou JPEG) est convertie en WebP (qualité 82, compression lossless pour les images avec texte) et AVIF (qualité 60, encodage slow pour maximiser la compression). Le format AVIF réduit la taille de fichier de 40 à 60 % par rapport au WebP pour une qualité perceptuelle équivalente. Les navigateurs qui ne supportent pas AVIF (IE11, Safari < 16) reçoivent le WebP.
Le critère de qualité est calibré par type d’image : les photographies utilisent une qualité inférieure (plus de compression acceptable), les captures d’écran et les images avec texte ou graphiques utilisent une qualité supérieure ou la compression lossless. Un script de classification par type d’image applique le bon paramètre automatiquement.
Prévenir le CLS avec width et height explicites
Le CLS (Cumulative Layout Shift) est causé en grande partie par des images sans dimensions déclarées : le navigateur ne réserve pas d’espace avant le chargement et la mise en page se décale quand l’image arrive. Le pipeline extrait les dimensions réelles de chaque image source et les intègre dans les attributs width et height du tag img. Cette étape est automatique et bloquante : une image sans dimensions connues ne peut pas être publiée.
Les images générées programmatiquement (graphiques, cartes) ont des dimensions fixes définies dans la configuration du générateur. Les images provenant de sources externes (uploads éditoriaux) passent par un outil d’extraction de dimensions avant d’entrer dans le pipeline. Aucune image ne peut contourner cette étape.
Srcset adaptatif et lazy loading
Le pipeline génère des versions redimensionnées de chaque image pour les breakpoints définis (320, 640, 1024, 1280, 1920 px de largeur). L’attribut srcset liste ces versions avec leur largeur en descripteur w. L’attribut sizes définit les règles CSS pour sélectionner la bonne version selon la largeur du viewport.
Le lazy loading (loading=’lazy’) est appliqué à toutes les images sauf la première image de chaque page, qui est l’élément candidat LCP. L’image LCP utilise loading=’eager’ et fetchpriority=’high’ pour déclencher son téléchargement dès le début du parsing HTML. Cette distinction est gérée automatiquement par le pipeline en fonction de la position de l’image dans le gabarit.
Questions fréquentes
Comment gérez-vous les images de couverture générées par IA ?
Les images générées par IA passent par le même pipeline d’optimisation que les images photographiques. En revanche, elles nécessitent une vérification supplémentaire : absence de texte illisible, absence d’artefacts visuels caractéristiques des générateurs d’images. Cette vérification est manuelle pour les images publiées sur des pages editoriales.
Le pipeline gère-t-il les images SVG ?
Oui, différemment. Les SVG ne passent pas par la conversion de format (ils sont déjà vectoriels) mais par un optimiseur SVG qui supprime les métadonnées inutiles et les commentaires. Les SVG sont directement intégrés inline dans le HTML quand leur taille est inférieure à 2 Ko, pour éviter une requête HTTP supplémentaire.