Éducation, société et technologie
JPEG - GIF - PNG - BMP

Design : Format des images pour le web

dimanche 1er août 2004 par André Vincent

Des deux grands types d’images produits à l’aide d’ordinateurs (images matricielles et images vectorielles), seuls les formats matriciels sont universellement utilisés dans le cadre de production de pages web. Et parmi la centaine de formats matriciels encore en usage, seuls quatre sont utilisés : GIF, JPG,PNG et BMP. Nous allons en analyser les caractéristiques.

Consultez d’abord ce document 6 pages abondamment illustré préparé par Colettes Sigouin et Jean-François Dorval enseignants au département d’infographie du Collège Ahuntsic :

Images pour le web

En complément

Pour en savoir plus sur PNG

PNG est un format de compression d’images sans perte de d’information (lossless), du même type que GIF ou TIF, contrairement à JPEG.

Contrairement au GIF, il supporte des images en 24 bits (16 millions de couleurs), et contrairement au JPEG il supporte des images 32 bits (16 millions de couleurs + 256 niveaux de transparence). Il possède aussi d’autres caractéristiques uniques.

Sommaire :

  • Quand utiliser le PNG ?
  • Questions fréquentes
  • Tests et Exemples
  • Navigateurs supportant correctement le PNG
  • Liens utiles Contact

Quand utiliser le PNG ?

Une première chose : Le PNG n’est pas le choix ultime dans tous les cas. C’est le meilleur choix lorsqu’il s’agit d’enregistrer :

  • Captures d’écran.
  • Illustrations au trait (logos, symboles, histogrammes, schémas, icônes, etc.)
  • Images contenant principalement du texte.
  • Images aux bords bien nets et/ou surfaces unies.
  • Images 2 couleurs (noir et blanc).
  • Images contenant un nombre réduit de couleurs

Ce n’est par contre pas le meilleur choix lorsqu’il s’agit d’enregistrer :

  • Photos ou images aux bords flous.
  • Images de jeux en 16 millions de couleurs.
  • Documents scannés en niveau de gris ou en 16 millions de couleurs.

Pour ces trois cas, le JPEG est souvent un meilleur choix pour ce qui est de la taille du fichier. Par contre on a une perte plus ou moins importante de la qualité, selon le taux de compression.

Souvent le PNG donne un fichier plus petit, pour une qualité d’image non altérée, contrairement au JPEG qui dégrade et au GIF qui oblige un passage en 256 couleurs maximum.

Questions fréquentes

Pourquoi remplacer le GIF par le PNG ? La différence de taille n’est pas si grande pour une même image en 256 couleurs...

En fait le GIF est soumis à une license de Unisys (il utilise l’algorithme LZW), donc tout programme créant des GIF doit payer une license [1]. C’est pourquoi certains programmes gratuits ne proposent pas toujours de sauver des GIF (même si souvent les programmes gratuit obtiennent la licence d’Unisys sur simple demande). Un format tout à fait libre existe, et est plus efficace, donc autant l’utiliser !

Oui mais PNG c’est pas aussi compatible que GIF, non ?

En fait c’est vrai, mais bon, il faut relativiser les choses. Le PNG est donc destiné à être utilisé pour les pages web. Il fonctionne sous Internet Explorer 4 et + (sur le 4 il ne fonctionne que "inline"/"embedded", mis dans une page, et pas à part), Netscape 4.5 (les versions 3.x et 4.x peuvent les afficher grace à un plug-in), Opera 4 et +, Mozilla, et bien d’autres browsers récents. Sachant que beaucoup de monde crée des pages "Compatible IE 5", on peut dire que le fait de réduire la compatibilité des images aux browsers de version 4 n’est pas un trop gros problème.

Quels autres programmes l’acceptent ?

Quasi tous les programmes d’image un rien importants. Paint fourni avec Windows, ne le supporte pas mais bon, il y a des limites aussi ;-) Par contre il semblerait que Paint fourni avec Windows XP le supporte.

Quand je sauve en PNG, j’obtiens toujours un fichier nettement plus gros, même pour un nombre de couleurs égal.

Les fichiers créés par certains programmes sont anormalement gros : Macromedia Fireworks : Il faut sauver l’image au format web, via la commande "File" -> "Export Preview" et choisir "PNG 24 bits". On obtient alors une image qui a quasi la même taille que celle créée par Paint Shop Pro. Adobe Photoshop : Les fichiers sont un peu plus volumineux que ceux de Paint Shop Pro par exemple. En utilisant la commande "File" -> "Save for web" la taille de l’image diminue, mais pas encore suffisemment. Le plugin gratuit SuperPNG permet d’améliorer ça.

Et pour les GIF animés ?

Il existe une version animée du PNG : le MNG. Malheureusement seul Mozilla le supporte. Ni Opera, ni Internet Explorer, ni Netscape 4 ne savent lire ces fichiers. Pour les animations le GIF reste donc obligatoire

