A noter

C'est le 830e jour depuis le début de cette aventure !

Un point sur le support des images au format PNG

Publié le 27 déc 07 à 07:17 | Catégorie : Développement Web | 14 commentaires

Les principaux types de format de fichiers généralement utilisés pour l’affichage d’images sur un site Internet sont GIF (pour Graphics Interchange Format), JPG (pour Joint Photographic Experts Group) et PNG (pour Portable Network Graphics). Cet article est l’occasion de revenir brièvement sur le support par les principaux navigateurs Internet de ce dernier format capable de produire des images sans perte de données et de grande qualité.

Le format PNG est en quelque sorte une version améliorée et libre du format GIF, comme le souligne Wikipedia :

Le PNG, d’ailleurs parfois appelé par récursivité PNG’s Not GIF (PNG n’est pas GIF), peut faire tout ce que le format GIF peut faire et même plus, comme la translucidité. Il n’a cependant pas été prévu pour faire des images animées, mais le format dérivé MNG a été créé par ses auteurs à cet effet.

Donc si on laisse de côté les images animées, le format PNG est très certainement la meilleure alternative pour des images simples (contenant des changements nets de couleur). Pour des images complexes à base de photographies ou comportant des dégradés, il sera préférable de faire appel au format JPG qui autorise la génération de fichiers plus légers (en agissant sur le taux de compression).

Le format PNG a donc de nombreux avantages, comme par exemple la possibilité de créer des images translucides (c’est-à-dire comportant des éléments de transparence graduelle). Pour être plus précis, il propose même en fait 6 méthodes différentes pour gérer une image avec des pixels transparents. Et le format PNG est accepté par la quasi totalité des navigateurs Internet disponibles sur le marché.

Mais il subsiste toutefois quelques exceptions. La version d’Internet Explorer 6 est ainsi passablement problématique, puisqu’elle ne supporte que deux niveaux d’opacité (complètement opaque ou complètement transparent) alors que le format PNG autorise en standard jusqu’à 256 niveaux (semi transparent). Donc dans cette configuration, le format PNG fait jeu égal avec le format GIF.

Il existe cependant plusieurs moyens de contourner cette limitation qui consistent généralement à inclure une librairie Javascript qui corrigera à la volée le comportement du moteur de rendu d’Internet Explorer 6 :

Malheureusement, aucune de ces astuces ne corrige réellement le problème et il subsiste toujours des soucis de positionnement ou de captation d’événements (lorsque l’utilisateur clique par exemple sur une image transparente).

Du coup, il me semble que la solution la plus sûre est d’utiliser des images au format GIF pour ce navigateur (ou éventuellement des images au format PNG-8, une déclinaison en 256 couleurs). Cette approche nécessite de doubler le nombre d’images (un fichier GIF pour Internet Explorer 6 et un PNG pour tous les autres navigateurs) et de surcharger les références à ces images PNG dans les feuilles de styles par celles au format GIF si le navigateur employé par l’utilisateur ne les supporte pas correctement.

Une note d’information pour terminer : certains outils graphiques comme Photoshop génèrent des images au format PNG qui ne sont pas suffisamment optimisées (elles ont donc un poids trop important). Heureusement, il est possible d’utiliser un petit logiciel très pratique (merci Thibault pour m’avoir éclairé sur ce sujet) ou d’installer une extension adéquate pour remédier à ce problème.

A lire également

Vous pouvez continuer votre lecture sur des sujets similaires en consultant les articles suivants :

Les visiteurs qui ont vu cette page ont consulté ensuite :

A savoir

La rédaction de cet article a nécessité 1 heure et 46 minutes. Si vous le souhaitez, vous pouvez être prévenu de la parution de nouveaux articles en vous abonnant par RSS ou par email.

