L’une des surprises les plus frustrantes pour les webdesigners et les développeurs est de découvrir que le fond transparent d’un PNG devient entièrement noir ou blanc après la conversion en WebP. Le WebP sait pourtant parfaitement restituer une transparence nette et des ombres portées douces. Voici comment convertir par lots des centaines de fichiers PNG transparents en WebP sous macOS en conservant une transparence impeccable.
Pourquoi le fond transparent devient noir en WebP
Les images PNG stockent les couches rouge, verte et bleue, plus une quatrième couche : la couche alpha (A), qui définit l’opacité de chaque pixel, de 0 (entièrement transparent) à 255 (entièrement opaque).
Quand un WebP converti affiche un fond noir ou blanc, c’est presque toujours pour l’une de ces deux raisons :
Le convertisseur supprime la couche alpha : les convertisseurs web basiques ou les bibliothèques d’images anciennes (comme les vieux scripts PHP GD) forcent l’image en RVB 24 bits avant l’encodage. Sans couche alpha, les zones transparentes prennent la couleur par défaut, noir (RVB : 0,0,0) ou blanc (RVB : 255,255,255).
Un mauvais mélange des couleurs (liseré sombre) : si les pixels semi-transparents du contour sont mélangés à une mauvaise couleur de fond, des halos ou des franges sombres bien visibles apparaissent autour du sujet.
Avec un encodage conforme aux spécifications officielles du WebP de Google, la transparence est conservée avec une précision mathématique.
RecommandéMéthode 1 : WebP Converter. (visuel et rapide)
Si vous préférez une interface Mac intuitive qui vous permet d’inspecter visuellement vos visuels transparents avant l’export, WebP Converter. est le meilleur outil.
1
Glissez-déposez vos PNG transparents
Déposez dans la fenêtre des fichiers isolés ou des dossiers entiers de logos, d’icônes ou de détourages.
2
Choisissez le mode sans perte
Pour les logos et les icônes, cochez « Lossless » (sans perte). Pour les photos transparentes, choisissez la compression avec perte en qualité 80.
3
Cliquez sur « Démarrer » pour exporter
Les fichiers WebP sont créés en quelques secondes, avec une transparence intacte à 100 %.
Encoder
WebP (Lossless)
—
WebP (Lossy)
80
PNG
—
Redimensionner
Maxi 1920 px
Largeur maxi
1920px
Hauteur maxi
auto
Supprimer les métadonnées
EXIF · GPS · appareil
GPS35°41'22"N · 139°41'30"E
AppareilCanon EOS R5 · RF 50mm F1.2 L
Date de prise de vue2024:08:14 18:22:07
Profil ICCDisplay P3 · conservé
Sortie
4032 × 3024
Avant · HEIC
3.2MB
→
Après · WebP (Lossless)
KB928
29 % de l’original
Le curseur de comparaison intégré vous permet de vérifier que les ombres portées subtiles et les contours lissés sont parfaits avant de publier.
Méthode 2 : la commande cwebp avec l’option -exact
Pour les utilisateurs du Terminal et les scripts de build, Google fournit l’utilitaire officiel cwebp, disponible via Homebrew :
brew install webp
Voici un script shell fiable pour convertir par lots des PNG transparents. L’essentiel est de combiner -lossless avec l’option -exact pour empêcher toute altération des données RVB invisibles :
mkdir -p webp_transparent
for f in *.png; do
[ -f "$f" ] || continue# Conserve la transparence et la couche alpha sans bavure des couleurs RVB
cwebp -lossless -exact "$f" -o "webp_transparent/${f%.*}.webp"done
Ainsi, les pixels transparents ne provoquent ni bavure de couleur sur les contours ni artefacts de compression.
Sans perte ou avec perte : que choisir pour la transparence ?
Type de visuel
Réglage recommandé
Pourquoi et gain attendu
Logos et logotypes
Sans perte
Conserve des contours ultra-nets, comme en vectoriel ; environ 26 % plus léger que le PNG.
Icônes d’app et boutons d’interface
Sans perte
Préserve au pixel près les coins arrondis et les ombres translucides.
Photos détourées (produits / personnes)
Avec perte (qualité ~80)
Conserve la transparence tout en réduisant les données photo de 50 % ou plus par rapport au PNG.
Aquarelles et illustrations
Avec perte (qualité ~85)
Offre des dégradés de couleur doux avec un taux de compression élevé.
Questions fréquentes
QLe WebP prend-il en charge la transparence (couche alpha) ?
A
Oui, le WebP prend en charge nativement la transparence avec une couche alpha complète sur 8 bits, exactement comme le PNG 32 bits. Il gère sans accroc les dégradés semi-transparents, les ombres portées douces et les contours lissés. De plus, le WebP prend en charge la transparence en compression sans perte comme avec perte, ce qui vous permet d’alléger de 50 % ou plus les photos et les détourages transparents.
QPourquoi mon PNG transparent s’est-il retrouvé sur un fond noir (ou blanc) après la conversion ?
A
Ce problème fréquent vient de convertisseurs en ligne de piètre qualité ou de bibliothèques d’images dépassées (comme d’anciennes versions de PHP GD). Ils suppriment la couche alpha en convertissant l’image en RVB 24 bits, ce qui remplace les pixels transparents par du noir uni (RVB : 0,0,0) ou du blanc uni (RVB : 255,255,255). Les encodeurs natifs modernes comme cwebp ou les apps macOS dédiées gèrent correctement la couche alpha.
QFaut-il choisir le WebP sans perte ou avec perte pour les images transparentes ?
A
Pour les logos, les icônes d’app, les illustrations vectorielles, les éléments d’interface et les dessins au trait, choisissez la compression sans perte. Elle garde des contours nets, sans flou ni bruit de compression, tout en réduisant le poids de 25 à 35 % par rapport au PNG. Pour les détourages transparents de photos réelles (personnes, produits) ou les illustrations à l’aquarelle, choisissez la compression avec perte (qualité 75 à 85) pour des fichiers beaucoup plus légers.
QÀ quoi sert l’option « -exact » de cwebp ?
A
L’option -exact demande à l’encodeur de conserver les valeurs de couleur RVB des pixels entièrement transparents (alpha = 0). Par défaut, les encodeurs WebP suppriment ces valeurs RVB invisibles pour maximiser la compression. Les conserver est utile si vous comptez retoucher l’image ou retirer son masque plus tard, ou si vous voulez éviter un léger liseré le long de contours transparents complexes.