[Tutorial/Astuce] PNG et IE

[GregK84]

La version PDF est plus récente que ce post, vous pouvez la télécherger ICI.


.:: Message personnel ::.

Je pense que je ne mes personne au courant en disant que le PNG (Portable Network Graphics) est relativement mal interprété par "Le Grand" Internet Explorer.
Je vais essayer de vous démontrez que malgré cet handicap il est possible d'utiliser du PNG sur une page Internet.

Je n'ai pas testé toutes les solutions présente dans ce tutorial, et oui cela prend un certain temps pour effectuer la rechercher et cela en prend encore plus de temps pour rediger un tutorial. J'espere que vous ferez part de vos exeperiance (surtout si vous avez testé les solutions proposée dans ce tutorial, vous pouvez aussi m'envoie vos exemples je les ajouterai aux tutorial).

Merci

Ce Tutorial/Astuce est disponible en version Forum, ICI et en version PDF, LA.

.:: Introduction ::.

Le format PNG (Portable Network Graphics) est un format de fichier graphique bitmap. Il a été mis au point en 1995 afin de fournir une alternative libre au format GIF, format propriétaire dont les droits sont détenus par la société Unisys (propriétaire de l'algorithme de compression LZW), ce qui oblige chaque éditeur de logiciel manipulant ce type de format à leur verser des droits. Ainsi PNG est également un acronyme récursif pour PNG's Not Gif.

.:: Caractéristique ::.

Le format PNG permet de stocker des images en noir et blanc, en couleurs réelles ainsi que des images indexées, faisant usage d'une palette de 256 couleurs.
De plus il supporte la transparence par couche alpha, c'est-à-dire la possibilité de définir 256 niveaux de transparence, tandis que le format GIF ne permet de définir qu'une seule couleur de la palette comme transparente. Il possède également une fonction d'entrelacement permettant d'afficher l'image progressivement.
La compression proposée par ce format est une compression sans perte (lossless compression) 5 à 25% meilleure que la compression GIF.
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.

.:: Compatibilité et problèmes rencontrés ::.

Le PNG est correctement supporté et interprété par beaucoup de navigateur récent, malheureusement pour lui "Les Grands" de ce monde ne le supporte pas correctement.

Les navigateurs suivant gère correctement le PNG : Mozilla, Mozilla Firefox, K-Meleon, Opera, Netscape, … pour plus information vous pouvez consultez cette page(en anglais).

Internet Explorer pour Windows, ne gère pas le PNG 24 mais gère très bien le PNG 8. Il n'est donc pas possible d'employer d'images avec une transparence graduelle sur 256 niveaux sur ce navigateur, mais il est possible après une petite manipulation qu'il affiche correctement un PNG 24bits avec 1 seule couleur de transparence.
La version Macintosh ne souffre pas de ce handicap. Mais là encore, la correction gamma semble incorrecte. C'est un des nombreux bugs de ce navigateur.

Photoshop, compresse assez mal le PNG. En effet, ce format possède plusieurs niveaux de compression, de 0 à 9 et Photoshop est bloqué à 6 sans qu'il soit possible de changer ce paramètre dans les options. La compression étant non destructive, le niveau 9 assure le même rendu à l'image tout en étant bien plus léger. De même, les images créées avec ce logiciel ne semblent pas prendre en compte la correction gamma correctement.
Mais la encore, il est possible de remédier à ce problème soit avec un programme supplémentaire ou avec un plug-in pour photoshop.

.:: Les avantages du PNG ::.

Le PNG présente de nombreux avantages en comparaison du GIF : il est plus léger, plus puissant, plus fiable et sous licence libre.
Voici deux liens comparant le PNG au format GIF et JPEG.

Comparaison PNG / GIF / JPEG avec une capture du logiciel WCPUID :
http://www.antp.be/PNG/wcpuid/

Comparaison PNG / GIF / JPEG avec une capture du Poste de travail de Windows :
http://www.antp.be/PNG/poste/

.:: Les inconvénients du PNG ::.

Il est mal géré par les programmes qui détiennent le monopole.

.:: Les outils ::.

Il est tout à fait possible de remplacer un GIF par un PNG, à condition de l'employer dans les mêmes conditions. Concernant les problèmes de poids, il y a 3 possibilité, on peut employer un plug-in pour Photoshop (superPNG - freeware), un petit logiciel (PngOptimizer - freeware) de nettoyage qui compresse mieux que Photoshop ou d'utiliser un outil plus performant sur ce point, comme Gimp.

Si vous utilisez des Gif sur votre site, vous pouvez les remplacer par un PNG 8bits (256 couleurs), le résulta sera le même et le pois pourra être plus légé. Pour un résulta optimal, optimiser votre image avec PngOptimizer.


Si maintenant vous souhaitez utiliser un PNG 24bits où + avec de la transparence, il est possible via une manipulation de rendre votre fichier PNG compatible avec Internet Explorer. Mais cela ne sera possible que si vous utilisez une seule couleur de transparence.

La démarche est simple, vous créez votre image, vous n'utilisez qu'une seule couleur pour la transparence (comme pour le format gif), vous ouvrez votre image avec (TweakPNG - opensource) et vous supprimer la couche gAMA (cette même couche qui est si mal interprétée par Internet Explorer). Voici un petit tutorial.

Voila déjà quelques problèmes de résolut. Mais certain d'entre vous en voudrons plus, alors je vais vous donner quelques quelque solutions qui malheureusement ne fonctionne pas à 100%. Il s'agit principalement de Hack ou d'astace qui permette à Internet Explorer d'afficher un PNG avec une couche alpha.

1ere solution : (bidouiller les css)

Internet Explorer supporte partiellement le format PNG, le canal alpha n'est pas spontanément appliqué. Il existe une méthode permettant à Internet Explorer versions 5.5 et ultérieures d'afficher correctement les images avec canal alpha, noter que cette méthode ne s'applique qu'aux balises <img/> et qu'aux directives CSS background[-image].
Il s'agit de la directive CSS non-officielle "filter" utilisant une commande propriétaire : AlphaImageLoader. Ainsi pour afficher une image au format PNG, au lieu d'utiliser :

Code : Tout sélectionner

<img src="foo.png" />

Internet Explorer nécessite :

Code : Tout sélectionner

<img src="blank.gif" style="width:100px; height: 64px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='foo.png', sizingMethod='scale');" />

Remarquer l'inclusion du « blank.gif » qui pointe vers un fichier GIF de dimension 1 pixel par 1 pixel, transparent. Il faut aussi spécifier la taille de l'image PNG via une directive CSS afin que l'image soit affichée à la bonne taille. Pour les fonds d'écran, au lieu d'utiliser :

Code : Tout sélectionner

<div style="background: url(foo.png);"></div>

Il suffit d'allonger la directive :

Code : Tout sélectionner

<div style="background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='foo.png', sizingMethod='scale');"></div>

2eme solution : (jouer avec du javascript, ce script utilise la balise span pour afficher les images png, ce n'est pas très valide et cela peu poser quelques problèmes)

http://fashion.hosmoz.net/blog/2005/01/ ... ansparents

3eme solution : (il s'agit du même principe que la 2eme solution, donc même problème. De plus son code est beaucoup plus indigeste)

http://www.mambofrance.org/Dossiers/Tem ... ns_IE.html

4eme solution : (Dans le même style que la première solution, mais automatisée cette fois. D'après les utilisateurs cela fonctionne relativement bien.)

http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

5eme solution : (je n'ai pas compris grand chose aux explication, vous comprendez en allant voir le site, ce script a l'air de fonctionner sur le même principe que la 4eme solution sauf qu'il est adaptable aux images et aux background. Contrairement à la 2eme et 3eme solution, il ne remplace pas les balises <img> par un span, mais il interagit sur le src du lien qui appel cette image).

http://arcok.ujevangelizacio.hu/bubu/ex ... e-png.html

6eme solution : (Ce script fonctionne sur le même principe que la 1ere et la 4eme solution, sauf qu'il est réalisé en php. Il est donc utilisé coté serveur ce qui me semble intéressent si le javascript était désactivé)

http://www.koivi.com/ie-png-transparency/

.:: Les liens ::.

Fichier PDF : http://www.pspliberte.com/tuto/psd.pdf
PNG : http://www.libpng.org/pub/png/
MNG : http://www.libpng.org/pub/mng/
Liste des navigateurs qui gère le PNG : http://www.libpng.org/pub/png/pngapbr.html
Comparaison PNG / GIF / JPEG avec une capture du logiciel WCPUID : http://www.antp.be/PNG/wcpuid/
Comparaison PNG / GIF / JPEG avec une capture du Poste de travail de Windows : http://www.antp.be/PNG/poste/
SuperPNG : http://www.fnordware.com/superpng/
PngOptimize : http://www.psydk.org/PngOptimizer.php
Tweakpng : http://entropymine.com/jason/tweakpng/
Tutorial pour Tweakpng : http://www.antp.be/PNG/tweakpng/.

.:: Les solutions proposée ::.

Solution 2 : http://fashion.hosmoz.net/blog/2005/01/ ... ansparents
Solution 3 : http://www.mambofrance.org/Dossiers/Tem ... ns_IE.html
Solution 4 : http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
Solution 5 : http://arcok.ujevangelizacio.hu/bubu/ex ... e-png.html
Solution 6 : http://www.koivi.com/ie-png-transparency/


Voila, si vous souhaite ajouter quelques chose n'hesiter surtout pas. Et si vous testez les différentes solutions il peut être intéressant de les commanter. je n'ai malheuresement pas eu le temps de le faire. Donc tout les testeurs sont les bienvenues

[calimo]

Ce Tutorial/Astuce est disponible en version Forum, ICI et en version PDF, LA.

Le lien ne fonctionne pas

Deux petites remarques.
Toutes ces solutions semblent plus ou moins invalides... c'est très dommage
Je suis décu que les deux solutions qui me sautent à l'esprit en voyant le titre du sujet ne soient pas sorties.

La première, c'est le fabuleux IE7 ! Un type, seul, a corrigé plus ou moins tous les bugs d'implémentation des standards d'IE. Ainsi corrigé, IE est probablement encore plus performant que Mozilla ! C'est lourd, mais il faut ce qu'il faut, et c'est parfaitement valide, donc ça ne pose pas de problèmes dans les autres navigateurs et la réussite est assurée. Bref c'est incontournable. Bien entendu parmi tout ça il y a une parfaite gestion du PNG.

La deuxième, celle que je mets en place, très simple, non invasive dans le code : fixer une couleur d'arrière plan au PNG.
Dans The GIMP on a le choix, à l'enregistrement, d'enregistrer la couleur d'arrière plan. IE appliquera simplement celle-là plutôt que le gris par défaut. C'est ultra-simple à mettre en oeuvre, il y a un autre moyen de le faire que THE GIMP que je ne connais plus. Attention simplement à ne pas passer l'image par le "PNG Optimizer" de Psychedelik Darken (cité au début) qui supprime cette couleur. Évidemment ça ne fonctionne que sur des fonds unis, mais c'est tellement simple et enfantin à mettre en oeuvre qu'il faut aussi le citer

[HP]

perso, j'ai opté pour la solution PNG à la place du GIF ...
il faudrait que j'applique çà sur mon forum et que je remplace tout les smileys !

ça me fait en encore un peu flipper ... mais ça fait parti de ma todo list !

j'utilise simplement du PNG avec 1 seule couleur de transparence le tout optmisé avec le fabuleux "PNG Optimizer".

[GregK84]

Ce Tutorial/Astuce est disponible en version Forum, ICI et en version PDF, LA.

Le lien ne fonctionne pas

Voila j'ai corrigé le lien, faute de frappe

Deux petites remarques.
Toutes ces solutions semblent plus ou moins invalides... c'est très dommage
Je suis décu que les deux solutions qui me sautent à l'esprit en voyant le titre du sujet ne soient pas sorties.

C'est p-e parce que je n'en ai pas entendu parlé ou que je n'avais pas asser de documentation sur le sujet.

La première, c'est le fabuleux IE7 ! Un type, seul, a corrigé plus ou moins tous les bugs d'implémentation des standards d'IE. Ainsi corrigé, IE est probablement encore plus performant que Mozilla ! C'est lourd, mais il faut ce qu'il faut, et c'est parfaitement valide, donc ça ne pose pas de problèmes dans les autres navigateurs et la réussite est assurée. Bref c'est incontournable. Bien entendu parmi tout ça il y a une parfaite gestion du PNG.

Je n'ai pas lu énormément de truc sur ie7, mais si j'ai bonne mémoire il ne sortira pas avant un certain temps +- long . il serait en effet utile de spécifier qu'il corrigera ce problème. je vais essaye de trouvé de la doc sur ce sujet.

La deuxième, celle que je mets en place, très simple, non invasive dans le code : fixer une couleur d'arrière plan au PNG.
Dans The GIMP on a le choix, à l'enregistrement, d'enregistrer la couleur d'arrière plan. IE appliquera simplement celle-là plutôt que le gris par défaut. C'est ultra-simple à mettre en oeuvre, il y a un autre moyen de le faire que THE GIMP que je ne connais plus. Attention simplement à ne pas passer l'image par le "PNG Optimizer" de Psychedelik Darken (cité au début) qui supprime cette couleur. Évidemment ça ne fonctionne que sur des fonds unis, mais c'est tellement simple et enfantin à mettre en oeuvre qu'il faut aussi le citer

Cette solution non plus je ne la connaissais pas, mais elle est similaire ma solution d'utiliser un fond d'une seul couleur et d'effacer la couche gAMA. Je sais que cela "détériore" un peu le fichier, mais cette solution fonctionne.

je reconnais que les propositions pour corriger ce probleme avec du code n'est pas la meilleur solution, mais ces solutions existe et fonctionne (c pas au point et cela produit souvant du code invalide, mais pour les personnes peu souciante de ce detail elles seront p-e être satisfaite).

par contre je serais ravis si tu pouvais m'en dire un peu plus sur comment remplacer la couleur de fond avec gimp (et l'autre moyen si cel te reviens) que je complete ce post.

merci

[martin]

Calimo ne te parle pas de la nouvelle version d'IE de microsoft, mais du fantastique "patch" javascript réalisé par Dean Edwards nommé IE7.

Il s'agit en fait de plusieurs modules javascript à inclure dans les pages par des commentaires conditionnels lisibles uniquement par IE. Je trouve le projet parfois pas assez modulaire, et donc parfois un peu lourd si il n'y a qu'une correction nécessaire, mais un module concerne le support du png.
Le résultat du tout est vraiment ébourifant !!

[GregK84]

Calimo ne te parle pas de la nouvelle version d'IE de microsoft, mais du fantastique "patch" javascript réalisé par Dean Edwards nommé IE7.

Il s'agit en fait de plusieurs modules javascript à inclure dans les pages par des commentaires conditionnels lisibles uniquement par IE. Je trouve le projet parfois pas assez modulaire, et donc parfois un peu lourd si il n'y a qu'une correction nécessaire, mais un module concerne le support du png.
Le résultat du tout est vraiment ébourifant !!

aaaaaaaaaaaaaahhhhhhhh lol
je n'avais pas compris ca !
effectivement, il s'agit d'une très bonne info
je vais essaye d'en savoir plus sur le sujet, j'avais confondu avec la prochaine version d'internet explorer, mais ca je crois que vous l'aviez compris lol

merci pour cet éclaircissement je ne connaissais pas

[calimo]

Encore une chose :

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.

En fait il me semble que pout d'obscures raisons, ce support a été supprimé dans Mozilla (depuis je ne sais plus quelle version).
Si je ne me trompe pas, le seul moteur supportant le MNG est maintenant KHTML (Konqueror et Safari).


Pour IE7 effectivement, si Microsoft sort IE7 il sera probablement plus mauvais que ce supplément, à insérer directement dans les pages. C'est lourd mais c'est tout le mal qu'on souhaite à ce navigosaure.

Cette solution non plus je ne la connaissais pas, mais elle est similaire ma solution d'utiliser un fond d'une seul couleur et d'effacer la couche gAMA. Je sais que cela "détériore" un peu le fichier, mais cette solution fonctionne.

Ma solution avec The GIMP ne déteriore pas l'image (à part le fait de lui ajouter quelques Ko...)

Avec The GIMP c'est tout simple, lors de l'enregistrement en PNG tu as un message avec les options d'enregistrement, et là il y a une simple case à cocher dont je n'ai plus le nom exact pour enregistrer la couleur d'arrière-plan. Et là c'est tout simplement la couleur d'arrière-plan qui est enregistrée, regarde par exemple les images du menu horizontal de http://extensions.geckozone.org/ , l'arrière-plan est simplement en bleu. Aucune influence pour les navigateurs qui supportent la transparence correctement, tu peux changer le style d'affichage sous Mozilla (attention, évite de passer de "Moderne fixe" à "Geckozone" si tu veux éviter le crash), l'image n'est pas dégradée et le fond est "correct" sous IE

[GregK84]

Encore une chose :

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.

En fait il me semble que pout d'obscures raisons, ce support a été supprimé dans Mozilla (depuis je ne sais plus quelle version).
Si je ne me trompe pas, le seul moteur supportant le MNG est maintenant KHTML (Konqueror et Safari).

je vais faire la modification ...

Pour IE7 effectivement, si Microsoft sort IE7 il sera probablement plus mauvais que ce supplément, à insérer directement dans les pages. C'est lourd mais c'est tout le mal qu'on souhaite à ce navigosaure.

si cela fonctionne correctement, meme si les pages mettent un peu plus de temps a charger cela vaut le coup !

Cette solution non plus je ne la connaissais pas, mais elle est similaire ma solution d'utiliser un fond d'une seul couleur et d'effacer la couche gAMA. Je sais que cela "détériore" un peu le fichier, mais cette solution fonctionne.

Ma solution avec The GIMP ne déteriore pas l'image (à part le fait de lui ajouter quelques Ko...)

Avec The GIMP c'est tout simple, lors de l'enregistrement en PNG tu as un message avec les options d'enregistrement, et là il y a une simple case à cocher dont je n'ai plus le nom exact pour enregistrer la couleur d'arrière-plan. Et là c'est tout simplement la couleur d'arrière-plan qui est enregistrée, regarde par exemple les images du menu horizontal de http://extensions.geckozone.org/ , l'arrière-plan est simplement en bleu. Aucune influence pour les navigateurs qui supportent la transparence correctement, tu peux changer le style d'affichage sous Mozilla (attention, évite de passer de "Moderne fixe" à "Geckozone" si tu veux éviter le crash), l'image n'est pas dégradée et le fond est "correct" sous IE

je vais essaye d'en savoir un peu plus et je completerai mon tuto. dans l'emsemble, je pense qu'il sera +- complet.

merci pour les infos suplémentaire.

[DJiK]

le tout optmisé avec le fabuleux "PNG Optimizer".

J'ai jamais gagné + de 0,01% avec PNGOptimizer.
J'utilise Paint Shop pro et p-e enregistre-t-il déjà pas mal optimisé. (Je l'ai tjs préféré à Photoshop, et à Gimp. (désolé Calimo! ))



C'est marant j'ai vu la solution n° 3 sur un site récemment, et je pensais poster ici pour demander si qqn connaissait ce truc.

Je savais pas qu'IE7 permettait de gérer la transparence des PNG!


Quand au vrai IE7 de chez Billou, il a été avancé: prévu pour cet été, mais vous devez déjà être au courant. Y'a plus qu'à espérer...




cv
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1

[HP]

le tout optmisé avec le fabuleux "PNG Optimizer".

J'ai jamais gagné + de 0,01% avec PNGOptimizer.
J'utilise Paint Shop pro et p-e enregistre-t-il déjà pas mal optimisé. (Je l'ai tjs préféré à Photoshop, et à Gimp. (désolé Calimo! ))

perso, je retravaill pas mal de ressources comme tes templates et des thèmes et je ne sais pas trop avec travaille les personnes qui mettent çà à disposition mais sur des GIFs il n'est pas rare que je gagne jusqu'à 50%.

pour ce qui est de paint Shop ! trop cher pour moi
je bosse avec Photofiltre ... j'enregistre au format PNG sans compression et c'est PNG Optimizer qui se charge du reste.

[GregK84]

J'utilise Paint Shop pro et p-e enregistre-t-il déjà pas mal optimisé. (Je l'ai tjs préféré à Photoshop, et à Gimp. (désolé Calimo! ))

j'ai lu je ne sais plus ou que paint shop pro optimisait mieux les png que photoshop ...

C'est marant j'ai vu la solution n° 3 sur un site récemment, et je pensais poster ici pour demander si qqn connaissait ce truc.

désolé si je t"ai pris de cour je compte essayer de faire un post similaire sur le jpeg2000 (en fonction de mes temps libre)

Je savais pas qu'IE7 permettait de gérer la transparence des PNG!

Moi, je ne connaissais meme pas ... mais c super comme truc !

Quand au vrai IE7 de chez Billou, il a été avancé: prévu pour cet été, mais vous devez déjà être au courant. Y'a plus qu'à espérer...

L'espoir fait vivre ! on ne sait jamais qu'il nous surprendrait ... bien que j'ai des doutes

[DJiK]

L'espoir fait vivre ! on ne sait jamais qu'il nous surprendrait ... bien que j'ai des doutes

À l'annonce il n'a parlé que de sécurité, anti-popup, ou petites fonctions à 2 balles. Rien sur XHTML, CSS, PNG...

[GregK84]

enfet juste le nom change, il restera tjr aussi pourri et ne respectera aucun standards ...

[calimo]

Pas si sur...
Il n'y aura sans doute rien d'exceptionnel niveau standards, mais quand-même peut-être certaines choses. Microsoft tient à garder son monopole (je rappel qu'ils ont peu du web), et d'après une récente étude la sécurité n'est pas l'argument principal des entreprises qui migrent à Firefox, c'est bien en premier l'ergonomie et les fonctions, et les standards en deuxième, et la sécutité est un argument secondaire (de toutes façons les entreprisent sécurisent leurs réseaux, que ce soit IE ou Firefox). MS peut bien sécuriser son IE7, ça n'empêchera pas les entreprises de migrer.

[HP]

ce serait une bonne nouvelle ...

Calimo porteur d'espoir sur ce coup là !