Vous avez un joli logo rond. Vous le posez sur votre site, dont le fond est jaune. Et là, surprise : un rectangle blanc entoure votre rond, comme une étiquette mal découpée. Ce rectangle a une explication, et elle tient en un mot : la transparence.
Le logo rond sur le fond jaune
Une image est toujours un rectangle. Même quand le dessin est rond, le fichier, lui, a quatre coins. La question est : que met-on dans les coins, autour du rond ?
- En JPG, les coins sont obligatoirement remplis d’une couleur, très souvent du blanc. Sur votre fond jaune, vous voyez donc un rond posé sur un carré blanc.
- En PNG transparent, les coins sont vides. Il n’y a rien du tout. Le jaune du site passe à travers, et seul le rond apparaît.
Le dessin est le même dans les deux cas. Ce qui change, c’est ce qui se trouve autour.
Le damier gris et blanc : « ici, il n’y a rien »
Quand vous ouvrez une image transparente dans un logiciel de dessin ou de retouche, les parties vides s’affichent souvent avec un petit damier gris et blanc. Ce damier ne fait pas partie de l’image. C’est une convention des logiciels pour vous dire : « à cet endroit, il n’y a rien ».
Pourquoi un damier et pas du blanc ? Parce qu’avec du blanc, on ne saurait pas distinguer un vrai blanc d’un vide. Le damier, lui, ne ressemble à rien de naturel : impossible de le confondre.
Le piège du faux damier
C’est le piège le plus fréquent. Vous cherchez « logo transparent » sur Internet, vous voyez une image avec le fameux damier, vous la téléchargez. Vous la posez sur votre site… et le damier s’affiche, bien visible, autour du logo.
La raison : quelqu’un a dessiné le damier dans l’image. Ce ne sont pas des parties vides, ce sont de vrais carreaux gris et blancs, peints comme le reste. L’image fait semblant d’être transparente.
Pour vérifier, posez l’image sur un fond de couleur. Si le damier disparaît, la transparence est vraie. S’il reste, c’est un faux. Attention aussi : un fichier qui se termine par .png n’est pas forcément transparent. Le PNG sait l’être, il ne l’est pas toujours.
Le canal alpha, sans prise de tête
Une image est faite de milliers de petits points de couleur, qu’on appelle des pixels. Pour chaque point, l’ordinateur retient sa couleur : combien de rouge, de vert et de bleu.
Une image transparente retient une information de plus pour chaque point : à quel point il est visible. Complètement visible, à moitié visible, ou invisible. Cette information s’appelle le canal alpha. Vous pouvez le voir comme un réglage de la « présence » de chaque point.
Grâce aux valeurs intermédiaires, on obtient des bords doux, une ombre légère ou un verre à moitié transparent. Le JPG n’a pas de canal alpha : chaque point y est toujours complètement visible.
Quel format choisir ?
Le détourage, c’est l’opération qui consiste à retirer le fond d’une image pour ne garder que le sujet, comme découper l’autocollant aux ciseaux.
La page sur les images d’un site détaille le poids de chaque format. Pour la transparence, retenez ceci :
- Une photo (un plat, un paysage, un visage) : JPG ou WebP. Une photo n’a pas besoin de parties vides.
- Un logo, une icône, un objet détouré : PNG, WebP (qui sait aussi être transparent, et pèse souvent moins lourd) ou SVG, idéal pour les logos car il reste net à toutes les tailles.
- Le GIF : un format ancien, surtout connu pour les petites animations. Sa transparence est « tout ou rien » : un point est visible ou invisible, sans entre-deux, et il ne gère que 256 couleurs au maximum. Les bords paraissent souvent crénelés.
Ce que vous avez à retenir
Votre logo, rangé avec les autres fichiers du site, est affiché par le HTML de la page, tandis que le CSS choisit la couleur du fond. Si le logo est transparent, il s’adapte à n’importe quel fond. S’il ne l’est pas, il trimballe son rectangle partout.
Le bon réflexe : demandez toujours votre logo « en PNG transparent » ou « en SVG » à la personne qui l’a créé. Et si vous n’avez qu’un JPG, un assistant IA ou un logiciel de retouche peut souvent retirer le fond pour vous.