ブラウザでの画像変換のしくみ
すべての変換はブラウザ内で動作する4ステップのパイプラインです。JPEGとPNGではブラウザのCanvas APIが直接エンコードを処理します。SafariのWebPと全ブラウザのAVIFでは、ページが必要に応じて軽量なWebAssemblyコーデックを読み込みます — それでもすべてローカルで、画像がデバイスから出ることはありません。
- アップロードされた各ファイルを Blob として読み込み、オブジェクト URL を生成して、ブラウザがサーバーにバイトをコピーせずにデコードできるようにします。
- デコードした画像をオフスクリーン Canvas 要素に描画し、元のアスペクト比を維持しながらリサイズ制約を適用します。
canvas.toBlob(callback, targetMimeType, quality)を呼び出して、PNG、JPEG、Chrome/Firefox WebP 用にピクセルを再エンコードします。Safari WebP および AVIF エンコードでは、初回使用時に WebAssembly コーデックワーカーが読み込まれ、バックグラウンドスレッドでエンコードを処理します。PNG 出力は常にロスレスです。JPEG、WebP、AVIF は品質スライダーに従い、これはエンコーダーの量子化設定に直接マッピングされます。- 出力サイズとファイルサイズを含むビフォー/アフターのサムネイルを表示し、画像ごとのダウンロードボタン、またはバッチ全体を一括 ZIP でダウンロードできます。
画像フォーマットを変換する理由
- PNG から WebP に変換すると、品質 0.8 で見た目の劣化なしに一般的なファイルサイズが 25〜35% 削減され、ページ重量が下がり Core Web Vitals の LCP スコアが直接向上します。
- PNG は JPEG が捨てる透明度を保持します。PNG→JPEG では透明ピクセルが白背景でレンダリングされるため、宛先（メール、旧 CMS）が PNG を受け付けない場合に便利です。
- SNS や広告ネットワークには厳格なフォーマット要件があります。Facebook と LinkedIn は写真に JPEG を好み、Twitter の OG プレビューは WebP に対応し、一部の広告サーバーは非 JPEG クリエイティブを拒否します。
- CMS や DAM へのアップロード前に混在フォーマット（PNG スクリーンショット、JPEG 写真、WebP エクスポート）のバッチを単一フォーマットに統一することで、取り込みパイプラインのフォーマット処理の複雑さが解消されます。
主な活用シーン
ソースフォーマットと送り先の要件が一致しないとき、変換が必要になります。
- Shopify や WooCommerce ショップの商品写真を準備 — JPEG 原本をストアフロント用に品質 0.85 の WebP に変換し、印刷エクスポート用の PNG は保持。
- React や Next.js ビルドに組み込む前に、デザイナー提供の PNG エクスポートを JPEG や WebP に変換して、フレームワークの画像オプティマイザーが小さいソースから始められるようにする。
- QA テスト実行のスクリーンショットフォルダを一括処理 — バグトラッカーのチケットに添付する前にアーカイブサイズを縮小するために PNG を品質 0.9 の JPEG に変換。
実践例: 2 MB PNG → 300 KB WebP
2400×1600 ピクセルの 2 MB PNG ヒーロー画像はマーケティングのランディングページでよく見られる重い素材です。
PNG をここにドロップし、変換先フォーマットとして WebP を選択し、品質を 0.8 に設定し、オプションで最大幅を 1200 に設定してピクセル寸法を半分にします。Canvas パイプラインは画像を 1200×800（アスペクト維持）で描画し、WebP に再エンコードし、出力カードに結果が表示されます — 通常 280〜320 KB で 85% 削減。カードの ダウンロード をクリックするか、複数の画像を変換した場合はまとめて ZIP でダウンロードできます。
対応フォーマットは何ですか？
入力側では、ブラウザがデコードできるすべてのフォーマットを受け付けます：PNG、JPEG、WebP、GIF、BMP は、デザイナーやスクリーンショットツールが生成するほぼすべてのファイルをカバーします。出力フォーマットは PNG（常にロスレス）、JPEG、WebP、AVIF です。AVIF 出力は、すべてのブラウザでオンデマンドに読み込まれる WebAssembly エンコーダーを介してサポートされています — ネイティブの Canvas エンコーダーは不要です。
処理はデバイス上で行われますか？
はい。ページはブラウザのネイティブ Canvas API と Web File API を使用します。画像データはサーバーに送信されず、変換パイプラインは完全にブラウザのタブ内で実行されます。DevTools を開いて Network パネルを確認することで検証できます — ページ読み込み後に外向きのリクエストは一切ありません。
PNG と JPEG の品質の違いは何ですか？
PNG はロスレスフォーマットで、すべてのピクセルがエンコードサイクルを完全に通過します。JPEG は DCT 圧縮を使用し、人の目がほとんど気づかない細かい詳細を削除します。品質 0.8 は、ほとんどの視聴者に原画との視覚的な違いがほぼわからない一方でファイルが PNG より 4〜6 倍小さくなる一般的なスイートスポットです。WebP はロスレスモードと損失モードの両方で動作できます。ここの品質スライダーは損失エンコーダーを動かし、自然写真では品質 0.85 が JPEG 0.85 より通常 25〜30% 優れています。
AVIF出力の仕組み
AVIF エンコードは、AVIF 形式を選択した最初の時にオンデマンドで読み込まれる WebAssembly コーデックを使用します — プラグイン不要、ブラウザフラグ不要、将来の Chrome リリースを待つ必要なし。WASM バイナリは自社オリジンから提供され、画像全体をバックグラウンドスレッドでエンコードし、ダウンロード可能な標準の image/avif blob を返します。唯一のネットワークリクエストはコーデック自体の一度だけの取得です。画像データがデバイスから出ることは決してありません。一度読み込まれると、エンコーダーはセッション中キャッシュされ、以降の変換はより高速になります。AVIF ファイルは通常、同等の品質で WebP より 20–30% 小さく、JPEG より 50% 小さいため、パフォーマンス重視のサイトに最適な選択肢です。
画像をドロップし、フォーマットを選んで変換。すべてタブ内で完結 — アップロード不要、アカウント不要、サーバーの待機なし。