画像と写真 · 画像コンバーター & コンプレッサー
canvas.toBlob がブラウザ内で PNG を WebP に変換する方法
· 仕組み
画像フォーマット キャンバス ウェブ
ブラウザー イメージ コンバーターは、デコーダー、ビットマップ、エンコーダーが連鎖的に結合されたもので、チェーン全体がブラウザーに組み込まれています。この投稿では、1 つの PNG をデコード、キャンバス、toBlob を通じて WebP ファイルにたどり、その途中で何が失われるかを記録します。
サーバーが関与していない場合、WebP はどこから来るのか — オフラインで動作するコンバーターの背後にある具体的な問題
WebP はサーバー側の変換キューから取得されたものではありません。ブラウザにはすでに画像デコーダ、描画可能なピクセル サーフェス、エンコーダが備わっています。 ToolAcre コンバーターがそれらを接続します。サイトが読み込まれた後にタブで PNG を変換できるのはこのためです。 「アップロードなし」とは、ソース画像と変換出力を指しており、ネットワーク アクティビティがまったくない Web サイトを指すわけではありません。
ステップ 1: デコード — ブラウザが PNG バイトを RGBA ビットマップに変換する方法と、すべての形式が同じグリッドになる理由
まず、PNG が画像ビットマップにデコードされます。 PNG 圧縮、パレットの選択、およびカラー メタデータによって、そのバイトがどのようにピクセルになるかが決まりますが、キャンバスは PNG ファイルのチャンクではなく、デコードされたラスターで動作します。ファイル自体がはるかに小さい場合でも、1600×900 のスクリーンショットでは 1.44 百万ピクセルの位置が得られます。 ToolAcre は createImageBitmap を使用し、ピクセル バジェットを強制します。デコードされた大きな画像は、アップロードの問題である前にメモリの問題です。
ステップ 2: ステージング領域としてのキャンバス — 一致する寸法のキャンバスまたは OffscreenCanvas にビットマップを描画します
ビットマップは、要求された出力サイズでキャンバスまたは OffscreenCanvas に描画されます。これらの寸法がソースと一致し、クロップが選択されていない場合、drawImage はエンコード用にピクセルをステージングします。寸法が変更されると、キャンバスは寸法を再サンプリングし、WebP エンコードが開始される前にピクセル値が変更される可能性があります。同じレンダリング ルーチンがインタラクティブ プレビューとワーカー パスを提供し、これら 2 つの出力が無関係なアルゴリズムに従うのを防ぎます。
ステップ 3: MIME タイプと品質を指定した toBlob — エンコーダーの選択方法、品質番号の制御内容、PNG で無視される理由
通常のキャンバスでは、toBlob(callback, "image/webp",quality) はブラウザーに WebP をエンコードするように要求し、Blob でコールバックします。 OffscreenCanvas が利用可能な場合、ToolAcre は同じジョブに ConvertToBlob({type,quality}) を使用します。品質は非可逆エンコーダを管理します。特定のバイト数を保証するものではありません。 PNG エクスポートはロスレスであり、その品質パラメーターは JPEG のような圧縮レベルを設定しません。エンコーダーの可用性はブラウザーによって異なるため、実際に返される形式を常に検査してください。
パイプラインが破棄するもの — メタデータ、カラー プロファイル、16 ビット精度、およびそれがバグではなく技術の特性である理由
デコードされたラスターを再エンコードしても、元の PNG コンテナー内のすべてのファクトを保持することはできません。テキストのチャンク、カメラまたはエディタのメタデータ、一部のカラー プロファイルの詳細、およびソースのビット深度は、キャンバスの往復に耐えられない可能性があります。 16 ビット チャネルは、入力に伝送されたからといって 16 ビット WebP になるわけではありません。 WebP はエンコーダが透明性をサポートしている場合は透明性を維持できますが、JPEG エクスポートでは透明な領域を埋める必要があります。ファイル サイズだけでは、変換によって細い線や色が保持されたかどうかを判断することはできません。
成功した例: WebP への 1.8 MB PNG スクリーンショット — ファイルに従って 3 つの手順を実行し、結果を読み取る
テキスト、グラデーション、透明なコーナーを含む 1.8 MB PNG スクリーンショットを考えてみましょう。それをデコードし、サイズを変更しないで、WebP を選択し、エクスポートして、Blob サイズと MIME タイプを元のものと比較します。結果のサイズは測定されたものであり、予測できません。きれいなスクリーンショットは適切に圧縮される可能性がありますが、ノイズの多いコンテンツは圧縮されない可能性があります。小さいファイルを受け入れる前に、小さなグリフと透明な隅を拡大表示します。鮮明な UI テキストがぼやけてしまう場合は、WebP が常に優れていると主張するのではなく、PNG を維持するか、エンコーダの品質を調整してください。
これでカバーされないもの — アニメーション画像、ブラウザがデコードできない形式、API が公開しないエンコーダ設定
このパイプラインは、アニメーションの保持、すべてのデバイスでの HEIC デコード、または WebP エンコーダのサブサンプリングとエフォート パラメータの完全な制御を保証するものではありません。また、JPEG ソースを PNG または WebP として保存しても、すでに失われたディテールを復元することはできません。デコード/再エンコードのサイクルを繰り返すと、損失が蓄積される可能性があります。オリジナルを保持し、オペレーティング システムが認識しているすべての形式がここで受け入れられると仮定するのではなく、実際のツール ページにリストされているサポートされている入力/出力形式を使用してください。
要点: 3 つのステップ、アップロードなし — Image Converter & Compressor がデバイス上でこのパイプラインを実行する方法
メカニズムはデコード→描画→エンコードであり、ブラウザ API を使用して実行され、画像のアップロードは行われません。 ToolAcre はターゲットのフォーマットとサイズを公開するので、単にコンテナーを変更しているだけなのか、ピクセルのサイズも変更しているのかがわかります。バッチ全体を処理する前に、Image Converter & Compressor で代表的なスクリーンショットを 1 つテストし、ダウンロードした結果を人が見るサイズで検査します。