Choisissez selon la mission de l’image
Commencez par l’actif, pas par l’extension. Une photographie est un contenu à tons continus, donc une perte peut être acceptable à la taille d’affichage. Une capture d’écran, un graphique, un logo ou un dessin linéaire présente des bords nets et du texte, où les artefacts sont conspicueux. Préservez-les avec une sortie sans perte ou une approbation attentive. Utilisez SVG pour un logo ou un diagramme vectoriel quand c’est disponible.
Identifiez ensuite les capacités. Alpha signifie transparence par pixel. Animation est une séquence d’images. La couverture client requise, le volume de publication et le temps de build sont des contraintes de livraison qui peuvent primer sur le format le plus petit.
Testez d’abord AVIF et WebP en mode lossy. Conservez un JPEG disponible quand un fallback opaque largement compatible est nécessaire.
Conservez une source sans perte. Comparez PNG avec WebP ou AVIF sans perte à l’échelle d’affichage réelle avant de choisir.
Utilisez AVIF, WebP ou PNG ; n’utilisez pas JPEG car il ne transporte pas de canal alpha.
Comprendre ce que chaque format apporte
AVIF encapsule des images codées AV1 dans un format basé sur HEIF. Sa spécification inclut des images fixes, des séquences d’images et des éléments d’image alpha. Il prend en charge l’encodage lossy et sans perte, la transparence et l’animation. Les économies ne sont pas fixes : le contenu source, l’encodeur, la vitesse, la qualité cible et les métadonnées modifient le résultat.
WebP prend en charge les modes lossy et lossless, la transparence et l’animation. JPEG est un format d’image fixe lossy avec un très large support historique, utile comme fallback pour les photos opaques. PNG est sans perte avec alpha, ce qui en fait un fallback solide pour des graphiques exacts, bien que les PNG photographiques soient souvent inefficaces. Le PNG ordinaire est statique ; testez un format d’animation séparé quand le mouvement est nécessaire.
À explorer en priorité pour les images raster à forte valeur où une réduction du poids transféré peut justifier l’effort d’encodage et la gestion des fallbacks.
Utile comme option raster moderne polyvalente, incluant la transparence et les séquences animées.
À utiliser comme fallback photo opaque, pas pour un logo transparent ou un détouré.
À utiliser pour un raster sans perte et transparent en fallback, et pour les actifs où la fidélité des pixels compte plus que le minimum d’octets.
Construisez un chemin de secours plutôt que de parier sur un format unique
L’élément picture permet au navigateur d’évaluer des alternatives. Placez AVIF en premier, puis WebP, puis un fallback img en JPEG ou PNG, avec le bon type MIME. Le navigateur ignore une source non supportée et utilise le fallback quand aucune source n’est décodable. Conservez le même texte alternatif significatif sauf si vous modifiez intentionnellement le recadrage.
Le fallback de format ne remplace pas le dimensionnement responsive. Fournissez des candidats basés sur la largeur et une valeur sizes honnête quand l’emplacement varie. Incluez width et height pour que le navigateur puisse réserver de l’espace. Un fichier au petit format avec une grande dimension en pixels gaspille toujours des octets.
AVIF d’abord, WebP ensuite, puis JPEG pour les photos opaques ou PNG quand le fallback nécessite transparence ou bords sans perte.
Si un serveur choisit les formats d’après les capacités de la requête plutôt que la balisage picture, configurez correctement la variation du cache et testez que chaque client reçoit une représentation décodable.
Utilisez un client sans le décodeur préféré ou désactivez volontairement une source en staging ; confirmez que l’image, les dimensions et le texte alternatif restent corrects.
Budgetez le temps d’encodage et protégez la qualité visuelle
La compression moderne déplace le travail vers l’encodage. L’encodeur de référence d’AVIF offre une plage de vitesse de 0 (lent) à 10 (rapide) ; WebP sacrifie aussi le temps d’encodage pour la taille et la qualité. Considérez une ré-encodage en lot ou une transformation à la demande comme une décision opérationnelle, pas comme un réglage gratuit.
Définissez une politique reproductible par classe d’actif et examinez les originaux aux tailles d’affichage courantes. Inspectez visages, dégradés, texte, bords et limites transparentes. Conservez le master et enregistrez la version de l’encodeur et les paramètres pour qu’un défaut puisse être reproduit et annulé.
Un encodage plus rapide réduit la pression du build mais peut produire un fichier plus volumineux ou une compression moins efficace ; effectuez des benchmarks sur votre propre jeu de sources.
Un score ou un preset ne remplace pas la revue visuelle des zones de l’image qui comptent pour les visiteurs.
Faites des changements de format une pratique de fiabilité proactive
Pour Status Is UP, l’optimisation d’images est un travail proactif de disponibilité lorsqu’elle empêche une livraison de dégrader une page critique. Inventoriez les URL d’images critiques, mettez en staging une conversion représentative et vérifiez le content type, le comportement du CDN et l’invalidation des caches avant une migration site-wide.
Déployez par lots réversibles. Comparez le rendu et le comportement de transfert sur le candidat de release, puis conservez l’ancienne représentation tant que le nouveau chemin n’est pas validé. Si une transformation ou une règle de cache échoue, restaurez la source connue comme fonctionnelle. C’est une direction de livraison résiliente, pas un mandat universel pour AVIF ou plusieurs formats.
Priorisez l’image principale et les images de contenu qui influencent la première vue utile, pas chaque image d’archive en même temps.
Conservez des noms d’actifs déterministes ou une cartographie versionnée pour que le chemin JPEG, PNG ou WebP antérieur puisse être restauré rapidement.