Gestion de la transparence

Qu’est-ce que la transparence ?

La transparence permet de rendre certaines zones d’une image invisibles.

👉 Concrètement :

• une partie de l’image peut laisser apparaître ce qu’il y a derrière
• très utile pour superposer des images

Exemple :

• un logo sans fond
• une icône posée sur une interface

Comment ça fonctionne ?

Le canal alpha

Une image classique contient 3 informations par pixel :

• Rouge (R)
• Vert (G)
• Bleu (B)

👉 On parle de RGB

Pour gérer la transparence, on ajoute une 4e information :

• Alpha (A)

👉 On parle alors de RGBA

Valeur de transparence

Le canal alpha définit le niveau de visibilité :

• 0 → totalement transparent (invisible)
• 255 → totalement opaque (visible)
• entre les deux → semi-transparent

👉 Cela permet des effets comme :

• ombres
• flous
• dégradés transparents

Tous les formats ne gèrent pas la transparence

JPEG : pas de transparence ❌

Le format JPEG :

• ❌ ne supporte pas la transparence
• remplace les zones transparentes par une couleur (souvent blanc)

👉 Conséquence :

• impossible d’avoir un logo “découpé”
• fond toujours visible

✔ Utilisation :

• photos
• images complètes (pas besoin de transparence)

PNG : transparence avancée ✔

Le format PNG :

• ✔ supporte la transparence complète (canal alpha)
• ✔ gère les transparences progressives (semi-transparent)
• ✔ qualité sans perte

👉 Avantages :

• contours propres
• effets visuels précis

✔ Utilisation :

• logos
• icônes
• interfaces
• éléments graphiques

WebP : transparence moderne ✔

Le format WebP (développé par Google) :

• ✔ supporte la transparence (comme PNG)
• ✔ compression plus efficace
• ✔ possible avec ou sans perte

👉 Avantages :

• fichiers plus légers
• idéal pour le web moderne

✔ Utilisation :

• sites web optimisés
• applications web

Comparaison rapide

Bonnes pratiques

• ✔ Utiliser PNG pour les images avec transparence de qualité
• ✔ Utiliser WebP pour optimiser les performances web
• ❌ Ne jamais utiliser JPEG pour un logo ou une icône

👉 Règle simple :

• besoin de transparence → PNG ou WebP
• photo classique → JPEG

En résumé

La transparence permet de rendre une partie d’une image invisible, grâce au canal alpha.

• JPEG → pas de transparence
• PNG → transparence précise et fiable
• WebP → transparence + optimisation

👉 Bien gérer la transparence est essentiel pour :

• le design web
• les interfaces
• les logos et éléments graphiques

Si tu veux, je peux te faire :

• un TP simple (tester les 3 formats en HTML)
• ou un exercice visuel où les élèves doivent choisir le bon format