Les formats JPEG, PNG, GIF et la transparence

Là on touche un point sensible au niveau de l'infographie. La transparence est primordiale, du fait qu'elle nous permet d'assurer une insertion maîtrisée de l'image dans n'importe quel arrière-plan.

• Le JPEG ne supporte pas la transparence

• La transparence PNG-8 et GIF

• La transparence PNG-24

• Le canal alpha et le filtrage anti-aliasing (anticrénelage)

Le JPEG ne supporte pas la transparence

Lorsque vous entendez enregistrer une image qui contient des pixels transparents et des pixels partiellement transparents sous le format JPEG, Photoshop vous propose de mélanger les pixels transparents avec une couleur qui peut être spécifiée dans le menu "Détourage" N°10 : Il faut faire attention à ce propos :

• un pixel totalement transparent va avoir pour couleur celle spécifiée dans le menu "Détourage" car le pixel est totalement transparent et n'a donc aucune couleur inhérente ;
• pour le cas des pixels partiellement transparents la couleur finale sera le fruit de la couleur initiale du pixel ainsi que la couleur spécifiée dans le menu "Détourage".

La transparence PNG-8 et GIF

Les deux formats PNG-8 et GIF supportent une transparence binaire qui se caractérise par deux états distincts : totalement opaque ou totalement transparent, ceci implique que les pixels partiellement transparents ne vont pas être restitués fidèlement mais plutôt ils vont être mélangés avec une autre couleur qui peut être précisée dans le menu "Détourage".

La transparence PNG-24

Le format PNG-24 offre la possibilité d'une transparence graduelle à 256 niveaux selon l'opacité qui peut être réglée dans la fenêtre des calques : Contrairement aux formats PNG-8 et GIF, le format PNG-24 peut restituer parfaitement les pixels partiellement transparents.

Pour bien parfaire vos connaissances quant à la transparence des formats d'mages je vous ai préparé une petite application Pour en tirer profit, faites déplacer l'un des formats suivants sur le contenu de la page.

JPEG
GIF non transparent
GIF transparent
PNG-8 non transparent
PNG-8 transparent
PNG-24 non transparent
PNG-24 transparent

Commentaires

• le format JPEG ne pourra en aucun cas supporter l'effet de transparence.
• les deux formats GIF et PNG-8 supportent uniquement une transparence binaire (opaque/transparent), autrement dit, ils ne peuvent pas exprimer une transparence à différentes intensités.
• pour les formats non transparents, Photoshop proposent toujours de mélanger les pixels totalement et partiellement transparents avec une autre couleur qui peut être spécifiée dans le menu détourage. A ce propos il y a 3 situations différentes :
  • les formats d'images sont complètement opaques (JPEG, GIF, PNG-8 et PNG-24 non transparents) : la couleur spécifiée dans le menu détourage va cibler les pixels totalement et partiellement transparents.
  • les formats PNG-8 et GIF transparents : la couleur spécifiée dans le menu détourage va cibler les pixels partiellement transparents.
  • le Format PNG-24 peut restituer parfaitement les pixels transparents et semi transparents. Pour bien appréhender la transparence graduelle du PNG-24, déplacez l'image au dessus du texte pour admirer l'effet de transparence multiniveau : la bordure et les noms des navigateurs sont totalement opaque (opacité : 100% = alpha : 255), les icônes des browsers sont partiellement transparentes (opacité : 75% = alpha : 175), le fond est totalement transparent (opacité : 0% = alpha : 0).
    En faisant survoler l'image sur le contenu de la page vous allez vous rendre compte que les icônes des navigateurs laissent apparaître plus ou moins ce qui est en-dessous.
• Internet Explorer 6 gère mal le canal alpha et affiche les images PNG-24 sans transparence, il se comporte d'une manière assez étrangère en remplissant les pixels transparents par un bleu clair (azur) qui a la valeur hexadécimale #d3e6ea ou si vous voulez la valeur RGB(211,230,234).

Le canal alpha et le filtrage anti-aliasing (anticrénelage)

L'un des avantages appréciables du canal alpha en plus de la transparence graduelle, c'est la possibilité d'assurer un filtrage anti-aliasing. De quoi s'agit-il exactement ?

L'anti-aliasing permet de diminuer l'effet d'escalier des images qui apparaît tout au long des contours des éléments de l'image (les éléments internes de l'image : les tracés, textes, logos, bords d'objets etc.). L'effet aliasing est attribuable à l'aspect discret (discontinu) des données numériques : on peut pas avoir par exemple un demi pixel au bord d'un objet mais une image est constituée toujours d'un ensemble de pixels indivisibles, même si on a seulement besoin d'un demi ou quart de pixel pour dessiner le bord d'un tracé l'image va recevoir un autre pixel ce qui va un petit peut diminuer la qualité des bords.

Comme en statistiques il y a des variables continues comme la taille, le poids etc. et il y a des variables discontinues par exemple le nombre de célibataires, on peut pas dire qu'on a trois célibataires et demi sur cent (3.5/100) car un homme est indivisible Par contre on peut avoir des valeurs fractionnaires dans les deux variables taille et poids. Remarquez bien cette image qui contient la lettre G :

L'anti-aliasing permet de lisser les bords en dégradant (diminuant progressivement l'intensité) les couleurs des pixels formant les contours d'objets (dans notre cas la couleur noire). Pour voir un exemple vivant du filtrage anti-aliasing faites une comparaison entre les formats PNG-8 transparent, GIF transparent et le format PNG-24 transparent, vous allez vous rendre compte que les bords des icônes sont plus fins et plus soignés dans le format PNG-24 transparent que dans les deux autres formats.

Je parie que certains d'entre vous préfèrent apprendre le code XHTML des images, et qu'ils n'arrivent plus à se patienter davantage Calmos les gars Juste deux autres points à apprendre avant de passer au XHTML : Quel format d'images choisir pour le Web ?