Gérer les transparences des PNG sous IE

Gérer les transparences des PNG sous IE

fév 11

tweak1

Vous vous êtes peut-être déjà cassé la tête lorsque vos images PNG(avec de la transparence) s’affichaient differemment sous les navigateurs autres que IE et IE. Une de ces solutions est un petit hack dans l’image PNG en question.

tweaker

Pour la modifier et la rendre « compatible » avec tous les navigateurs, il faut supprimer la couche gAMA de l’image. Pour cela il existe un logiciel simple et gratuit qui permet justement de faire ça, c’est TweakPNG que vous pouvez télécharger ci dessous.

Télécharger TweakPNG

Pour supprimer cette couche gAMA, ouvrez TweakPNG et choisissez votre image.

tweak2

Vous avez normalement une liste des couches existantes et vous devez en avoir une qui s’appelle gAMA, selectionnez là et appuyez sur Delete pour l’effacer. Sauvegardez votre image sous un autre nom, au cas où vous auriez fait une gaffe et vous pouvez maintenant l’utiliser dans votre design. (N’oubliez pas de changer le nom de l’image)

Normalement tout fonctionne.


3 comments

  1. En fait c’est surtout utile lors de la conception d’un site ou lors, dans mon cas par exemple, de la création/modification d’un thème WordPress(ou Blogger ou n’importe quoi d’autre). Si tu souhaites utiliser une image réalisée sous Photoshop à l’aide de dégradés et de transparents, les couleurs ne seront pas pareilles sous IE et les autres donc pour cela il faut retirer ce filtre Gamma. Une autre solution beaucoup moins pratique est d’identifier le navigateur et en fonction ajouter une autre couleur au background selon que l’on soit sous IE ou sous un autre navigateur…

  2. merci pour cette astuce, je n’arrive pas à me rendre compte de l’effet mais ça peut toujours servir ! :) :)

  3. Petite astuce très pratique ! Je ne m’étais même pas demandé pourquoi IE merdait sur les PNG (de toute façon mon lectorat utilise Firefox à 95%)

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>