Trois formats s'offrent à vous Jpeg, Gif et Png. Alors pourquoi un jipègue? Pourquoi pas? Ce n'est pas très compliqué.

Prenez cette belle icône

Vous constatez dans le fichier de départ qu'il y a un calque et un arrière-plan.

Masquez l'arrière-plan et notez les petits carrés gris dans le fond. Ils indiquent la transparence. Mais il n'y a pas que la transparence de détourage (zones avec pixels ou sans pixels).

J'ai également entouré la transparence d'opacité. Il y a bien des pixels dans le bas du dossier mais ceux-ci ont une opacité réduite : une vraie transparence.

Maintenant exportons pour le Web. La vignette de gauche indique l'original et les trois autres, chacune un des formats possibles.

Jpeg : pas de transparence du tout.

Gif : transparence de détourage (et encore, avec une frange épouvantable) et désastre sur les ombres portées.

PNG 24 : le mimi, le rara, le miracle.

Remontons ces 3 icônes sur un fond de couleur:

Alors plus de doutes, pour tous vos habillages graphiques Web 2.0 vous savez quel format utiliser : le png rocks!

Attention toutefois avec IE 5, 5.5 et même 6, il peut y avoir des problèmes de visualisation des transparences. Faites une recherche sur "png fix" et vous trouverez un tas de petits scripts à ajouter à vos en-têtes pour forcer Microsoft à obtempérer.

Quand même !

Bises.