AVIF vs PNG
Les deux stockent des photographies, mais avec des compromis différents. Voici où ils diffèrent réellement, et comment trancher.
Short answer
Sur du contenu photographique, AVIF gagne largement, et il dispose aussi d'un mode sans perte. Sur de petits éléments en aplats — icônes, sprites, dessin au trait simple — PNG reste souvent plus léger et toujours plus simple.
Why this comes up
On arrive ici dans l'une de deux situations : soit on a des photographies PNG surdimensionnées et on veut l'économie maximale, soit on refait une chaîne d'assets et on se demande si AVIF peut remplacer PNG partout. La réponse diffère nettement selon le cas, et c'est dans le second que la plupart des conseils généraux se trompent.
Comparaison directe
| Propriété | AVIF | PNG |
|---|---|---|
| Compression | Avec perte | Sans perte |
| Transparence | Oui | Oui |
| Taille habituelle | 40-55% d’un JPEG équivalent | 300-500% d’un JPEG équivalent |
| Compatibilité | Tous les navigateurs actuels ; certains logiciels de bureau anciens sont à la traîne | S’ouvre partout, y compris avec des logiciels vieux de plusieurs décennies |
| Provient généralement de | Sites web optimisant leur poids de chargement | Captures d’écran, logos et graphiques |
What actually differs
AVIF a un mode sans perte, et on oublie qu'il existe
Les comparaisons opposent en général l'AVIF avec perte au PNG sans perte, ce qui ne mesure pas la même chose. L'AVIF sans perte existe et, sur du contenu photographique, il bat généralement PNG avec une marge confortable tout en restant exact à l'octet. Si votre exigence est vraiment « aucune perte », vous n'êtes pas obligé de rester sur PNG : il faut simplement préciser de quel mode AVIF vous parlez.
Sur de tout petits éléments en aplats, AVIF perd souvent
AVIF traîne une surcharge de conteneur qu'une icône de 32×32 ne peut pas amortir, et ses outils de codage sont taillés pour une texture photographique que les graphiques simples n'ont pas. Un petit PNG d'icône en aplat ressort fréquemment plus léger que l'AVIF de la même image, parfois nettement. Mesurez avant de convertir un jeu d'icônes : la règle générale « AVIF est plus léger » est une règle de photographie.
Avec PNG, la question de la compatibilité ne se pose pas
PNG s'ouvre partout, et ce depuis les années quatre-vingt-dix, sans repli, sans élément picture et sans négociation de contenu. AVIF a besoin des trois dès qu'une partie de votre public est sur un ancien Safari. Pour une grande image d'en-tête, cette complexité vous achète de vrais octets ; pour une icône de 2 Ko, elle ne vous achète rien et vous coûte une étape de build.
Which to use
Use AVIF for
Les photographies et les grandes images détaillées sur le web, où diviser par deux ou mieux est envisageable et où un repli fait déjà partie de votre installation.
Use PNG for
Icônes, sprites, logos, captures de texte, et tout ce qui est petit et plat, là où l'avantage d'AVIF disparaît et où la prise en charge universelle compte encore.