ブラウザで PNG / JPEG / WebP / AVIF を相互変換する
CDN の容量に合わせてリサイズし、可逆／非可逆を選び、画質スライダーを確認 — 原本を怪しい変換サイトにアップロードしなくて済みます。
このガイドと一緒に使うと便利なツール：
なぜ重要か
マーケはヒーローを巨大 PNG のまま出荷し WebP のフォールバックを忘れます。開発者は BMP のスクショを Issue に貼ってクローンを膨らませます。EC は 200 KB 以下の JPEG を要求するのにデザイナーはアルファ必須と言います。ブラウザ完結の変換なら NDA を守ったままブレークポイントごとのフォーマット試行が速く回ります。
実際の3つのシーン
PNG マスターから AVIF/WebP を書き出し、ブレークポイントごとに品質を調整します。
LCP が数字で改善
Illustrator 由来 PNG を落とし、透明が不要なら JPEG コンプへ。
短いターンアラウンド
長辺を縮めてから強めに圧縮し、チケットへアップロードします。
差し戻しが減る
手順
画像フォーマット変換を開きます。
ソース画像をアップロード
PNG、JPEG、WebP、AVIF、GIF（先頭フレーム）、BMP などをドラッグ＆ドロップします。
出力形式を選ぶ
CDN 方針に合わせコンテナとコーデックを選びます（多くは WebP/AVIF + JPEG フォールバック）。
寸法を調整
アスペクト固定プリセットや responsive srcset 向けの最大辺を指定します。
品質または可逆フラグ
JPEG/WebP は容量とブロックノイズのトレードオフ。文字まわりのハローを拡大プレビューで確認します。
変換結果をダウンロード
hero@2x.webpのように静的資産パイプラインと整合する名前を付けます。
実践のヒント
- 形式を変えず軽くしたいだけなら 画像圧縮も参照。
- Git LFS などに可逆マスターを残し、劣化版は CI／試作で派生。
- アルファ：JPEG は透明を保持できません。オーバーレイ用途は PNG/WebP/AVIF を選びます。
よくある落とし穴
よくある誤り
二重の劣化再エンコード
すでに JPEG のものを再度強く圧縮するとブロックが溜まります。可能なら RAW に近い書き出しから。
よくある誤り
プロファイル剥がし
変換後は sRGB 前提になることがあります。ICC がクリティカルなブランド写真は校正モニタで確認します。
よくある誤り
GIF アニメの期待
基本は先頭フレームのみ。モーション要件は別パイプラインで確認します。
向いていない用途
- 大量のベクター書き出し：CI で Inkscape /
rsvg-convertが再現性高く、SVG→PNG チュートリアル参照。 - RAW 現像：レンズ補正は現像ソフト向きです。
- 毎晩数千枚：サーバー側
ffmpeg/ ImageMagick とチェックサム監査が適しています。
FAQ
画像は端末の外に出ますか？
ブラウザ API でデコード／エンコードします。Wi‑Fi を切ってエアギャップ確認も可能です。
Safari で AVIF の質感が違う
デコーダ差で粒子が変わることがあります。ブランド承認は実機ブラウザでプレビューしてください。
EXIF は残せますか？
出力形式と設定次第です。GPS などはプライバシー監査のうえで。
次のステップ
- 機微な EXIF は EXIF 編集チュートリアル。
- ベクターを整理したら SVG→ICO。
- ストーリーボードは 画像→PDF。