Images et photos · Convertisseur et compresseur d'images
Comment canvas.toBlob convertit PNG en WebP dans votre navigateur
· Comment ça marche
formats d'image toile page Web
Un convertisseur d'image de navigateur est un décodeur, un bitmap et un encodeur enchaînés, et l'ensemble de la chaîne est intégré au navigateur. Cet article suit un PNG via le décodage, le canevas et toBlob vers un fichier WebP, et note ce qui est perdu en cours de route.
D'où vient le WebP lorsqu'aucun serveur n'est impliqué — la question concrète derrière un convertisseur qui fonctionne hors ligne
Le WebP ne provient pas d'une file d'attente de conversion côté serveur. Votre navigateur dispose déjà de décodeurs d'images, d'une surface de pixels dessinable et d'encodeurs ; le convertisseur ToolAcre les connecte. C'est pourquoi un PNG peut être transformé dans votre onglet après le chargement du site. « Aucun téléchargement » fait référence à l'image source et au résultat de la conversion, et non au site Web n'ayant aucune activité réseau.
Première étape : décodage – comment le navigateur transforme les octets PNG en un bitmap RGBA et pourquoi chaque format finit par former la même grille
Tout d’abord, le PNG est décodé en une image bitmap. La compression PNG, les choix de palette et les métadonnées de couleur déterminent comment ses octets deviennent des pixels, mais le canevas fonctionne sur le raster décodé, pas sur des morceaux du fichier PNG. Une capture d'écran 1600×900 donne 1.44 millions de positions de pixels même si le fichier lui-même est beaucoup plus petit. ToolAcre utilise createImageBitmap et applique un budget de pixels ; une grande image décodée est un problème de mémoire avant d'être un problème de téléchargement.
Deuxième étape : le canevas comme zone de préparation – dessiner le bitmap sur un canevas ou un OffscreenCanvas de dimensions correspondantes
Le bitmap est dessiné dans un canevas ou OffscreenCanvas avec les dimensions de sortie demandées. Si ces dimensions correspondent à la source et qu'aucun recadrage n'est choisi, drawImage organise les pixels pour l'encodage ; si les dimensions changent, le canevas les rééchantillonne et les valeurs des pixels peuvent changer avant le début de l'encodage WebP. La même routine de rendu sert l'aperçu interactif et le chemin de travail, empêchant ces deux sorties de suivre des algorithmes non liés.
Troisième étape : toBlob avec un type et une qualité MIME – comment l'encodeur est sélectionné, ce que contrôle le numéro de qualité et pourquoi il est ignoré pour PNG
Sur un canevas ordinaire, toBlob(callback, "image/webp", quality) demande au navigateur d'encoder WebP et rappelle avec un Blob. Lorsque OffscreenCanvas est disponible, ToolAcre utilise convertToBlob({type,quality}) pour le même travail. Contrôles qualité d'un encodeur avec perte ; ce n'est pas une promesse d'un nombre d'octets spécifique. L'exportation PNG est sans perte et son paramètre de qualité ne définit pas un niveau de compression de type JPEG. Inspectez toujours le format effectivement renvoyé, car la disponibilité de l'encodeur dépend du navigateur.
Ce que le pipeline rejette : métadonnées, profils de couleurs et précision de 16 bits, et pourquoi il s'agit d'une propriété de la technique plutôt que d'un bug.
Le réencodage d'un raster décodé ne peut pas conserver tous les faits dans le conteneur PNG d'origine. Les morceaux de texte, les métadonnées de l'appareil photo ou de l'éditeur, certains détails du profil de couleur et la profondeur de bits de la source peuvent ne pas survivre à un aller-retour sur le canevas ; Les canaux 16 bits ne deviennent pas un WebP 16 bits simplement parce que l'entrée les transportait. WebP peut conserver la transparence lorsque l'encodeur le prend en charge, alors qu'une exportation JPEG nécessite de remplir des zones transparentes. La taille du fichier à elle seule ne peut pas indiquer si une conversion a préservé les lignes fines ou les couleurs.
Exemple concret : une capture d'écran PNG 1.8 MB vers WebP – suivre le fichier à travers les trois étapes et lire le résultat
Prenons une capture d'écran PNG 1.8 MB avec du texte, des dégradés et un coin transparent. Décodez-le, laissez les dimensions inchangées, sélectionnez WebP, exportez et comparez la taille du Blob et le type MIME à l'original. La taille résultante est mesurée et non prévisible : des captures d'écran propres peuvent être bien compressées, alors que le contenu bruyant peut ne pas l'être. Zoomez sur les petits glyphes et le coin transparent avant d'accepter le fichier plus petit. Si le texte net de l'interface utilisateur devient flou, conservez PNG ou ajustez la qualité de l'encodeur plutôt que de prétendre que WebP est toujours meilleur.
Ce que cela ne couvre pas : les images animées, les formats que le navigateur ne peut pas décoder et les paramètres d'encodeur que l'API n'expose pas
Ce pipeline ne promet pas la rétention de l'animation, le décodage HEIC sur chaque appareil ou le contrôle total des paramètres de sous-échantillonnage et d'effort de l'encodeur WebP. Il ne peut pas non plus récupérer les détails déjà perdus dans une source JPEG en l'enregistrant au format PNG ou WebP. Les cycles répétés de décodage/réencodage peuvent accumuler des pertes. Conservez un original et utilisez les formats d'entrée/sortie pris en charge répertoriés sur la page de l'outil plutôt que de supposer que tous les formats connus de votre système d'exploitation sont acceptés ici.
À retenir : trois étapes, aucun téléchargement – comment Image Converter & Compressor exécute ce pipeline sur votre appareil
Le mécanisme est décoder → dessiner → encoder, réalisé avec les API du navigateur et sans téléchargement d'image. ToolAcre expose le format et les dimensions cibles afin que vous puissiez savoir si vous modifiez simplement le conteneur ou si vous redimensionnez également les pixels. Testez une capture d'écran représentative dans Image Converter & Compressor avant de traiter un lot entier, puis inspectez le résultat téléchargé à la taille que les gens verront.