13 commentaires à propos de “Un point sur le support des images au format PNG” :

  1. Billet très intéressant. J’y vois plus clair et ne travaillerai pu sur cet aspect en tatonnant.

    Mas le 27 décembre 2007 à 08:21 (#1)

  2. À note que Firefox 3 et Opera 9.5 supporteront l’APNG, un format d’image animé bien plus puissant que le GIF (qui hérite donc de ses caractéristiques : plusieurs niveaux de transparences, etc.). On eut raisonnablement penser que Safari le supporte bientôt et IE8 … bonne question !

    Par contre ce n’est pas un standard.

    Thomas le 27 décembre 2007 à 08:22 (#2)

  3. IE8 “devrait” supporter oui.

    Le soucis avec la librairie Js qui permet l’affichage de la transparence sous IE6 c’est l’appel à AlphaImageLoader, qui fait ralentir l’affichage de la page dés que celle-ci possède un certain trafic.

    Sinon pour le petit logiciel PNgOptimizer je suis assez dubitatif. Je l’ai p-e mal utilisé mais en partant d’une image PNG de 256 Ko, je ne fais pas mieux que 190 Ko avec lui alors que si je sauvegarde mon image “pour le web” directement dans Toshop j’arrive à 159 Ko. Qualité similaire. Mais c’est p-e un cas particulier, ou alors j’ai mal optimisé l’outil ;)

    Arkan le 27 décembre 2007 à 09:55 (#3)

  4. “Du coup, il me semble que la solution la plus sûre est d’utiliser des images au format GIF pour [IE 6]”

    Je sais pas si c’est moi qui n’est pas compris, mais pourquoi faire les images en GIF alors qu’il offre moins de possibilités que le PNG, même sous IE 6 (plus de couleurs dans PNG que dans GIF par exemple)

    On peut faire deux fichiers PNG. Un avec une transparence graduelle, et un avec une transparence binaire pour IE6 …

    Grom_NaN le 27 décembre 2007 à 10:03 (#4)

  5. L’outil idéal pour travailler avec les fichiers PNG (et JPG pour le web aussi) c’est sans nul doute Adobe Fireworks.

    Grom_NaN le 27 décembre 2007 à 10:05 (#5)

  6. C’est ce que je sous-entendais Grom_NaN en précisant ensuite que l’on pouvait éventuellement utiliser des images au format PNG-8. Je reconnais que ce n’était pas très clair, mais ce format ne disposant pas d’alpha chanel, il ne peut seulement recevoir qu’une transparence binaire. Bref, tu as tout à fait raison : il est tout à fait possible de générer deux versions au format PNG (PNG-8 et PNG-24).

    Stéphane le 27 décembre 2007 à 10:29 (#6)

  7. J’ai aussi remarqué des différences de rendu des couleurs en PNG sous IE6 (un aplat de couleur PNG différent d’une couleur de fond d’une page Web, dont le rendu était pourtant parfait sous Opéra ou FF), ce qui m’a obligé à revenir au format GIF.

    Guillaume le 27 décembre 2007 à 12:08 (#7)

  8. J’utilise un PNG pour afficher le nom de mon site, du moins son logo. Avec IE6 j’avais un joli fond gris qui venait s’ajouter, mais avec un JavaScript tout est rentré dans l’ordre, et aucun problème d’affichage. Donc pas de retour au GIF pour ma part, PNG passe très bien.

    pickupjojo le 27 décembre 2007 à 13:10 (#8)

  9. Pour mes sites, comme j’utilise essentiellement des png pour les icônes, j’avais pris un de ces hacks (je ne sais plus lequel) et j’y ai apporté quelques modifs. Il n’y a aucun pb avec ce hack (enfin pas à ma connaissance). Si ça t’intéresse, tu peux le voir à l’oeuvre sur EklaBlog par exemple (lien sur mon pseudo). Dis moi ce que t’en penses ;-)

    Skreo le 27 décembre 2007 à 14:27 (#9)

  10. Les trackbacks sont désactivés ou j’ai un problème technique ?
    Récapitulatif des méthodes d’affichage au format PNG avec transparence sur Internet Explorer

    La Blonde le 27 décembre 2007 à 19:29 (#10)

  11. Idem que Guillaume, j’ai remarqué un rendu des couleur assez scabreux sous IE6 pour le png… C’est même ca, plus que le manque de couleurs translucides qui m’a fait revenir au gif…

    LapinLove404 le 27 décembre 2007 à 23:32 (#11)

  12. j’utilise “PNG Behavior” qui est parfait pour la plupart des utilisations… un problème subsiste avec l’instruction “background-repeat” de CSS : sous ie6 le png n’est pas répété… Peut etre les autres librairies résolvent se problème. J’essaierai ;)

    Merci pour cet article très intéressant en tout cas :)

    Come le 27 décembre 2007 à 23:57 (#12)

  13. Pour ceux sur Mac OS X: http://www.amake.us/software/pngcrusher/

    Pierre le 29 décembre 2007 à 12:24 (#13)

Ajouter un commentaire

Les informations obligatoires sont indiquées par une étoile rouge *.


Un rétrolien à propos de “Un point sur le support des images au format PNG” :

  1. Innovablog > Les derniers jours d’Internet Explorer 6. Un pas de plus vers les standards du web.
    Le 27 janvier 2008 à 10:32

Articles Récents

Les derniers articles publiés

A Propos

Pas facile de franchir le pas et d'abandonner un poste de consultant. Mais depuis octobre 2006, je me consacre entièrement à la conception d'un nouveau service Internet et au montage d'une société.

Ce blog raconte le parcours d'un entrepreneur dans la net économie et aborde de nombreux aspects pratiques, juridiques et financiers liés au développement d'un business sur Internet.

Lire la suite…