ブラウザでの画像変換のしくみ
すべての変換は JavaScript のみで動く 4 ステップのパイプラインです。コーデックライブラリのダウンロードは不要 — ブラウザ組み込みの Canvas API がデコードと再エンコードを担当します。
- アップロードされた各ファイルを Blob として読み込み、オブジェクト URL を生成して、ブラウザがサーバーにバイトをコピーせずにデコードできるようにします。
- デコードした画像をオフスクリーン Canvas 要素に描画し、元のアスペクト比を維持しながらリサイズ制約を適用します。
- ピクセルを再エンコードするために
canvas.toBlob(callback, targetMime, quality)を呼び出します。PNG 出力は常にロスレスで、JPEG と WebP は品質スライダーに従います。 - 出力サイズとファイルサイズを含むビフォー/アフターのサムネイルを表示し、画像ごとのダウンロードボタン、またはバッチ全体を一括 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 出力は現時点では未対応です。Canvas API エンコーダーは Chrome 105+ のみ対応で、Safari・Firefox には未実装のためです。WASM ベースの AVIF パスを将来のリリースで追加する予定です。
処理はデバイス上で行われますか？
はい。ページはブラウザのネイティブ 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 対応はいつ追加されますか？
canvas.toBlob(…, 'image/avif') による AVIF エンコードは現在 Chrome 105+ のみで動作します。Safari・Firefox は対応していません。将来のリリースでは、すべてのブラウザで機能するよう軽量な WebAssembly エンコーダーを使ったオプションの AVIF パスを追加します。それまでの間、AVIF オプションは「近日公開予定」と表示され、WebP エンコーダー（現代のブラウザで普遍的に対応）が推奨される次世代の代替手段です。
画像をドロップし、フォーマットを選んで変換。すべてタブ内で完結 — アップロード不要、アカウント不要、サーバーの待機なし。