Le canal alpha est la quatrième valeur stockée dans un pixel qui contrôle sa transparence, assis à côté des valeurs rouge, verte et bleue qui définissent sa couleur. Alpha s'étend sur une gamme allant de totalement invisible à totalement solide, avec tous les niveaux de transparence partielle entre les deux. C'est la seule raison pour laquelle un logo PNG peut flotter proprement sur n'importe quel arrière-plan alors qu'un JPG ne le peut pas, car JPG n'a pas de canal alpha du tout. La transparence n’est pas une illusion ou une propriété de l’image dans son ensemble ; ce sont des données attachées à chaque pixel individuel. Ce guide explique ce qu'est le canal alpha, comment il stocke des centaines de niveaux de transparence, les calculs de composition qui mélangent les calques transparents, quels formats le prennent en charge et ce qui lui arrive lorsque vous convertissez une image d'un format à un autre.

Qu'est-ce que le canal alpha ?

Chaque image numérique est une grille de pixels et chaque pixel stocke des nombres qui la décrivent. Dans une image couleur standard, chaque pixel contient trois nombres pour le rouge, le vert et le bleu. Le canal alpha ajoute un quatrième nombre qui répond à une question différente : non pas de quelle couleur est ce pixel, mais combien devriez-vous en voir. Un pixel peut être rouge vif et entièrement uni, rouge vif et semi-transparent, ou rouge vif et complètement invisible. La couleur reste la même dans les trois cas ; seul l'alpha change. Cette séparation de la couleur et de l’opacité est ce qui rend possible une transparence flexible.

Le terme vient des travaux d'alpha compositing publiés par Thomas Porter et Tom Duff en 1984, qui formalisaient la manière de combiner images et transparence. Leur modèle est toujours le fondement de tout programme graphique, navigateur Web et moteur de jeu moderne. Le canal alpha n’est donc pas une commodité récente attachée aux formats d’image ; c'est une idée vieille de plusieurs décennies qui alimente silencieusement presque tout ce que vous voyez sur un écran.

RGBA : la quatrième valeur de chaque pixel transparent

Lorsqu'un pixel est porteur de transparence, il est décrit avec quatre valeurs au lieu de trois, écrites sous la forme RGBA : rouge, vert, bleu et alpha. Vous voyez cette notation partout dans la conception et le travail Web. En CSS, une couleur comme rgba(255, 0, 0, 0.5) signifie du rouge pur avec une opacité de 50 %. Dans un éditeur d'images, la même idée apparaît sous la forme d'un curseur d'opacité sur un calque. Le A est toujours la valeur d’opacité, superposée à la couleur plutôt que mélangée à celle-ci.

Garder l'alpha séparé de la couleur compte. Si la transparence était intégrée aux valeurs de couleur, un rouge semi-transparent devrait être stocké sous forme de rose plus clair, et vous ne pourriez jamais récupérer le rouge d'origine ni le placer proprement sur un fond sombre. En stockant l'opacité comme son propre canal, le format conserve la vraie couleur intacte et laisse le logiciel décider comment la mélanger avec ce qui se trouve derrière. Cette flexibilité est exactement la raison pour laquelle les concepteurs exportent des ressources avec un canal alpha plutôt que de les pré-mélanger sur un arrière-plan.

Comment alpha stocke les niveaux de transparence

Le canal alpha ne se contente pas de stocker ou de désactiver. Dans une image standard 8 bits, alpha contient 256 niveaux distincts, de 0 à 255. Une valeur de 0 signifie que le pixel est entièrement transparent et invisible, 255 signifie qu'il est entièrement solide et opaque, et chaque nombre intermédiaire produit une transparence partielle. Une valeur de 128 rend le pixel environ à moitié transparent, laissant transparaître l'arrière-plan avec une force de 50 %.

Ces 256 niveaux sont ce qui donne à la transparence une apparence douce plutôt que dure. Une ombre portée s'estompe progressivement car ses pixels portent des valeurs alpha décroissantes vers le bord. Un effet de verre ou de fumée fonctionne car différents pixels sont transparents à des degrés différents. Les formats haut de gamme vont plus loin : offre de canaux alpha 16 bits 65 536 niveaux pour la composition professionnelle, bien que le 8 bits soit la norme pour les images Web et couvre tout ce dont l'œil a besoin.

Compositing alpha : les mathématiques qui mélangent les couches

Lorsqu'un pixel transparent se trouve sur un arrière-plan, le logiciel doit déterminer la couleur finale que vous voyez. Il le fait avec une formule de mélange simple. Le résultat visible est égal au la couleur de premier plan multipliée par son alpha, plus la couleur d'arrière-plan multipliée par un moins cet alpha. En termes simples, un pixel opaque à 70 % contribue à 70 % de sa propre couleur et laisse passer 30 % de l’arrière-plan.

