Comment fonctionne la conversion d’images dans le navigateur
Chaque conversion est un pipeline en quatre étapes fonctionnant dans votre navigateur. Pour JPEG et PNG, l’API Canvas native du navigateur gère directement l’encodage. Pour WebP sur Safari et AVIF sur tous les navigateurs, la page charge un codec WebAssembly léger à la demande — toujours local, vos images ne quittent jamais l’appareil.
- Lit chaque fichier importé en tant que Blob et crée une URL d’objet pour que le navigateur puisse le décoder sans copier d’octets vers un serveur.
- Dessine l’image décodée sur un élément Canvas hors écran, en appliquant toute contrainte de redimensionnement tout en préservant le ratio d’aspect original.
- Appelez
canvas.toBlob(callback, targetMimeType, quality)pour ré-encoder les pixels pour PNG, JPEG et WebP (Chrome/Firefox). Pour WebP sur Safari et l’encodage AVIF, un worker de codec WebAssembly se charge lors de la première utilisation et gère l’encodage dans un thread d’arrière-plan. La sortie PNG est toujours sans perte ; JPEG, WebP et AVIF respectent le curseur de qualité, qui correspond directement au paramètre de quantisation de l’encodeur. - Affiche une miniature avant/après avec les dimensions de sortie et la taille du fichier, puis propose un bouton de téléchargement par image ou un ZIP unique pour l’ensemble du lot.
Pourquoi convertir les formats d’image ?
- Passer de PNG à WebP réduit les tailles de fichiers typiques de 25 à 35% sans perte de qualité visible à qualité 0.8, ce qui réduit directement le poids des pages et améliore les scores LCP des Core Web Vitals.
- PNG préserve la transparence là où JPEG la supprime, donc passer PNG→JPEG rend les pixels transparents sur fond blanc — utile quand la destination (e-mail, ancien CMS) n’accepte pas le PNG.
- Les plateformes sociales et les réseaux publicitaires ont des exigences de format strictes : Facebook et LinkedIn préfèrent le JPEG pour les photos ; le pipeline de prévisualisation OG de Twitter gère le WebP ; certains serveurs d’annonces rejettent les créations non-JPEG.
- Standardiser un lot d’images de formats mixtes (captures PNG, photos JPEG, exports WebP) vers un format unique avant de télécharger sur un CMS ou DAM élimine la complexité de gestion des formats dans le pipeline d’ingestion.
Applications courantes
La conversion de format survient quand le format source et les attentes de la destination ne correspondent pas.
- Préparer des photos produits pour une boutique Shopify ou WooCommerce — originaux JPEG convertis en WebP à qualité 0.85 pour la vitrine, PNG conservé pour les exports d’impression.
- Convertir des exports PNG de designers en JPEG ou WebP avant intégration dans un build React ou Next.js, pour que l’optimiseur d’images du framework commence avec une source plus légère.
- Traitement par lot d’un dossier de captures d’écran d’une exécution QA — PNG vers JPEG à qualité 0.9 pour réduire la taille de l’archive avant de l’attacher à un ticket de suivi de bugs.
Un exemple concret : PNG de 2 Mo → WebP de 300 Ko
Une image hero PNG de 2 Mo à 2400×1600 pixels est une charge courante sur les landing pages marketing.
Déposez le PNG ici, choisissez WebP comme format cible, réglez la qualité à 0.8, et définissez éventuellement la largeur max à 1200 pour diviser les dimensions en pixels par deux. Le pipeline canvas dessine l’image à 1200×800 (proportion préservée), ré-encode en WebP, et la carte de sortie affiche le résultat — généralement 280–320 Ko, soit une réduction de 85%. Cliquez sur Télécharger sur la carte ou téléchargez un ZIP en lot si vous avez converti plusieurs images.
Quels formats sont pris en charge ?
Du côté de l’entrée, tout format que le navigateur peut décoder est accepté : PNG, JPEG, WebP, GIF et BMP couvrent pratiquement tous les fichiers qu’un designer ou un outil de capture d’écran produit. Les formats de sortie sont PNG (toujours sans perte), JPEG, WebP et AVIF. La sortie AVIF est prise en charge via un encodeur WebAssembly chargé à la demande dans tous les navigateurs, sans besoin d’encodeur Canvas natif.
Est-ce que cela se passe sur mon appareil ?
Oui. La page utilise l’API Canvas native du navigateur et l’API Web File. Aucune donnée d’image n’est envoyée à un serveur ; le pipeline de conversion s’exécute entièrement dans votre onglet de navigateur. Vous pouvez le vérifier en ouvrant DevTools et en consultant le panneau Network — il n’y a pas de requêtes sortantes une fois la page chargée.
Quelle est la différence de qualité entre PNG et JPEG ?
PNG est un format sans perte — chaque pixel survit exactement au cycle d’encodage. JPEG utilise la compression DCT et supprime les détails fins que l’œil remarque rarement ; la qualité 0.8 est un point d’équilibre courant où la différence visuelle avec l’original est imperceptible pour la plupart des spectateurs, mais le fichier est 4 à 6 fois plus petit que le PNG. WebP peut fonctionner en modes sans perte et avec pertes ; le curseur de qualité ici pilote l’encodeur avec pertes, et la qualité 0.85 surpasse généralement JPEG 0.85 de 25 à 30% sur les photos naturelles.
Comment fonctionne la sortie AVIF ?
L’encodage AVIF utilise un codec WebAssembly qui se charge à la demande la première fois que vous sélectionnez le format AVIF — aucun plugin, aucun indicateur de navigateur, aucune attente d’une future version de Chrome. Le binaire WASM est servi depuis notre propre origine, encode entièrement votre image dans un thread d’arrière-plan et renvoie un blob image/avif standard prêt à télécharger. La seule requête réseau est la récupération unique du codec lui-même ; aucune donnée d’image ne quitte jamais votre appareil. Une fois chargé, l’encodeur reste en cache pour la session afin que les conversions suivantes soient plus rapides. Les fichiers AVIF sont généralement 20–30 % plus petits que WebP et 50 % plus petits que JPEG à qualité équivalente, ce qui en fait le meilleur choix pour les sites sensibles aux performances.
Déposez vos images, choisissez un format, convertissez. Tout fonctionne dans votre onglet — sans envoi, sans compte, sans attendre un serveur.