PNG vers WebP : Comment convertir et réduire la taille des images PNG

Dernière mise à jour : June 27, 2026

PNG est le format idéal pour les graphiques nets et la transparence, mais ses fichiers sont volumineux — surtout pour tout contenu photographique. Convertir PNG en WebP conserve la netteté et le canal alpha tout en réduisant considérablement les octets. Le piège est de choisir correctement entre WebP sans perte (lossless) et WebP avec perte (lossy), car le mode approprié dépend du contenu de l'image. Ce guide couvre les deux, avec des tailles mesurées réelles.

Réponse rapide : devriez-vous convertir PNG en WebP ?

Oui pour les images web — WebP conserve la transparence et la netteté du PNG à une fraction de sa taille. Choisissez le mode en fonction du contenu :

Pour une image, utilisez l'Image Converter ; pour des lots, utilisez cwebp. La décision de format derrière cela se trouve dans image formats explained.

Combien PNG en WebP permet-il d'économiser ?

Cela dépend entièrement du mode WebP que vous choisissez, car PNG est sans perte et la comparaison n'est pas une pomme avec une pomme.

Deux conclusions honnêtes tirées de ces chiffres. Premièrement, le WebP lossless d'une photographie est toujours grand (568 KB) — car l'encodage lossless ne peut pas éliminer le bruit dans une photo. Si le contenu est une photo, il devrait s'agir de WebP lossy, et non lossless. Deuxièmement, le WebP lossless excelle sur les graphiques plats : pour les captures d'écran et les éléments UI, il est généralement 20–30% plus petit que PNG avec des pixels identiques. Adaptez le mode au contenu.

La même source pour les quatre formats montre où se situe PNG par rapport aux alternatives :

Quelles images devraient rester en PNG ?

Certaines images ne devraient pas être converties du tout. Conservez PNG lorsque l'image est un logo ou une icône qui pourrait être SVG à la place (le vecteur est plus petit et plus net), ou lorsque vous livrez à un système qui exige spécifiquement PNG — certains pipelines d'impression, certains éditeurs hérités et la plupart des échanges d'outils de conception attendent PNG. Pour une seule petite icône (moins de ~3 KB), la conversion n'en vaut pas la complexité du pipeline ; laissez-la en PNG. La règle de décision est la même que dans image formats explained : convertissez PNG en WebP lorsque les octets comptent et que la destination est un navigateur web, gardez PNG lorsque la compatibilité ou une alternative vectorielle compte davantage.

Méthode 1 : Convertisseur de navigateur

Pour une image, utilisez l'Imagic AI Image Converter : téléchargez le PNG, choisissez WebP, sélectionnez lossless pour les graphiques ou qualité ~80 pour les photos, et téléchargez. Squoosh est bon pour comparer lossless vs lossy côte à côte avant de vous engager.

Méthode 2 : Ligne de commande cwebp

## WebP Lossless (meilleur pour les graphiques, captures d'écran, texte net, UI transparent)
cwebp -lossless input.png -o output.webp

## WebP Lossy (meilleur si le PNG est en fait une photo)
cwebp -q 80 input.png -o output.webp

## Un dossier de PNGs, lossless, en parallèle
mkdir -p out
ls *.png | xargs -P 4 -I {} cwebp -lossless {} -o out/{}.webp

-lossless est le drapeau clé — sans lui, cwebp utilise par défaut lossy, ce qui floute les bords fins. Passez toujours -lossless pour les graphiques et les captures d'écran.

Méthode 3 : Python (Pillow)

from PIL import Image
from pathlib import Path

def png_to_webp(src: Path, dest: Path, lossless: bool = True, quality: int = 80):
    with Image.open(src) as img:
        img.save(dest, "WebP", lossless=lossless, quality=0 if lossless else quality, method=6)

for f in Path("assets").glob("*.png"):
    # lossless pour les graphiques nets ; passer à lossless=False pour les PNG photographiques
    png_to_webp(f, Path("out") / f"{f.stem}.webp", lossless=True)

Lorsque lossless=True, la valeur quality est ignorée ; lorsqu'il est lossy, définissez-la sur ~80 pour les photos.

WebP conserve-t-il la transparence de PNG ?

Oui. WebP prend en charge un canal alpha complet dans les modes lossy et lossless, donc un PNG transparent devient un WebP transparent sans effort supplémentaire. C'est la principale raison de convertir les assets UI et les découpages de produits : vous gardez la transparence et perdez la plupart des octets. Pour les détails sur la transparence, consultez how to make transparent images.

Comment servir WebP avec un fallback PNG ?

Le support WebP est d'environ 98%, mais conservez un fallback PNG pour les anciens clients et les e-mails :

<picture>
  <source srcset="/img/icon.webp" type="image/webp">
  <img src="/img/icon.png" alt="Description" width="200" height="200" loading="lazy">