Exécutez ce calcul sur chaque pixel et vous obtenez un composite épuré : un logo fusionné sur une photo, une légende estompée sur une vidéo, un menu dessiné sur une page Web. Cela se produit constamment. Chaque fois qu'un navigateur dessine un élément semi-transparent ou qu'un jeu génère une bouffée de fumée, il effectue une composition alpha des millions de fois par seconde. Le canal alpha fournit la valeur d'opacité dont la formule a besoin pour chaque pixel.

Anti-aliasing : pourquoi l'alpha rend les bords lisses

L'une des tâches les plus importantes du canal alpha est de produire bords nets et anticrénelés. Considérez le bord incurvé d'un logo circulaire. Sans transparence, la courbe devrait être construite à partir de pixels carrés durs, ce qui lui donnerait un aspect irrégulier et en escalier. Avec un canal alpha, les pixels le long du bord sont réglés en transparence partielle, fusionnant progressivement la forme avec ce qui se trouve derrière elle.

C'est pourquoi un logo PNG bien conçu semble net sur une page blanche, une page sombre ou une photo. Les pixels de bord ne sont pas peints en blanc ou dans une seule couleur ; ils sont en partie transparents, ils se fondent donc correctement sur n'importe quel arrière-plan. Aplatissez ce logo sur du blanc et ces mêmes pixels de bord deviennent en partie blancs. Placez la version aplatie sur un fond sombre et vous verrez un vilain halo pâle, car le mélange lisse a été verrouillé sur la mauvaise couleur. Le canal alpha est ce qui maintient le bord adaptable.

Alpha droit ou prémultiplié

Il existe deux manières de stocker la couleur et l'alpha ensemble, et connaître la différence évite une classe de bugs frustrants. Dans alpha droit, les valeurs de couleur restent intactes et l'alpha est entièrement séparé, c'est ainsi que PNG stocke la transparence. Dans alpha prémultiplié, les valeurs de couleur sont multipliées par l'alpha à l'avance, de sorte qu'un rouge transparent à 50 % est déjà stocké comme un rouge plus foncé.

L'alpha prémultiplié est courant dans la vidéo, la composition de films et le rendu en temps réel, car il accélère certaines opérations de fusion et évite les franges sombres sur les bords. L'alpha direct est plus courant pour les images fixes et les ressources Web, car il conserve la couleur d'origine récupérable. Des problèmes apparaissent lorsque le logiciel attend l’un et reçoit l’autre, produisant des bords trop sombres ou étrangement brillants. Pour le travail quotidien sur les images avec des graphiques PNG et Web, vous avez affaire à de l'alpha pur et le logiciel le gère pour vous.

Quels formats d'image prennent en charge un canal alpha

Tous les formats ne peuvent pas stocker la transparence, et c'est le détail pratique qui fait trébucher les gens lors de la conversion :

PNG : un canal alpha complet de 8 bits avec 256 niveaux, la norme pour les graphiques Web transparents.
WebP : un canal alpha complet dans ses modes sans perte et avec perte, tout en produisant des fichiers plus petits que PNG.
AVIF : un format moderne avec prise en charge alpha et forte compression, prenant en charge de plus en plus le navigateur.
GIF : seulement une simple transparence activée ou désactivée, sans niveaux partiels, donc les bords semblent rugueux.
TIFF et SVG : tous deux prennent en charge la transparence, utilisée respectivement dans les travaux d'impression et vectoriels.
JPG et BMP : pas de canal alpha du tout, ils ne peuvent donc stocker aucune transparence.

Ce qu'il faut retenir, c'est que PNG et WebP sont vos choix fiables lorsque la transparence doit survivre, que le GIF ne fonctionne que pour les découpes aux bords nets et que le JPG est exclu pour tout ce qui est transparent.

Le canal alpha sur le web et en CSS

Sur le Web, le canal alpha apparaît à deux endroits : à l'intérieur des fichiers image et à l'intérieur des valeurs de couleur CSS. Un PNG ou WebP transparent porte son alpha dans le fichier lui-même, il se superpose donc sur n'importe quel arrière-plan de page. CSS ajoute ensuite une deuxième couche de contrôle avec les couleurs rgba() et hsla() et la propriété opacity, vous permettant d'estomper les éléments, de teinter les superpositions et de créer des effets de verre sans aucune modification des images.

Cette combinaison explique pourquoi les interfaces modernes semblent superposées et douces. Une section de héros peut empiler une superposition sombre semi-transparente sur une photo pour rendre le texte blanc lisible, en utilisant CSS alpha, tandis que le logo en haut utilise l'image alpha pour s'asseoir proprement sur l'un ou l'autre. Les deux reposent sur la même idée sous-jacente : chaque pixel porte sa propre opacité et le navigateur compose le tout en temps réel.