Mes images apparaissent plus foncées dans Internet Explorer, les couleurs ne correspondent pas avec les codes HTML/CSS alors que dans mon programme de retouche d’image les couleurs correspondaient.

Il semblerait qu’Internet Explorer lise mal les infos d’un des blocs contenus dans les fichiers PNG, c’est un des nombreux bugs de ce navigateur. Il s’agit du bloc "gAMA". Vous trouverez sur cette page des explications sur la manière de supprimer des blocs.

Tests et exemples

Comparaisons PNG / GIF / JPEG :

Navigateurs supportant correctement le PNG :

Mozilla :

mozilla-europe.org/fr. Navigateur réécrit à partir de zéro, destiné au départ à faire Netscape 6 (étant donné que Netscape 5, basé sur la version 4, a été abandonné). En plus du navigateur, il comporte des clients mail, news, irc, et un éditeur web. Il s’agit d’un des navigateurs les plus respectueurs des standard, et il est libre (gratuit + code source ouvert). Une grande quantité de plugins existent, permettant de modifier pas mal de choses dans l’interface et les fonctionnalités.

Mozilla Firefox :

mozilla-europe.org/fr/products/firefox. Partie "navigateur web" de Mozilla. Si vous n’avez pas besoin des autres modules, Firefox est peut-être plus adapté. Il supporte la plupart des plugins créés pour Mozilla.

K-Meleon :

www.kmeleon.org. Navigateur très léger utilisant le moteur de Mozilla pour l’affichage des pages web, mais ayant sa propre interface. Si Mozilla et Mozilla Firefox semblent trop lourd sur votre machine, K-Meleon vous plaira peut-être plus. Tout comme Mozilla, ce navigateur est libre. Malheureusement les majorité des nombreux plugins modifiant l’interface de Mozilla ne pourront pas s’adapter à K-Meleon.

Opera :

www.opera.com. Ce navigateur-ci possède son propre moteur, et est également très respectueux des standard. Dans certains cas la compatibilité avec les pages mal écrites (c’est-à-dire "optimisées pour Internet Explorer") est parfois meilleure. Le plus gros désavantage face à Mozilla est qu’il s’agit d’un logiciel commercial. Une version gratuite est disponible, mais une publicité est alors affichée en permanence dans le haut de l’écran (ce n’est pas trop gênant, car elle occupe la zone inutilisée à droite de la barre d’outils).

Liens utiles

PNG Home Site
Site officiel regroupant des informations sur le PNG, des exemples d’images et des librairies de programmation.

Burn All Gifs.
Le « combat » contre le GIF.

PNG Crush
Programme optimisant les fichiers PNG, permettant de réduire leur poids tout en n’altérant pas l’image. Un programme de conversion de BMP vers PNG est également disponible sur ce site.

SuperPNG : www.fnordware.com/superpng
Plugin pour PhotoShop permettant de sauver des PNG nettement plus optimisés au niveau de la taille du fichier.

PNG Behavior
Astuce pour faire fonctionner les PNG 32 bits (avec niveaux de transparence) dans Internet Explorer 5.5 et 6. Ça fonctionne dans la majorité des cas, mais malheureusement pas 100%. Ça reste quand même la solution la plus simple à mettre en oeuvre.

PNG in Windows IE
Une autre manière de faire fonctionner les PNG 32 bits dans Internet Explorer.

Cross-browsers semi transparent background
Une méthode simple pour placer une image en arrière-fond par CSS, compatible IE/Win 5.x et 6.0

PNGShot
Un soft qui sauve automatiquement les captures d’écrans dans des fichiers PNG lors de l’appui de la touche "Print Screen". Il peut également les uploader sur un serveur web et placer l’URL dans le presse-papiers.

TweakPNG : entropymine.com/jason/tweakpng
Affiche le contenu des fichiers PNG, mais sous forme de blocs de données, et non d’image. Cela permet de voir exactement ce qu’il y a comme données en plus de l’image elle-même et d’éventuellement faire des modifications (par exemple pour supprimer le bloc "gAMA" mal interprêté par Internet Explorer).

PNG-24 Alpha Transparency with MSIE
Un script PHP exécuté côté serveur pour rendre la transparence des images PNG-24 (y compris celles placées par CSS en image de fond) compatible avec Win/IE.

Adaptation d’un article originalement paru sur http://www.antp.be/PNG/

[1Plus tout à fait. Voir la précision en commentaire au bas de la présente page


forum

Accueil | Contact | Plan du site | | Statistiques du site | Visiteurs : 25686 / 1789534

Suivre la vie du site fr  Suivre la vie du site Cours Web  Suivre la vie du site Sites web statiques  Suivre la vie du site Design   ?    |    titre sites syndiques OPML   ?

Site réalisé avec SPIP 3.1.4 + AHUNTSIC

Creative Commons License

Visiteurs connectés : 3