</picture>

Le navigateur choisit le premier type qu'il prend en charge ; l' PNG est le fallback final. Pour les graphiques nets, réservez width/height afin que la mise en page ne bouge pas. Consultez le WebP converter guide pour le modèle de fallback complet incluant AVIF.

Quand PNG en WebP est-il une mauvaise idée ?

• E-mail. De nombreux clients de messagerie ignorent WebP. Gardez PNG (ou JPEG) pour les e-mails.
• Lorsque vous avez besoin d'un JPEG à la place. Si le PNG est une photo destinée à un marché qui n'accepte que JPEG, convertissez en JPEG, pas en WebP. Voir WebP to JPG.
• Anciens navigateurs intégrés sans support WebP — bien que le fallback <picture> couvre cela.
• Lorsque le PNG est déjà minuscule. Une icône de 2 KB ne gagne pas grand-chose à la conversion ; le coût du pipeline n'en vaut pas la peine.

Erreurs courantes

• Utiliser WebP lossy pour des graphiques nets. Le mode lossy floute les bords fins et le texte. Utilisez -lossless pour les captures d'écran et l'UI.
• Utiliser WebP lossless pour des photos. Il reste grand car le lossless ne peut pas éliminer le bruit photographique. Utilisez lossy.
• Oublier le fallback PNG. Les anciens navigateurs et les e-mails ont besoin de l' PNG.
• Oublier de redimensionner au préalable. Un WebP de 4000px est toujours un téléchargement de 4000px, quel que soit le format.
• Traiter PNG comme un format photo. Si l'image est une photo, elle était probablement JPEG/RAW à l'origine — convertissez depuis la bonne source.

Questions fréquemment posées

Combien économise la conversion de PNG en WebP ?

Pour le contenu photographique, 25 à 35% plus petit avec une qualité égale ; pour les graphiques plats avec transparence, souvent encore plus. WebP prend en charge les modes lossy et lossless ainsi qu'un canal alpha, il couvre donc ce que fait PNG mais dans un format plus petit.

Chaque PNG doit-il devenir WebP ?

Pour la livraison web, oui, avec un fallback PNG pour les navigateurs très anciens. Conservez le master PNG si vous pourriez le modifier à nouveau, car WebP lossy est une génération de compression. Servez WebP via un élément <picture> avec fallback PNG.

WebP prend-il en charge la transparence ?

Oui — WebP prend en charge un canal alpha complet, donc les PNG transparents se convertissent proprement. C'est la principale raison de préférer WebP à JPEG pour les graphiques avec transparence. Voir le transparent images guide.

Quel est le processus de conversion en ligne de commande ?

cwebp -q 80 input.png -o output.webp. Le drapeau -q définit la qualité (80 est le défaut web). Pour lossless, utilisez -lossless. Effectuez un lot avec une boucle shell ou ImageMagick. Voir le WebP converter guide.

WebP prend-il en charge l'animation ?

Oui — WebP prend en charge les images animées, plus petites que les GIF animés équivalents. Pour de courtes boucles, WebP animé est une alternative moderne au GIF. Pour des animations plus longues, la vidéo (MP4) est toujours plus petite et meilleure.

Dois-je convertir PNG en WebP lossy ou lossless ?

Lossy pour les photographies (beaucoup plus petit, perte invisible à qualité 80) ; lossless pour les graphiques, le texte et les masters où chaque pixel doit être exact. WebP prend en charge les deux. Une erreur courante est de convertir un logo en mode lossy, ce qui ajoute des artefacts aux bords nets — gardez les graphiques lossless, convertissez les photos en lossy.

Qu'est-ce que le drapeau de qualité cwebp ?

Le drapeau -q définit la qualité lossy sur une échelle de 0 à 100 — 80 est le défaut web (perte invisible, environ un quart des octets de qualité 100). Utilisez plutôt -lossless pour les graphiques où chaque pixel doit être exact. Une qualité plus élevée signifie un fichier plus volumineux avec des rendements visuels décroissants ; 80 est le point idéal pratique pour la livraison web de photographies.

Est-ce que convertir PNG en WebP accélère mon site ?

Oui, mesurablement — WebP est 25 à 35% plus petit que PNG pour le même contenu, donc les pages avec de nombreux graphiques se chargent plus rapidement et LCP s'améliore. L'économie s'accumule sur une page avec des douzaines d'icônes ou de graphiques. Servez WebP avec un fallback PNG afin que les anciens navigateurs puissent toujours afficher les images, et vous obtenez la vitesse sans perdre la compatibilité.

Crédits d'images

• Comparaison PNG vers WebP et graphique de taille — généré par l'auteur à partir d'une photographie de style e-commerce (Pexels #16675632, photo par Mikael Blomkvist) pour montrer les économies réelles mesurées de PNG vers WebP.