Qu'arrive-t-il à l'alpha lors de la conversion en JPG

Parce que JPG n'a pas de canal alpha, la conversion d'une image transparente en JPG oblige à prendre une décision : la transparence doit être remplacée par quelque chose de solide. Le convertisseur aplatit l'alpha, remplissant chaque pixel transparent ou semi-transparent avec une couleur d'arrière-plan, le plus souvent blanc. Les zones transparentes deviennent solides et les bords lisses qui reposaient sur un alpha partiel sont verrouillés sur cette couleur de remplissage.

C'est exactement pourquoi un logo peut se retrouver dans une boîte blanche ou noire après conversion, ou présenter un léger halo sur ses bords. Les informations nécessaires pour les mélanger à un nouvel arrière-plan ont disparu, car JPG n'avait nulle part où les stocker. Si vous avez besoin de transparence pour survivre, la réponse est de conserver le PNG ou de le convertir en WebP. Lorsque vous souhaitez réellement une image plate, il est important de choisir la bonne couleur de remplissage. Notre convertisseur vous permet de choisir du blanc, du noir ou une couleur personnalisée pour le remplissage, ou d'exporter WebP pour conserver entièrement le canal alpha, ce que le guide de fond transparent traverse.

Problèmes courants de transparence et comment les éviter

La plupart des problèmes de transparence sont dus à l'aplatissement du canal alpha contre la mauvaise couleur, une étape appelée matage. Voici les coupables habituels :

Boite blanche ou noire : un PNG transparent converti en JPG remplit son arrière-plan d'une couleur unie. Faites correspondre le remplissage à la destination ou conservez la transparence.
Bordure auréole ou frange : un logo mat sur blanc puis posé sur fond sombre présente un contour pâle. Réexportez le fichier transparent d'origine avec un passe-partout dans la bonne couleur ou conservez-le transparent.
Franges foncées : souvent une inadéquation alpha droite/alpha prémultipliée. La réexportation avec le type alpha correct corrige le problème.
Transparence perdue après édition : l'aplatissement des calques ou l'enregistrement au format JPG supprime l'alpha. Conservez un maître en couches ou PNG.

La règle qui évite presque tout cela : décidez de l'arrière-plan avant d'aplatir et conservez un fichier original qui a toujours son canal alpha afin de pouvoir le réexporter proprement.

Questions fréquemment posées

Qu'est-ce qu'un canal alpha ?

Le canal alpha est une valeur par pixel qui contrôle la transparence, de totalement invisible à entièrement solide, stocké aux côtés du rouge, du vert et du bleu qui définissent la couleur d'un pixel.

Que signifie RGBA ?

RGBA signifie rouge, vert, bleu et alpha. La valeur alpha définit l'opacité du pixel au-dessus de sa couleur, donc rgba(255, 0, 0, 0.5) est rouge à 50 pour cent.

Pourquoi le PNG a-t-il de la transparence mais pas le JPG ?

Parce que PNG inclut un canal alpha et JPG ne le fait pas. Sans un emplacement pour stocker l'opacité par pixel, JPG ne peut contenir aucune transparence.

Combien de niveaux de transparence un canal alpha peut-il stocker ?

256 niveaux dans une image standard de 8 bits, de 0 pour invisible à 255 pour solide. L'alpha professionnel 16 bits offre 65 536 niveaux pour une composition fine.

Qu'arrive-t-il au canal alpha lors d'une conversion en JPG ?

Il est aplati. Les zones transparentes se remplissent d'une couleur unie, généralement blanc, car JPG n'a aucun moyen de stocker les données d'opacité.

Quels formats d'image prennent en charge un canal alpha ?

PNG, WebP, AVIF, TIFF et SVG prend en charge alpha, avec PNG et WebP offrant une transparence partielle fluide. GIF n'a qu'une transparence activée ou désactivée, et JPG n'en a aucune.

L'alpha pur ou l'alpha prémultiplié est-il meilleur ?

Ni l’un ni l’autre n’est universellement meilleur ; ils conviennent à différents emplois. L'alpha direct permet de conserver les couleurs récupérables et convient aux images fixes, tandis que l'alpha prémultiplié accélère la fusion dans la vidéo et le rendu en temps réel.

Comment conserver la transparence lors de la réduction de la taille du fichier ?

Convertir en WebP au lieu de JPG. WebP conserve le canal alpha tout en réduisant la taille de 25 à 35 %, de sorte que l'arrière-plan reste transparent et que le fichier devient plus léger.