Immagini e foto · Convertitore e compressore di immagini
Come canvas.toBlob converte PNG in WebP nel tuo browser
· Come funziona
formati di immagine tela webp
Un convertitore di immagini del browser è un decodificatore, una bitmap e un codificatore concatenati insieme e l'intera catena è integrata nel browser. Questo post segue un PNG attraverso la decodifica, il canvas e il toBlob in un file WebP e nota ciò che si perde lungo il percorso.
Da dove viene WebP quando non è coinvolto alcun server: la domanda concreta dietro un convertitore che funziona offline
WebP non proviene da una coda di conversione lato server. Il tuo browser è già dotato di decodificatori di immagini, una superficie pixel disegnabile e codificatori; li collega il convertitore ToolAcre. Ecco perché un PNG può essere trasformato nella tua scheda dopo il caricamento del sito. "Nessun caricamento" si riferisce all'immagine sorgente e all'output della conversione, non al fatto che il sito web non abbia alcuna attività di rete.
Passo uno: decodifica: come il browser trasforma i byte PNG in una bitmap RGBA e perché ogni formato finisce con la stessa griglia
Innanzitutto PNG viene decodificato in un'immagine bitmap. La compressione PNG, le scelte della tavolozza e i metadati dei colori determinano il modo in cui i suoi byte diventano pixel, ma la tela funziona sul raster decodificato, non su porzioni del file PNG. Uno screenshot di 1600×900 restituisce 1.44 milioni di posizioni di pixel anche se il file stesso è molto più piccolo. ToolAcre utilizza createImageBitmap e impone un budget di pixel; un'immagine decodificata di grandi dimensioni è un problema di memoria prima che un problema di caricamento.
Passaggio due: la tela come area di preparazione: disegnare la bitmap su una tela o OffscreenCanvas di dimensioni corrispondenti
La bitmap viene disegnata in una tela o OffscreenCanvas con le dimensioni di output richieste. Se tali dimensioni corrispondono all'origine e non viene scelto alcun ritaglio, drawImage mette in scena i pixel per la codifica; se le dimensioni cambiano, la tela le ricampiona e i valori dei pixel potrebbero cambiare prima dell'avvio della codifica WebP. La stessa routine di rendering serve l'anteprima interattiva e il percorso del lavoratore, impedendo a questi due output di seguire algoritmi non correlati.
Passaggio tre: toBlob con tipo e qualità MIME: come viene selezionato il codificatore, cosa controlla il numero di qualità e perché viene ignorato per PNG
Su un normale canvas, toBlob(callback, "image/webp", qualità) chiede al browser di codificare WebP e richiama con un Blob. Laddove è disponibile OffscreenCanvas, ToolAcre utilizza convertToBlob({type,quality}) per lo stesso processo. La qualità controlla un codificatore con perdita; non è una promessa di un conteggio di byte specifico. L'esportazione di PNG è senza perdite e il relativo parametro di qualità non imposta un livello di compressione simile a JPEG. Controlla sempre il formato effettivamente restituito, perché la disponibilità del codificatore dipende dal browser.
Ciò che la pipeline scarta: metadati, profili colore e precisione 16-bit, e perché questa è una proprietà della tecnica piuttosto che un bug
La ricodifica di un raster decodificato non può preservare tutti i fatti nel contenitore PNG originale. Pezzi di testo, metadati della fotocamera o dell'editor, alcuni dettagli del profilo colore e la profondità in bit della sorgente potrebbero non sopravvivere a un viaggio di andata e ritorno su tela; I canali 16bit non diventano un 16bit WebP semplicemente perché l'input li trasportava. WebP può mantenere la trasparenza quando il codificatore lo supporta, mentre un'esportazione JPEG richiede il riempimento di aree trasparenti. La dimensione del file da sola non può mostrare se una conversione ha preservato linee sottili o colori.
Esempio realizzato: uno screenshot di 1.8 MB PNG per WebP — seguendo il file attraverso i tre passaggi e leggendo il risultato
Considera uno screenshot 1.8 MB PNG con testo, sfumature e un angolo trasparente. Decodificalo, lascia invariate le dimensioni, seleziona WebP, esporta e confronta la dimensione del BLOB e il tipo MIME con l'originale. La dimensione risultante è misurata, non prevedibile: gli screenshot puliti potrebbero comprimersi bene, mentre i contenuti rumorosi no. Ingrandisci i piccoli glifi e l'angolo trasparente prima di accettare il file più piccolo. Se il testo nitido dell'interfaccia utente diventa confuso, mantieni PNG o regola la qualità del codificatore anziché affermare che WebP è sempre migliore.
Cosa non copre: immagini animate, formati che il browser non può decodificare e impostazioni del codificatore che API non espone
Questa pipeline non promette la conservazione dell'animazione, la decodifica HEIC su ogni dispositivo o il controllo completo dei parametri di sottocampionamento e sforzo del codificatore WebP. Inoltre, non può recuperare i dettagli già persi in una fonte JPEG salvandola come PNG o WebP. Cicli ripetuti di decodifica/re-encode possono accumulare perdite. Conserva un originale e utilizza i formati input/output supportati elencati nella pagina degli strumenti effettivi anziché dare per scontato che tutti i formati riconosciuti dal tuo sistema operativo siano accettati qui.
Conclusione: tre passaggi, zero caricamenti: come Image Converter & Compressor esegue questa pipeline sul tuo dispositivo
Il meccanismo è decodifica→disegna→codifica, effettuato con le API del browser e senza caricamento di immagini. ToolAcre espone il formato e le dimensioni di destinazione in modo da poter capire se stai semplicemente modificando il contenitore o ridimensionando anche i pixel. Prova uno screenshot rappresentativo in Image Converter & Compressor prima di elaborare un intero batch, quindi controlla il risultato scaricato nella dimensione che le persone vedranno.