Créer des PNGs transparents avec Photoshop

Beaucoup de gens sont persuadés qu’Internet Explorer ne sait pas lire les images au format PNGs. La vérité est plus nuancée…

En réalité, IE6 gère les PNGs8 et même la transparence… Mais dans certaines limites.

Voici les réglages à utiliser pour qu’une image PNG8 comporte des zones de transparence et s’affiche correctement sur IE6  :

  1. Ouvrir la fenêtre Enregistrer pour le web et les périphériques (CTRL+ALT+SHIFT+S)
  2. Choisir les réglages suivants (je liste les paramètres de gauche à droite) :
    • PNG-8
    • Décocher « entrelacé »
    • Perception
    • Couleurs : 256
    • Sans tramage
    • Cocher « transparence »
    • Cache: sans ou la couleur de fond sur laquelle les images doivent se fondre (*)
    • Sans tramage de transparence
  3. Enregistrer ces réglages en tant que paramètre prédéfini pour pouvoir les retrouver facilement

Pour y voir plus clair, rien ne vaut une image :

Réglages de transparence PNG compatibles IE6

Certains des paramètres sont ajustables au cas par cas (palette, nombre de couleurs, cache).


* : La couleur de cache sera mélangée aux pixels qui ont une information de transparence comprise entre 0 et 100%. Elle permet d’ajuster une ombre ou un dégradé afin qu’il s’intègre au fond sur lequel l’image sera posé. On perd la flexibilité de la transparence progressive, mais là c’est la faute de Microsoft.