Comment fonctionne la conversion d’images dans le navigateur
Chaque conversion est un pipeline en quatre étapes s’exécutant entièrement en JavaScript. Aucune bibliothèque de codec n’est téléchargée — l’API Canvas native du navigateur gère le décodage et le ré-encodage.
- 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.
- Appelle
canvas.toBlob(callback, typeMime, qualité)pour ré-encoder les pixels. La sortie PNG est toujours sans perte ; JPEG et WebP respectent le curseur de qualité. - 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 ?
Images sources : tout format que le navigateur peut décoder — PNG, JPEG, WebP, GIF et BMP sont tous acceptés. Formats de sortie : PNG (sans perte), JPEG et WebP. La sortie AVIF n’est pas encore prise en charge car l’encodeur de l’API Canvas n’est disponible que dans Chrome 105+ et absent dans Safari et Firefox ; une voie AVIF basée sur WASM est prévue pour une version future.
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.
Quand le support AVIF arrivera-t-il ?
L’encodage AVIF via canvas.toBlob(…, 'image/avif') ne fonctionne aujourd’hui que dans Chrome 105+ ; Safari et Firefox ne le prennent pas en charge. Une version future ajoutera une voie AVIF optionnelle utilisant un encodeur WebAssembly léger pour que la fonctionnalité fonctionne sur tous les navigateurs. En attendant, l’option AVIF est affichée comme « bientôt disponible » et l’encodeur WebP (universellement pris en charge dans les navigateurs modernes) est l’alternative de nouvelle génération recommandée.
Déposez vos images, choisissez un format, convertissez. Tout fonctionne dans votre onglet — sans envoi, sans compte, sans attendre un serveur.