Comment convertir WebP en PNG
WebP est un excellent choix pour diffuser des images sur le Web, car il peut produire des fichiers légers avec une bonne qualité visuelle. PNG est souvent le meilleur format d’échange lorsqu’un éditeur, un système de publication ou un ancien flux de travail n’accepte pas WebP. Il offre aussi un résultat prévisible et sans perte, et prend en charge la transparence.
Convertir WebP en PNG n’améliore pas la qualité de l’image source. La conversion modifie uniquement le conteneur et le format de compression, et le PNG obtenu sera souvent plus volumineux. Si la destination accepte WebP, conserver l’original est généralement l’option la plus efficace.
Ce guide compare quatre méthodes de conversion pratiques :
| Méthode | Idéale pour | Principal compromis |
|---|---|---|
| Navigateur | Conversions ponctuelles sans envoyer de fichier | Utilise la mémoire du client et se prête mal aux lots |
| ImageMagick | Scripts locaux et lots en ligne de commande | Vous gérez l’environnement d’exécution et les limites de ressources |
| Sharp pour Node.js | Conversion au sein d’une application Node.js | Votre application gère la mise à l’échelle et le traitement des tâches |
| API gérée | Envois des utilisateurs et pipelines de production reproductibles | Ajoute une dépendance à un service externe |
Avant la conversion
Vérifiez ces points avant de choisir un outil :
- Transparence : WebP et PNG prennent tous deux en charge un canal alpha, mais votre méthode de conversion doit le préserver.
- Animation : les WebP animés nécessitent un traitement particulier. Une conversion basique peut ne produire qu’une seule image PNG. Utilisez APNG ou une séquence de fichiers PNG si vous devez conserver chaque image de l’animation.
- Métadonnées : les convertisseurs peuvent supprimer par défaut les données EXIF, les profils ICC ou d’autres métadonnées. Testez précisément les champs dont votre flux de travail a besoin.
- Taille des fichiers : PNG utilise une compression sans perte, si bien que les images photographiques deviennent souvent beaucoup plus volumineuses.
- Entrées non fiables : lorsque des utilisateurs fournissent des images, imposez des limites de dimensions, de nombre de pixels, de mémoire et de temps de traitement.
Convertir WebP en PNG dans un navigateur
Le décodeur d’images du navigateur et l’API Canvas suffisent pour un petit outil de conversion local. Le fichier n’a pas besoin de quitter l’appareil de l’utilisateur.
<input id="image" type="file" accept="image/webp" />
<button id="convert" type="button">Convert to PNG</button>
<script type="module">
const input = document.querySelector('#image')
const button = document.querySelector('#convert')
button.addEventListener('click', async () => {
const [file] = input.files
if (!file) return
const bitmap = await createImageBitmap(file)
const canvas = document.createElement('canvas')
canvas.width = bitmap.width
canvas.height = bitmap.height
const context = canvas.getContext('2d')
context.drawImage(bitmap, 0, 0)
bitmap.close()
const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'))
if (!blob) throw new Error('The browser could not encode the image as PNG')
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = file.name.replace(/\.webp$/i, '.png')
link.click()
URL.revokeObjectURL(link.href)
})
</script>
Cette approche convient bien aux conversions occasionnelles. Les images volumineuses et les lots peuvent consommer beaucoup de mémoire dans le navigateur, et Canvas ne conserve pas les métadonnées de l’image d’origine.
Convertir WebP en PNG avec ImageMagick
Pour l’automatisation locale ou sur un serveur que vous gérez déjà, ImageMagick propose une commande concise :
magick input.webp output.png
Pour convertir tous les fichiers WebP du répertoire courant :
magick mogrify -format png ./*.webp
Dans cet exemple, mogrify crée les fichiers PNG à côté des originaux. En production, configurez
également la politique de ressources d’ImageMagick afin que des images anormalement volumineuses ou
malformées ne puissent pas consommer toute la mémoire ou tout l’espace disque disponible.
Convertir WebP en PNG dans Node.js
Sharp est une option pratique lorsque la conversion a sa place dans un service Node.js existant :
import sharp from 'sharp'
await sharp('input.webp').png().toFile('output.png')
Dans le code d’une application, validez l’entrée avant de la traiter et gérez les échecs sans laisser de fichiers de sortie partiels. Il vous faudra aussi une file d’attente ou une limite de concurrence si de nombreux utilisateurs peuvent lancer des conversions en même temps.
Convertir WebP en PNG avec une API
Une API gérée devient utile lorsque la conversion fait partie d’un flux d’envoi par les utilisateurs, lorsque les fichiers proviennent de plusieurs sources ou lorsque le résultat doit être stocké puis transmis à des étapes de traitement ultérieures. Pour quelques fichiers locaux, les approches en ligne de commande et Node.js présentées ci-dessus sont plus simples. Pour un pipeline multimédia en production, une API peut vous décharger du travail opérationnel lié aux envois, aux files d’attente, aux nouvelles tentatives, aux fichiers temporaires et à la mise à l’échelle.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"converted": {
"use": ":original",
"robot": "/image/resize",
"format": "png",
"background": "none",
"result": true
}
}
}
La même Assembly peut importer des fichiers depuis un stockage cloud, traiter plusieurs envois et exporter les PNG vers votre destination. Transloadit est donc une option particulièrement pratique lorsque la conversion de WebP en PNG n’est qu’une étape d’un flux plus large d’envoi ou de traitement d’images.
Convertir WebP en PNG en ligne
Besoin d’une conversion rapide sans installer d’outil local ? Convertissez WebP en PNG avec notre outil en ligne gratuit et téléchargez le résultat dans votre navigateur. Il est utile pour des fichiers ponctuels, tandis que le flux de travail par API décrit ci-dessus convient mieux à un traitement de production reproductible.
Quelle méthode choisir ?
Utilisez le navigateur pour un utilitaire ponctuel respectueux de la vie privée. Utilisez ImageMagick pour les scripts shell et les environnements serveur maîtrisés. Utilisez Sharp lorsque la conversion n’est qu’une petite partie d’une application Node.js existante. Utilisez une API gérée lorsque les envois, le stockage, l’observabilité et la fiabilité du traitement comptent autant que la conversion de format elle-même.
Quelle que soit la méthode choisie, testez des fichiers représentatifs : transparents, photographiques, volumineux et animés. Ces cas révèlent la plupart des différences entre les convertisseurs avant qu’elles n’atteignent la production.
Automatiser vos conversions d’images
Si la conversion de WebP en PNG fait partie d’un pipeline d’envoi ou de traitement multimédia, créez un compte Transloadit gratuit pour obtenir une clé d’API, enregistrez ce flux de travail en tant que Template et traitez vos fichiers de manière fiable grâce aux nouvelles tentatives, aux intégrations de stockage et aux notifications par webhook.
Questions fréquentes
La conversion de WebP en PNG améliore-t-elle la qualité de l’image ?
Non. PNG stocke les pixels décodés sans compression avec perte supplémentaire, mais il ne peut pas restaurer les détails supprimés lors de la création du WebP.
La transparence sera-t-elle préservée ?
Elle peut l’être. Les deux formats prennent en charge la transparence, et les exemples ci-dessus préservent le canal alpha décodé. Vérifiez le résultat si votre flux de travail applique un arrière-plan, un aplatissement ou d’autres transformations.
Pourquoi le PNG est-il plus volumineux que le WebP ?
PNG est un format sans perte, particulièrement efficace pour les graphismes aux couleurs unies. WebP peut utiliser une compression avec perte, généralement plus compacte pour les photographies. Un fichier de sortie plus volumineux est donc attendu dans de nombreux cas.
Puis-je convertir des fichiers WebP par lots ?
Oui. ImageMagick peut traiter un répertoire, les bibliothèques applicatives peuvent passer par une file d’attente maîtrisée, et une API peut traiter plusieurs fichiers envoyés ou importés dans un même pipeline.
