GIF vs PNG
Par Guy-Philippe le 23 juillet 2006 - Performance web et optimisation web - Lien permanent
J'entends souvent dire la compression du format PNG est plus performante que celle du format GIF. Je vais vous démontrer qu'en fait dans certains cas le GIF a un meilleur taux de compression que le PNG. Alors, certains me diront que cela se joue sur quelques octets, mais quand j'utilise une technologie ou un format spécifique je l'utilise si cela m'apporte quelque chose même quelques octets.
L'image utilisée par défaut est composée de 2 couleurs (rouge et bleu), seules les dimensions exprimées en pixel (largeur x hauteur) changent.
- Format GIF
- Image 1x1 : 43 octets
- Image 10x10 : 56 octets
- Image 20x20 : 81 octets
- Image 24x24 : 91 octets
- Image 25x25 : 94 octets
- Image 30x30 : 107 octets
- Format PNG
- Image 1x1 : 87 octets
- Image 10x10 : 90 octets
- Image 20x20 : 92 octets
- Image 24x24 : 92 octets
- Image 25x25 : 93 octets
- Image 30x30 : 93 octets
En conclusion, tout dépendra du type d'image, mais sur les images de moins de 24 pixels le format GIF affiche un meilleur taux de compression que le format PNG. Cependant, le format PNG est plus performant lors de la compression de dégradé. Donc, j'utilise le format GIF que dans certains cas lorsque celui-ci permet de gagner quelques octets.
Commentaires
Dans certains cas, le PNG se révèle meilleur en mode PNG-8 : tu prends ton gif, tu le balances dans PngOptimizer, et il en ressort un png souvent plus léger.
Après un autre problème peut survenir : la gestion du gamma, qui fait que les couleurs d'un PNG peuvent apparaitre différemment d'un écran à un autre et d'un navigateur à un autre (selon leur support de ce format)
Tous les PNG présentés ci-dessus sont des PNG-8 (2 couleurs uniquement) générés depuis PngOptimizer.
Par exemple, pour le logotype de Google, l'utilisation du format PNG-8 à la place du format GIF permettrait d'économier 719 octets.
Tant qu'on est dans le même ordre de frandeur, le débat ne porte pas sur la taille de l'image, à mon avis. La bande passante coûte très peu cher.
Le PNG gère l'alpha sur plusieurs niveaux, donc il est fonctionnellement mieux. Et puis le deinterlacing donne un résultat meilleur plus rapidement.
De toute façon, le GIF est un format propriétaire, donc je le bannis.
Le PNG gère l'alpha, mais pas tous les navigateurs le supportent. Par exemple Internet Explorer 6.
Le brevet Unisys du format GIF a expiré depuis le 20 juin 2003 et depuis le 18 juin 2004 en Europe. Cependant, il existe un autre brevet d'IBM qui expire le 11 août 2006.
La bande passante est ce qui coûte le plus cher aux hébergeurs en comparaison du matériel.
Le PNG présente de nombreux avantages en comparaison du GIF : il est plus léger, plus puissant, plus fiable et sous licence libre.
PNG utilise un format de compression non destructif, c'est-à-dire que la qualité de l'image ne s'en trouve pas affectée. Généralement, une image au format PNG 8 est 5 à 50% plus légère que la même au format GIF.Seules de très petites images comportant très peu de couleurs peuvent être plus légères en GIF.
Le GIF est également retombé dans le domaine public comme je l'ai indiqué dans ce billet : Fin des brevets sur le format GIF
Seules de très petites images comportant très peu de couleurs peuvent être plus légères en GIFC'est ce que je démontre dans mon billet.
Le poids des entêtes fait effectivement qu'un PNG peut être plus gros qu'un GIF quand il fait moins d'une centaine d'octets. Maintenant la différence est vraiment minime, et rapportée au poids total d'un cycle requête/réponse, ce n'est même plus négligeable, c'est inexistant. L'aléas du au réseau est bien plus important que ça.
L'intérêt d'avoir un format unique est probablement meilleur que les trois octets gagnés sur les très rares icônes qui font moins de 100ko. Et si on choisit un format unique (donc une chaîne d'outils unifiée), le PNG offre par contre des gains non négligeables pour toutes les autres images (c'est à dire quasi toutes) ;)