Vous déposez un PNG « transparent » sur une diapositive sombre et un rectangle blanc l'accompagne. Le fichier était parfait dans l'éditeur. Que s'est-il donc passé ? La réponse se trouve dans un quatrième canal rarement examiné. Chaque pixel d'une image porte des valeurs de rouge, de vert et de bleu, et dans certains formats un quatrième nombre appelé canal alpha qui indique quelle proportion de ce pixel doit s'afficher.
Ce guide explique ce que ce nombre stocke, quels formats le conservent (PNG et WebP), lesquels le réduisent à un interrupteur (GIF), lesquels le jettent (JPG), et pourquoi le SVG suit des règles différentes. Chemin faisant, nous lisons le canal alpha de sept découpes réelles pixel par pixel, de sorte que les chiffres ci-dessous proviennent de fichiers et non de la théorie.
Un seul PNG, quatre arrière-plans. La basket est une entrée de test générée par IA, détourée avec l'outil de suppression d'arrière-plan d'Atlas Cloud ; le fichier a été placé sur chaque arrière-plan sans modification.
À retenir
- Un canal alpha est un quatrième canal qui stocke l'opacité de chaque pixel, de 0 (totalement transparent) à 255 (totalement opaque) dans une image 8 bits.
- PNG et WebP conservent un canal alpha complet. Le GIF ne peut signaler qu'une seule couleur de palette comme transparente. Le JPG ne stocke aucune transparence.
- L'outil de suppression d'arrière-plan IA gratuit d'Atlas Cloud renvoie un PNG transparent à la taille en pixels que vous avez téléversée, traité directement dans votre navigateur.
- Sur sept découpes mesurées, seuls 0,7 % à 2,2 % des pixels étaient partiellement transparents. Cette fine bande constitue le bord anticrénelé qui garde les cheveux et les contours naturels.
- Un PNG qui affiche un fond blanc ou noir dans une visionneuse n'a généralement pas perdu son canal alpha. Vérifiez-le sur un fond sombre ou en damier avant de réexporter quoi que ce soit.
Ce qu'un canal alpha stocke à l'intérieur de chaque pixel
Demandez ce qu'est un canal alpha et vous obtenez généralement une métaphore. Voici plutôt le nombre. La spécification PNG du W3C le définit en une phrase : « L'échantillon alpha détermine le degré d'opacité d'un pixel, où zéro signifie totalement transparent et la valeur maximale totalement opaque. » Dans une image 8 bits, le maximum est 255, ce qui donne 256 niveaux entre transparent et opaque.
Le PNG autorise aussi un canal alpha 16 bits. La spécification permet des profondeurs de bits de 8 ou 16 pour ses deux types de couleur porteurs d'alpha, le niveaux de gris avec alpha et la vraie couleur avec alpha, et un canal alpha 16 bits compte 65 536 niveaux. En dehors des pipelines de compositing, c'est le 8 bits que vous rencontrerez.
Ainsi, un pixel RGBA, ce sont quatre nombres. Trois décrivent la couleur, un décrit la couverture. Ne changez que le quatrième et la couleur reste inchangée tandis que le pixel s'estompe. C'est tout l'astuce derrière les bords de cheveux doux, les ombres portées et le verre qui laisse transparaître un arrière-plan.
Le mot « transparent » masque une distinction importante. Certains formats stockent une valeur alpha complète par pixel, si bien qu'un pixel peut être visible à 37 %. D'autres stockent un simple indicateur oui-ou-non : ce pixel est dessiné, celui-là est ignoré. Les deux sont appelés transparence, et seul le premier peut estomper un bord. Gardez cette distinction en tête, car c'est la raison pour laquelle les autocollants GIF paraissent crénelés et les découpes PNG non.
Un autre terme que vous rencontrerez dans les outils vidéo et de jeu : l'alpha prémultiplié. Dans un fichier droit (ou non prémultiplié), les valeurs de couleur sont stockées à pleine intensité et l'alpha les met à l'échelle à l'affichage. Dans un fichier prémultiplié, les valeurs de couleur ont déjà été multipliées par l'alpha, si bien qu'un pixel rouge à moitié visible est stocké comme un rouge à moitié intensité. Le PNG utilise le type droit ; la spécification indique que les valeurs de couleur « ne sont pas prémultipliées par la valeur alpha ».
Cette idée a une trace documentaire. Le mémo d'Alvy Ray Smith de 1995 sur l'histoire de l'alpha lui attribue, à lui et à Ed Catmull, le concept dans les années 1970 au New York Institute of Technology, et attribue à l'article de Porter et Duff de 1984 la distinction entre les deux conventions. Pour le travail web et imprimé courant, vous pouvez ignorer la différence ; votre éditeur s'en charge.
Comment enregistrer un PNG avec un arrière-plan transparent
Beaucoup de problèmes du type « mon export n'est pas transparent » se décident avant même l'ouverture de la boîte de dialogue d'enregistrement. Trois règles suffisent. Le calque d'arrière-plan doit être masqué ou supprimé, afin que le canevas affiche un damier dans l'éditeur. Le format doit en être un doté d'un canal alpha, ce qui en pratique signifie PNG ou WebP.
Et l'option PNG doit être du type 8 bits par canal, souvent étiquetée PNG-24 ou 32 bits, plutôt qu'une version à palette que certains exportateurs réduisent à une transparence marche-arrêt. La spécification PNG autorise bien une image indexée à porter « la table alpha qui associe un échantillon alpha à chaque entrée de la palette », mais vous ne pouvez pas compter sur chaque outil pour l'utiliser.
Les chemins de menus ci-dessous proviennent de la documentation propre à chaque éditeur.
| Logiciel | Où se trouve l'export PNG transparent |
|---|---|
| Suppresseur d'arrière-plan Atlas Cloud | Cliquez sur Télécharger ; le canal alpha est déjà en place, il n'y a donc aucun réglage de format à rater |
| Photoshop | Fichier > Exporter > Exporter sous, choisissez PNG comme format et autorisez la transparence dans les réglages du format |
| GIMP 3.0 | Fichier > Exporter sous, nommez le fichier .png ; l'option « Enregistrer les valeurs de couleur des pixels transparents » ne s'applique qu'aux images à calque unique |
| Figma | Sélectionnez le cadre, ajoutez un export PNG dans la barre latérale droite ; si le cadre a un remplissage, décochez Afficher dans les exports dans la section Remplissage |
| PowerPoint | Format de l'image > Supprimer l'arrière-plan, puis faites un clic droit sur l'image, Enregistrer sous forme d'image, et choisissez PNG dans la liste Type de fichier |
Quel que soit l'outil utilisé, regardez le résultat sur un damier avant de télécharger. Le panneau de résultat d'Atlas affiche exactement cela, de sorte que vous voyez le canal alpha fonctionner avant même que le fichier n'atteigne votre disque.
Convertissez n'importe quelle image en PNG transparent en un clic
Le moyen le plus rapide d'obtenir un fichier doté d'un vrai canal alpha est de laisser un modèle de segmentation en créer un. Atlas Cloud exécute un outil de suppression d'arrière-plan directement dans l'onglet du navigateur, l'un d'un petit ensemble d'outils IA gratuits du site qui ne nécessitent aucun compte. Vous glissez une photo, cliquez sur Exécuter gratuitement, et téléchargez le résultat.
Le modèle s'exécute localement via WebGPU, avec un repli WASM sur les machines qui en sont dépourvues, et nous avons réalisé une découpe avec le réseau déconnecté. Il n'y a ni filigrane ni inscription.
Les sujets ne se limitent pas aux portraits. Lors de nos tests, une photo de groupe, un chien à poils longs, une basket blanche, une signature manuscrite, un logo en traits et une chemise blanche photographiée contre un mur blanc sont tous revenus sous forme de découpes utilisables, le logo avec son espace négatif ouvert. Si la découpe dont vous avez besoin est destinée à un grand tirage, associez-la à la comparaison d'outils d'agrandissement d'image gratuits que nous avons menée, car le canal alpha est mis à l'échelle avec l'image.
À l'intérieur d'une vraie découpe : où se trouvent les pixels doux
Nous avons ouvert sept de ces sorties dans Python et compté chaque pixel selon sa valeur alpha. Le schéma était identique dans les sept. Entre 60,6 % et 98,4 % des pixels étaient totalement transparents, selon la part du cadre occupée par le sujet.
Les pixels partiellement transparents, ceux dont l'alpha se situe entre 8 et 250, représentaient 0,7 % à 2,2 % de l'image. C'est une bande de 1 à 3 pixels de large qui court le long du contour, et c'est elle qui fait tout le travail d'anticrénelage.
Le voile de tulle nous a appris quelque chose que la définition seule ne révélerait pas. Le canal alpha peut stocker de la translucidité, pourtant le voile est revenu avec seulement 0,73 % de pixels partiellement transparents, le même fin contour que la basket. Le tissu lui-même a été écrit comme opaque, la verdure derrière lui étant intégrée à sa couleur. Forme préservée, translucidité perdue. Le fait qu'un fichier ait un canal alpha ne vous dit rien sur la question de savoir si un modèle a choisi d'utiliser le milieu de la plage.
Une petite observation technique pour les curieux : dans les sept fichiers, les pixels opaques du sujet se situent à alpha 254 plutôt que 255, une différence qu'aucun écran ne peut montrer. Dans les PNG pleine taille que nous avons inspectés, chaque pixel totalement transparent porte la même valeur de couleur, du noir pur, de sorte que le fichier ne stocke aucun arrière-plan caché susceptible de réapparaître sous forme de frange.
Quels formats d'image prennent en charge la transparence
Cinq formats couvrent la quasi-totalité des fichiers qu'on vous confiera. Ils stockent la transparence de quatre manières différentes, et la différence détermine si un bord peut s'estomper, si le fichier peut s'animer, et quelle taille il finit par atteindre.
| Format | Comment la transparence est stockée | Niveaux | Bords doux | Animation |
|---|---|---|---|---|
| PNG | Alpha 8 ou 16 bits par pixel, ou un chunk tRNS pour la transparence indexée et monochrome | 256 ou 65 536 | Oui | Oui (APNG, désormais intégré à la spécification PNG) |
| WebP | Alpha 8 bits par pixel, en modes avec et sans perte | 256 | Oui | Oui |
| GIF | Un index de palette signalé comme transparent | 2 (marche ou arrêt) | Non | Oui |
| SVG | Formes vectorielles sans arrière-plan ; opacité définie par élément | Continu | Oui | Oui |
| JPG | Aucune | 1 | Non | Non |
Le JPG prend-il en charge la transparence ?
Non. Le guide des formats d'image de MDN le dit clairement : « JPEG ne prend pas en charge le canal alpha. » Le format stocke trois canaux de couleur et rien d'autre, de sorte que lorsque vous enregistrez une image multicouche en JPG, l'éditeur doit d'abord l'aplatir sur une couleur, généralement le blanc. Ce blanc devient alors des pixels ordinaires, et il voyage avec le sujet partout où va le fichier.
C'est aussi pourquoi un téléchargement de « JPG transparent » n'est pas ce qu'il prétend. Soit le fichier est en réalité un PNG portant la mauvaise extension, soit le damier que vous voyez est peint dans les pixels. Renommer un .jpg en .png change l'étiquette sur la boîte, pas le contenu. Si vous avez besoin de transparence, le JPG doit être ouvert, l'arrière-plan supprimé, et le résultat enregistré dans un format capable de contenir un canal alpha.
GIF transparent : une seule couleur, des bords durs
La transparence du GIF provient de la révision 89a du format, et son âge se voit. La spécification GIF89a ajoute une extension de contrôle graphique avec un index de transparence, décrit ainsi : « L'index de transparence est tel que, lorsqu'il est rencontré, le pixel correspondant du dispositif d'affichage n'est pas modifié et le traitement passe au pixel suivant. » Une entrée de la table de couleurs est déclarée transparente. Tous les autres pixels sont dessinés à pleine intensité.
La transparence du GIF est donc une affaire de 1 bit. Un pixel est soit ignoré, soit peint, et avec une palette d'au plus 256 couleurs, il n'y a pas de place pour un bord à moitié visible. Placez une découpe GIF sur un arrière-plan différent de celui sur lequel elle a été créée et le contour progresse en marches d'escalier, souvent avec une frange pâle là où les pixels anticrénelés ont été alignés sur du plein.
Nous avons converti la découpe de la basket en GIF avec un seuil alpha de 128, la valeur par défaut habituelle, et agrandi trois fois la même région du lacet. Le côté 8 bits s'estompe sur deux ou trois pixels. Le côté GIF n'a que des angles droits. Si vous avez besoin d'un GIF transparent pour un client qui n'accepte rien d'autre, construisez-le sur la couleur d'arrière-plan sur laquelle il reposera, afin que la frange s'harmonise au lieu de luire.
La transparence WebP dans les fichiers avec et sans perte
WebP est le format qui a enfin donné un canal alpha à la compression avec perte. La documentation sur la compression de Google décrit « un autre mode WebP qui permet un encodage avec perte pour les canaux RVB et un encodage sans perte pour le canal alpha », et sa référence cwebp fixe la qualité alpha par défaut à 100, ce qui signifie que le plan alpha est stocké sans perte sauf indication contraire de votre part.
La page de présentation de Google situe le WebP sans perte à 26 % de moins que le PNG, indique que la transparence ajoute environ 22 % en octets, et estime le WebP avec perte et transparence à généralement 3 fois plus petit que le PNG.
Nos propres chiffres étaient du même ordre. Nous avons pris une découpe de 2048 x 1152 directement issue du suppresseur d'arrière-plan, un PNG de 1 211 Ko, et l'avons réenregistrée avec Pillow aux réglages par défaut.
Le WebP sans perte est ressorti à 660 Ko, soit 46 % de moins, et chaque valeur alpha correspondait exactement au PNG. Le WebP avec perte à qualité 80 est ressorti à 124 Ko, et son plan alpha était toujours identique octet pour octet à l'original. Seules les données de couleur avaient changé. Pour la diffusion web de découpes, c'est généralement le fichier qu'il vous faut. Pour une copie maîtresse que vous comptez continuer à retoucher, restez au PNG ou au WebP sans perte.
Arrière-plan transparent SVG : aucun fond à supprimer
Le SVG n'a pas d'arrière-plan à rendre transparent, parce qu'il n'en a jamais eu. Un fichier SVG est une liste d'instructions de dessin : dessine ce cercle ici, remplis-le de cette couleur. Rien dans cette liste ne peint le canevas, sauf si vous ajoutez un rectangle qui le recouvre. Quand un SVG semble avoir un fond blanc, vous regardez la page ou la visionneuse derrière lui.
La transparence à l'intérieur d'un SVG se définit par élément. La référence de MDN décrit la valeur de remplissage none comme ne peignant aucun remplissage, de sorte que l'intérieur d'une forme reste transparent. L'attribut fill-opacity estompe uniquement la peinture à l'intérieur d'une forme, tandis qu'opacity estompe tout l'élément, contour compris.
Deux choses piègent les gens. Une photo matricielle intégrée dans un SVG via un élément image conserve le canal alpha que possède la photo, de sorte qu'un JPG à l'intérieur d'un SVG porte toujours sa boîte blanche. Et faire passer une photo par un convertisseur matriciel-vers-SVG ne supprime pas un arrière-plan ; il vectorise l'arrière-plan en formes avec tout le reste.
Pourquoi mon PNG n'est-il pas transparent ?
Effectuez ces vérifications dans l'ordre. Un fichier qui passe la première n'a besoin d'aucune correction.
La visionneuse a peint l'arrière-plan. Les visionneuses d'images doivent placer quelque chose derrière les pixels transparents, et beaucoup choisissent le blanc ou le noir. Le fichier est inchangé ; seul l'affichage l'est. Ouvrez le même PNG dans une application de design, un onglet de navigateur avec une page sombre, ou une diapositive à fond sombre. Si la boîte disparaît, arrêtez-vous là.
Le fichier n'a pas de canal alpha. Un JPG renommé .png, une capture d'écran d'une image transparente, ou un fichier passé par une messagerie ou un CMS qui l'a réencodé paraîtront tous opaques parce qu'ils le sont. Vérifiez le mode de l'image. Dans Photoshop, le panneau Couches doit lister un canal Alpha ; sous Windows, Propriétés > Détails indique une profondeur de bits de 32 pour un PNG RGBA plutôt que 24 ; en Python, Image.open("file.png").mode renvoie RGBA. Si l'alpha est absent, revenez à l'original multicouche et exportez à nouveau.
Le bord est dur ou frangé. Un contour en marches d'escalier indique une transparence de 1 bit, et une frange pâle ou colorée indique des pixels de bord qui portent encore l'ancienne couleur d'arrière-plan. Notre test sur mur rouge a montré comment cela se produit : avec une chemise blanche contre un mur rouge saturé, 69 % des pixels de bord semi-transparents tiraient vers le rouge, et sur un nouvel arrière-plan cette bande se lit comme une frange. La solution est un réexport avec alpha 8 bits et sans couleur de matte, et, pour les découpes, un fond neutre dans la photo d'origine ou une contraction de 1 pixel du masque.
Le damier est incrusté. Redimensionnez l'image. Si les carrés gris et blancs grandissent et rétrécissent avec l'image, ce sont des pixels. Les images d'aperçu des sites de banques d'images arrivent souvent ainsi. Téléchargez le vrai fichier, ou détourez à nouveau l'arrière-plan.
Questions fréquentes
Un canal alpha est-il la même chose qu'un masque de calque ?
Ce sont des cousins. L'aide de Photoshop d'Adobe décrit un canal alpha comme une sélection stockée sous forme de masque en niveaux de gris modifiable dans le panneau Couches, et un masque de calque fonctionne de la même manière dans l'éditeur. La différence tient à ce qui survit à l'export. Un masque de calque est un outil d'édition qui vit dans le PSD. Le canal alpha écrit dans un PNG ou un WebP est le résultat aplati de tous les masques, et c'est la transparence que les autres applications lisent réellement.
Combien de niveaux de transparence un canal alpha 8 bits compte-t-il ?
256, de 0 (totalement transparent) à 255 (totalement opaque). Un canal alpha 16 bits, que le PNG prend aussi en charge, en compte 65 536. Le GIF en a deux : dessiné ou ignoré.
Puis-je ajouter un canal alpha à un JPG ?
Pas tant qu'il reste un JPG, puisque le format n'a nulle part où en stocker un. Ouvrez le fichier, séparez le sujet de l'arrière-plan, et enregistrez le résultat en PNG ou WebP. L'outil de détourage dans le navigateur d'Atlas Cloud réalise la conversion en une seule étape : JPG en entrée, PNG transparent en sortie, gratuit et sans connexion.
La transparence WebP fonctionne-t-elle dans tous les navigateurs ?
Les versions actuelles des principaux navigateurs affichent le WebP avec alpha, et le tableau de compatibilité de MDN pour ce format est l'endroit où confirmer la prise en charge d'une version plus ancienne que vous devez encore servir. Si un public hérité compte, servez du PNG comme solution de repli via un élément picture.
Pourquoi mon PNG transparent a-t-il un halo blanc ?
Les pixels le long du bord sont partiellement transparents, et leur couleur porte encore l'arrière-plan dont ils ont été détourés. Sur un original blanc, cette bande ressemble à un halo blanc une fois la découpe placée sur quelque chose de sombre. Réexportez avec alpha 8 bits et matte réglé sur none, ou contractez la sélection d'un pixel avant d'enregistrer.
Conclusion
La transparence est un nombre. Chaque pixel d'un PNG ou d'un WebP RGBA porte une valeur alpha de 0 à 255, et une fois cela compris, les autres formats se classent d'eux-mêmes : le GIF a un simple indicateur marche-arrêt, le JPG n'a rien, et le SVG n'a aucun arrière-plan à supprimer au départ. Les sept découpes que nous avons mesurées placent tout le bord anticrénelé dans une bande de 0,7 % à 2,2 % de l'image, ce qui est exactement la partie qu'un format 1 bit jette.
Si vous êtes arrivé ici en vous demandant ce qu'est un canal alpha parce qu'un fichier refusait de devenir transparent, vérifiez d'abord la visionneuse, puis le mode du fichier, puis le bord. Et si vous avez besoin d'un canal alpha propre sans ouvrir d'éditeur, un suppresseur d'arrière-plan dans le navigateur vous en fournira un dans un seul PNG, à la taille en pixels avec laquelle vous avez commencé.
