Les images de véhicules sont une classe d'images difficile à compresser: des dégradés photographiques sur des carrosseries courbées, des bords de découpe ultra nets, et un canal alpha qui doit rester intact là où la voiture est composée sur un fond personnalisé. Les conseils généraux sur les images web s'appliquent en grande partie, mais les cas limites sont exactement là où se trouvent les images de voitures. Voici la décision de format, prise correctement une fois.
Les trois formats en pratique
| PNG | WebP | AVIF | |
|---|---|---|---|
| Transparence | Alpha sans perte | Alpha, avec ou sans perte | Alpha supporté |
| Taille du fichier (découpe typique) | De loin la plus grande | Petite | La plus petite |
| Fidélité en périphérie | Parfait | Très bon en qualité raisonnable | Très bon, plus lent à encoder |
| Assistance | Universel | Universel en pratique | Navigateurs modernes |
| Idéal pour | Impression, pipelines de composition | Tout sur le web | Critique en termes de bande passante, si servi |
Où chacun gagne
PNG: le format d'archivage et de composition
PNG gagne ses octets exactement deux fois: lorsque l'image entre dans un pipeline d'impression ou de conception qui la recompressera de toute façon, et lorsque la composition en aval nécessite un canal alpha mathématiquement propre. En tant que format de livraison pour les pages web, c'est une habitude, pas une décision. Il est souvent cinq fois plus volumineux pour aucune différence visible.
WebP: le format par défaut
WebP avec un canal alpha de qualité raisonnable est le cheval de bataille: des découpes transparentes à une fraction du poids PNG, une prise en charge universelle par les navigateurs, et une qualité contrôlable par demande. Pour une grille de listings ou une galerie VDP, format=webp avec une width explicite est la politique à suivre.
AVIF: crayon plus affûté, même dessin
AVIF comprime plus que WebP à qualité équivalente et son histoire de support est maintenant bonne. La question honnête est le gain marginal: sur des découpes de véhicules correctement dimensionnées, le passage de PNG à WebP est dramatique, le passage de WebP à AVIF est une finition. Vérifiez /api/options pour les formats actuellement servis avant de construire un pipeline autour d'un.
Les erreurs qui l'emportent sur le choix de format
- Fournir des images en pleine résolution dans des emplacements réduits. Des paramètres de largeur existent, utilisez-les
- Envoyer la transparence PNG sur une page qui met la voiture sur un fond blanc de toute façon
- Recompresser une image déjà perteuse dans votre propre pipeline, empilant des artefacts sur les bords coupés
- Ignorer les paramètres de qualité: les rendus de véhicules supportent bien la compression, et le tout en qualité par défaut laisse des octets faciles sur la table
Le choix du format vaut une réunion. La discipline de dimensionnement vaut une réunion par trimestre, pour toujours.
Un exemple concret
Prenez une grille de listes affichant 48 cartes de véhicules. En tant qu'images PNG pleine taille, la page envoie des dizaines de mégaoctets d'imagerie, que les utilisateurs mobiles sur les connexions cellulaires ne finissent tout simplement pas de charger. La même grille à une largeur de 600 pixels en WebP se retrouve généralement deux ordres de grandeur plus petite par image. Rien n'a changé dans la conception, et la grille est passée d'inutilisable à instantanée sur la connexion que la plupart des acheteurs ont réellement.
Associez le choix du format à srcset et le navigateur fait le reste du travail: les petits écrans tirent la petite variante, les écrans rétina tirent la version nette, et personne ne télécharge de pixels qu'ils ne peuvent pas voir. Puisque les dimensions sont des paramètres de requête, tout le réglage réactif est de trois URL qui diffèrent par un seul nombre.
Ce que sont les variantes de transparence et d'ombre, et comment elles se combinent, est couvert sur ombres, reflets et transparence; les paramètres de livraison se trouvent dans la documentation de l'API.
