Et si on parlait un peu des images ? du point de vue des performances web, toujours.
Sur un site classique comme TF1, Amazon, LeMonde, on dépasse les 100 images sur la page d’accueil, pour un total de près de 300ko. Les sites plus au fait des problèmes de performance ont entre 30 et 50 images mais le poids total est encore souvent supérieur à 100ko.
- TF1 : 108 images pour 300ko
- Amazon : 106 images pour 300ko
- LeMonde : 102 images pour 250ko
- Yahoo : 45 images pour 126ko
- Ebay : 30 images pour 160ko
Les images, une priorité pour la performance
Pour rappel, sur ma ligne « classique » de 2mb/s avec 40ms de latence et deux connexions simultanées par domaine, je vais mettre plus d’une seconde à tout télécharger. Bien sûr tout ceci c’est si les 2mb/s sont exploités sans une seule perte et si le serveur répond instantanément. En pratique même sur les superbes lignes ADSL vous mettrez probablement bien deux secondes rien que pour les images. Rappelez vous le billet précédent, deux secondes c’est énorme.
Il y a largement matière à plusieurs billets. Je ne parlerai pas de parallélisation, de chargement différé ou de sprites. Contentons nous ici de l’image elle-même.
Différents formats pour différents usages
On peut individualiser trois formats d’images sur le Web : JPEG, GIF et PNG. Tous sont des formats dits « compressés » qui permettent d’obtenir un fichier de taille réduite.
Le premier est un format prévu pour des photos ou des images avec des tons continus et des millions de couleurs. La compression est étudiée pour ça et en s’autorisant une faible dégradation de l’image nous permet de gagner plus de 90%. L’image ne sera donc pas exactement la même avant et après compression mais la différence de qualité devrait être minime si les réglages sont bien faits.
Les deux autres sont des formats sans perte, l’image sera la même avant et après compression, au pixel près. Ces formats sont adaptés à de gros aplats avec peu de couleurs, à de petites images et aux images où la qualité au pixel près est importante – par exemple quand il y a du texte à lire. Ils ont aussi la possibilité avoir de la transparence (et bien d’autres choses pour le PNG).
Une photo se compressera très mal en PNG, et un logo en 4 couleurs avec une tagline textuelle sera très mal adapté au JPEG. Les images de contenu sont souvent des photos, donc en JPEG. Les élements d’interface sont généralement le terrain de GIF et PNG. Utilisez le bon type de format, votre taux de compression s’en ressentira.
PNG est meilleur dans tous les cas
Pour la petite histoire GIF est basé sur une compression sans perte LZW. La perte de qualité vient uniquement que le format n’accepte que 256 couleurs. C’est la dégradation préalable en 256 couleurs qui cause la perte que certains constatent, le format n’y est pour rien. Sur des images adaptées ont peut compter sur une image 4 à 10 fois plus petite que l’originale en 256 couleurs.
Le format PNG est venu plus tard. La compression est faite via un algorithme de deflate, comme pour gzip, qui permet d’avoir un taux de compression de 10 à 30% plus performant. Les couleurs ont elles aussi des améliorations puisqu’en plus du format 256 couleurs (nommé PNG8) on peut gérer des images en vraies couleurs (24 bits, PNG24) et même des images en 48 bits (16 bits par couleur, plus que votre écran ne peut en afficher). Enfin, si GIF permettait de définir des zones complètement transparentes et des zones opaques, PNG permet de gérer 65000 niveaux de transparence (on parle de couche alpha).
Le choix entre PNG et GIF est vite fait : vous devriez toujours utiliser PNG par rapport à GIF pour une image fixe. Il n’y a pour ainsi dire aucun contre-exemple significatif. À fonctionnalités égales le fichier PNG sera plus petit. À taille égale le fichier PNG offrira plus de possibilités, par exemple plus de couleurs et donc une meilleure qualité.
Faites confiance à PNG
Ne faites pas confiance aux détracteurs de PNG et partisants de GIF :
On vous dit que le PNG fait des fichiers plus gros ? C’est probablement que votre interlocuteur utilise un PNG en 24 bits (abbrévié PNG24) avec des millions de couleurs : Comparé à un GIF qui utilise seulement 256 couleurs, forcément, ça prend plus de place. Utilisez un PNG8 lui aussi en 256 couleurs et ce dernier reprend l’avantage. Le PNG peut avoir une meilleure qualité mais si on compare à qualité égale il reste bien le plus performant.
On vous a dit que Microsoft Internet Explorer 6 ne supportait pas la transparence sur les PNG ? En fait il ne supporte pas les couches alpha : Utilisez les mêmes fonctionnalités que GIF, c’est à dire un PNG8 avec une transparence binaire dans la palette de couleurs, et vous récupérez la compatibilité avec MSIE 6 tout en profitant de la taille réduite.
On vous dit que les couleurs ne sont pas exactes dans PNG ? En fait elles le sont, et c’est ça le problème : Les systèmes d’exploitation utilisent des profils de couleur et des valeur de gamma différentes. PNG permet de stocker ces informations dans l’image pour éviter que votre création soit claire sur Mac OS X et sombre sur Microsoft Windows. Les navigateurs ne savent pas tous appliquer correctement ces informations et le même rouge rendra différemment s’il est dans l’image PNG et s’il est dans la CSS, ce qui est assez moche au final. Là aussi, si vous ne mettez pas de profil de couleur et de gamma dans votre PNG, il s’affichera comme le faisait un GIF : parfaitement. Les logiciels pngcrush et optipng peuvent vous aider à retirer ces informations.
Réduisez la taille de vos images
Non seulement les sites contiennent trop d’images mais en plus elles sont bien trop grosses. Dans une majorité des sites, y compris les sites à fort traffic, les images sont insuffisamment compressées. On trouve des petites images d’interface à plus de 5ko et des illustrations photographiques à plus de 30ko. Est-ce vraiment nécessaire ?
Utilisez moins de couleurs
Un format adapté, une bonne compression devraient déjà vous permettre d’obtenir une majorité d’images de 1 à 5ko. Au delà, pour une image d’interface, vous devez vous y attarder. Pour les éléments d’interface réduire 256 couleurs est quasiment toujours une bonne idée. En diminuant encore plus le nombre de couleurs vous pouvez certainement gagner encore un peu à la compression.
Faites (faire) des compromis sur la qualité de l’image
L’étape suivante c’est de faire des compromis sur la qualité, soit sur la compression JPEG soit sur le nombre de couleurs. C’est toujours un sujet sensible avec les graphistes et le marketing, mais poussez les dans leurs derniers retranchements jusqu’à ce qu’ils vous disent que là non vraiment si on baisse la qualité ce n’est plus acceptable. Vous pouvez aussi tenter de faire simplifier l’image elle-même, les aplats de couleurs obtenant une bien meilleure compression. L’argument majeur c’est qu’une image qui n’est pas parfaite mais qui arrive vite est probablement préférable à une image parfaite mais qui met du temps à venir.
Tentez différentes compression avec Photoshop
Photoshop est d’une grande aide pour les choix de couleur et de qualité. Dans le menu « save for the web… »‘ on vous propose de jouer avec tous les paramètres et de constater le poids final de l’image avant de la sauvegarder. Il est même possible de confronter quatre jeux de paramètres, format et compression côté à côté pour comparer taille et qualité avant de choisir le plus intéressant. Imposer à votre graphiste de toujours passer 3 minutes minimum montre en main à essayer différentes solutions de compression sur l’interface Photoshop.
Améliorez la compression avec OptiPNG
Ensuite, quand l’image initiale est au mieux, on peut encore utiliser des logiciels d’optimisation comme pngcrush et optipng déjà cités plus haut. Ils vont retirer toutes les méta données non nécessaires et tester plusieurs pistes de compression pour retenir la meilleure.
Vous trouverez peut être quelques sources qui vous proposent de préférer des sprites horizontaux aux sprites verticaux quand vous avez le choix. GIF appliquait certains algorithmes uniquement sur les répétitions horizontales. PNG fait aussi des opérations verticales ; mes tests ne mettent pas en valeur une différence de plus d’un ou deux octets entre horizontal et vertical sur ce dernier format.
L’impact
Alors certes, on ne gagnera peut être que 1ko par image en moyenne, parfois moins parfois plus. Mais rappelez vous les chiffres en début de billet. Sur 100 images 1ko par image en moyenne ça fait déjà 100ko. On n’est pas dans le négligeable, on est dans le prioritaire.
Une fois de plus un billet très intéressant !
Par contre je ne suis pas d’accord sur un point : A mon sens ça ne doit pas être le graphiste qui doit passer du temps à optimiser les images dans Photoshop (ou ImageReady plus précisément), mais l’intégrateur. Un graphiste s’en fout d’optimiser au mieux les images (quand il ne sait tout simplement pas qu’il faut le faire et/ou pourquoi).
J’utilise PngOptimizer pour optimiser encore plus les PNG, une fois que toute les images sont prêtes.
Parfois entrelacer l’image fait gagner quelque octets, mais globalement c’est rare. Dans le cas d’un JPEG on peut opter entre « optimiser » et « progressif », les résultats dépendent de la source.
Il y a deux paramètres, que je ne connais pas : le « Dither » et la palette de couleur (Selective, Perceptual, Adaptative, etc.), en jouant avec on peut optimiser légèrement des GIF ou PNG.
Le dither tu peux le désactiver sur le PNG.
PngOptimizer ou les autre logiciels d’optimisation de compression peuvent effectivement être la responsabilité de l’intégrateur. Ou mieux, automatiquement appliqués par le processus de publication.
Par contre je ne te suis pas sur la suite. Globalement tout ce qui peut toucher à la qualité de l’image, comme tout ce qui est artistique, est absolument de la responsabilité du graphiste.
L’intégrateur est responsable de vérifier le poids de l’image et les performances mais si un coup d’optimisateur sans toucher à la qualité du rendu ne suffit pas, alors il te reste à faire revoir sa copie au graphiste. En général ça ne fonctionne que si tu vas à son bureau pour lui expliquer et voir avec lui quelles options il peut activer. Si tu as besoin de toucher à Photoshop, au nombre des couleurs, à la taille de l’image, à l’entrelacement ou aux options du format, c’est à lui de prendre les décisions.
L’intégrateur a un rôle technique. Ce rôle est très large, demande des compétences très pointues mais il s’arrête à la technique. Il a aussi besoin de connaître et comprendre ce qu’il y a autour, par exemple le graphisme, mais dans ces domaines tiers son rôle se borne à faire remonter les problèmes et négocier les compromis.
Si tu déresponsabilise et infantilise ton graphiste il va agir en conséquence (ou partir au conflit et démissionner). Il va finir par ne plus s’occuper que de sa maquette photoshop et te laisser l’ergonomie, la décision sur la qualité graphique, les adaptations dûes au web, l’interaction utilisateur …. sauf que tout ça c’est son métier, pas celui de l’intégrateur. L’intégrateur qui finit par recevoir des éléments graphiques faits en se moquant de la suite part dans un mur à court terme, car ça ne pourra jamais donner une bonne intégration.
À moins que tu aies un ergonome, un expert en interaction utilisateur, un rédacteur et un marketeur dédiés, c’est au graphiste d’assurer ce rôle. Fais lui confiance, donnes lui les billes pour t’aider et il te permettra d’autant mieux de faire ton rôle d’intégrateur, qui est déjà assez complet comme ça. Et pour lui laisser son rôle, surtout ne prend aucune action qui puisses faire des choix de qualité d’image à sa place.
À moins bien sûr qu’un autre intégrateur soit passé avant et que ton graphiste se contente déjà de t’envoyer des grosses images photoshop sans réflexions derrière autre que « c’est joli », mais dans ce cas de toutes façons change de graphiste 😉
rien à voir… et totalement, hors sujet,… mais ce blog devrait être déclaré d’utilité publique pour tous les développeurs web et apparentés…
A ajouter à la boite à outils pour une meilleure qualité du web (avec opquast, paris web, openweb,…j’en oublie…)…
D’ailleurs, je me dis qu’il manque des critères dans opquast permettant de vérifier l’optimisation d’un site web (vérification de la compression GZIP des pages html + css, …). Y! slow joue un peu ce rôle mais cela pourrait être une bonne idée de l’intégrer dans la démarche qualité d’opquast.
Merci pour tous ces bons conseils et explications…
Sujet très intéressant. C’est vrai que la compression PNG est généralement la plus adaptée pour les éléments du design. Après avoir découpé puis optimisé les images de mon dernier projet je me suis rendu compte que je n’avais quasiment que des PNGs. Néanmoins dans certains cas le GIF reste plus adapté pour de très petites images comportant très peu de couleurs.
Merci pour OptiPNG, je ne connaissais pas, j’utilisai moi aussi PNGOptimizer et, même après un passage de celui-ci, OptiPNG arrive encore à me faire gagner quelques Ko sur certaines images.
Pour le petit débat sur le rôle de l’intégrateur/du graphiste, ça dépend vraiment de la personne avec qui on travail et de comment on s’organise. Il n’est pas toujours évident d’expliquer au graphiste la découpe que l’on souhaite pour chaque image (lui expliquer le système de sprites, etc.) sans compter que ça prend pas mal de temps. J’ai souvent eut de mauvaises surprises et les retours vers le graphiste n’étaient pas rare.
Donc maintenant je lui demande directement les PSD, je fais la découpe moi-même, j’intègre les images au design et le graphiste me donne toutes ses critiques sur mon intégration après (trop forte compression des images, marges « pas tout à fait comme sur la maquette », etc.)
Ce n’est pas parfait, mais je trouve ça plus efficace.
Je m’étais amusé à faire quelques tests, mais en général pour du pixel art notamment les petites icônes je préfère utiliser le gif au png.
http://www.webdesigner.com.fr/2006/07/23/137-gif-vs-png
Vraiment bien l’article 🙂
Moi j’utilise SuperPng, un plug-in pour photoshop qui permet de choisir la compression, la correction du gamma et de garder ou non les metadatas.
http://www.fnordware.com/superpng/
Une petite note sur les performances GIF/PNG, j’ai trouvé un exemple ou le GIF était largement meilleur que PNG (quasiment x2) sur ce type d’image :
http://pwet.fr/extension/pwet2/design/pwet2/images/n5.gif
http://pwet.fr/extension/pwet2/design/pwet2/images/n5.png
visiblement avec une seule couleur et le reste en transparent… Je n’ai pas encore poussé les tests plus loin…
Oui, mais on parle d’images de respectivement 75 et 140 octets
C’est ce que je nomme un exemple non significatif. On parle là de 65 octets de différence.
Ce n’est ni significatif en valeur absolue (en dessous du demi kilo-octet il y a des activités bien plus rentables) ni en proportion :
La requête + la réponse + l’image gif, ça fait 900 octets avec le cookie de session qu’il y a sur le site (mesuré sur mon Firefox). Une augmentation de 65 octets c’est 7%. On est loin du double là.
Bref, sur de très petites images il peut y avoir des différences, mais au final la valeur absolue est négligeable, surtout mis en rapport avec le couple requete/réponse qui fait facilement 1ko à lui tout seul.
Sur les images moyennes il peut aussi y avoir des différences en faveur de GIF mais rarement de plus de quelques dizaines d’octets.
Par contre sur toutes les autres le PNG gagne, et assez souvent avec des valeurs non négligeables que ce soit en valeur absolue ou en proportion du poids total.
oui j’ai bien noté tout ça, c’était plus pour l’anecdote qu’autre chose (au passage je viens de faire en sorte que tous les éléments statiques soient accéder via un sous-domaine pour éviter le cookie et maximiser le téléchargement parallèle et puis j’utilise un sprite où il n’y a vraiment pas photo entre GIF et PNG : 3,1ko contre 1,4ko)
Bravo pour votre blog très intéressant.
> PNG est meilleur dans tous les cas
Je tempèrerais un peu quand même : les tests que j’ai pu réaliser entre GIF et PNG semblent m’indiquer que plus l’image est grande, plus PNG est intéressant niveau poids, et inversemment, plus elle est petite, plus GIF l’emporte (au niveau de petits pictos).
Je n’ai aucune idée du pourquoi-comment de la chose ! Et je parle bien sûr à qualité égale et une fois les optimisations-compressions optimales faites.
Oui, mais sur les tous petits pictos la différence de taille est faible (vu que l’image en elle même est toute petite), quasiment toujours négligeable.
Après ça dépend du contenu même de l’image.
Sur la raison, la palette et les entêtes du PNG prennent plus de place. Quand l’image est petite, ça devient important par rapport au contenu de l’image et le PNG est un chouiat plus gros.
Salut
plus je relis les articles sur le png, plus je suis paumé! Je bosse avec Fireworks 8.
Je suis sûr que je me plante depuis le début de mon utilisation du png32. Or ici il n’est jamais fait mention du png32. Ici on parle de png8 et de png24. Or dans Fireworks en 24 pas de transparence. Et en png8 je me retrouve toujours avec le même doute (qu’en gif) transparence d’index ou alpha? Je sais vaguement que c’est une histoire de concordance entre la couleur de fond et les bords de l’image. J’avais bien constaté aussi des différénces de couleurs avec les maquettes des clients (en .ai illustrator), là je comprends qu’il s’agit d’une histoire de profil. Si en plus on prends en considération IE6 et que je lis plus haut « PNG8 avec une transparence binaire dans la palette de couleurs, et vous récupérez la compatibilité avec MSIE 6 » Ah OK c’est comme du gif alors? Et pas de problème avec IE6. Bon pour me sortir de ma pétaudière une simple question: transparence binaire = INDEX ou ALPHA?
MERCI!!!
Autre question: si j’utilise smush.it aurais-je besoin de pngcrush ou de optipng? Le pauvre site de smush.it un jour ou l’autre il en aura marre de payer de la bande passante pour des nazes comme moi qui savent pas optimiser les images en ligne de commande 😉 ni avec Fireworks d’ailleurs 🙁
Prix Nobel des Performances pour smush.it!
Alors, je parle de PNG24 parce que c’est le nom du format, mais il s’agit bien de 3 couleurs en 8 bits plus une transparence en 8 bits elle aussi, soit 32 au total.
La question de concordance entre le fond et l’image ce peut être deux choses :
– Le passage en PNG8 qui, vu qu’on diminue le nombre de couleurs, tente de faire une approximation au mieux au lieu d’utiliser la couleur exacte. Ca arrive quand l’image de base, elle, contient plus de 256 nuances. Que ce soit dans Photoshop ou Fireworks, il y a moyen de fixer une couleur arbitraire dans la palette et palier ce problème.
– Le profil de couleurs, ou le gamma utilisé. C’est stocké dans les méta données de l’image, les navigateurs ne savent pas ou mal le relire, en général le supprimer corrige tout problème. Les outils type pngcrush savent faire. Ces profils sont utiles pour des vrais « images », pas pour des éléments de fond (dans un fond l’important n’est pas d’avoir des couleurs éclatantes ou justes, mais d’avoir les mêmes que l’élément d’à côté).
Après il reste la transparence binaire et les couches alpha. Transparence binaire c’est « le pixel est en couleur ou transparent, pas entre les deux ». C’est une entrée spécifique dans l’index. C’est l’équivalent du GIF. Alpha c’est de la semi-transparence, ton pixel a de la couleur mais on voit à moitié en dessous, comme un verre de couleur.
Sur ce qu’il est préférable de faire, tu peux te reporter à http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/
Mais au final oui, sans bidouille à la AlphaImageLoader (que vous ne devriez pas utiliser), le PNG8 n’aura pas plus de possibilité que GIF sous IE6.
Merci beaucoup!
si je comprends bien:
La transparence alpha ne marche pas avec IE6, la transparence d’index si.
On peut donc avoir un fond transparent, en transparence d’index, avec IE6.
En transparence d’index, les couleurs opaques (laissant passer « un peu » la couleur de fond) ne fonctionnent pas sous IE6 (sauf à reproduire l’effet si on connaît la couleur de fond finale, mais c’est pas de la transparence, c’est une évaluation du mélange de couleur que ça donnera au final).
Le cas typique ce sont les effets d’ombre, une transition de plusieurs pixels opaques aux bords de l’image, ou encore (dîtes-moi si je me trompe) l’effet anti-aliasing. On peut le faire en png8 mais ça ne marchera pas sous IE6. Pourquoi pas sous IE6! j’en sais rien, mais ça a 2 avantages: même si sous IE6 ce n’est pas nickel* ça l’est avec les autres navigateurs, 1/ ça permet de ne pas utiliser de hack IE6 (css, js ou propriétaire) 2/ c’est super léger.
=> pour ses performances 2 bonnes raisons d’utiliser png8 en transparence d’index plutôt que png32 (suivant la dénomination Fireworks) en transparence alpha. Et ceci quelque-soit le navigateur (cqfd?)
*ça donnera l’impression qu’une courbe été découpée en « escalier », et c’est quand même pas très gênant sous IE6, (dont l’interface est déjà bien moche, là je m’égare).
à tous les mac users cette page aide à imaginer ce que ça donne sous IE6:
http://www.sitepoint.com/blogs/2008/03/20/making-ie6-friendly-png8-images/
Je note au passage que Adobe a racheté Macromedia, qu’ils nous ont pondu deux versions depuis (CS3 et 4) mais que les compatibilités entre logiciels restent du grand n’importe quoi. Vu le prix de ces apps dîtes professionnelles, c quand même scandaleux, qu’on ne puisse pas en sortie de ces usines à gaz, avoir des images « performantes ».
Merci pour cet article sur le png 8 qui m’a permis de faire des images légères et compatibles IE6. Mais il me manque une information que j’avais trouvé il y a longtemps: je ne sais pas comment rendre mon image PNG8 transparente ?
J’utilise GIMP et n’ai pas d’autre logiciel et ne peut en installer d’autre. J’avais trouvé sur un site le moyen de le faire mais suis incapable de retrouver l’information.
Merci.
excellent billet , merci pour toutes ces informations !
Hello,
Petite rectification, car j’aime bien les choses justes !
Le gif peut se reveler bien plus interessant que le PNG.
En effet pour des images ayant très peu de couleur, Gif continue d optimiser la palette alors que PNG ne dessendra jamais en dessous de 16 couleurs par palette.
Faites un test simple, prenez un gif en 4 couleurs et faites le meme images en PNG, observer les resultats. Faites tout les tests possibles et vous verrez que GIF est parfait pour les images inferieurs a 16 couleurs…
Donc comme toujour, avant de mettre un format en avant, et de dire qu il explose tout les autres formats, allez jusqu au bout des choses !
Sinon tout est juste dans ce billet.. Mais je pense que ma petite modulation est important histoire de donner toutes les cléfs pour faire le bon choix dans les bonnes conditions.