画像形式変換
PNG・JPEG・WebP を相互に変換します。透過が失われる場合の下地の色も指定できます。
すべてブラウザ内で動作します。入力した内容はアップロードされません。
ReadoutKit / Takashi Yamazaki が執筆・保守しています
仕組みと使い方
それぞれの形式は何のためにあるか
ここにある3つの形式は競合というより、用途の異なる道具です。中身ではなく習慣で選んでしまうのが最もよくある誤りです。
| 形式 | 圧縮 | 透過 | 向いているもの |
|---|---|---|---|
| PNG | 可逆 | あり | スクリーンショット、ロゴ、図、輪郭のはっきりしたもの |
| JPEG | 非可逆 | なし | 写真、互換性を最優先したい場合 |
| WebP | 両対応 | あり | 現代のウェブのほぼすべて |
ほとんどの場合に効く判断基準があります。平坦な色の面と硬い輪郭が主体なら可逆形式、連続的なグラデーションのある写真なら非可逆形式です。JPEG で保存したスクリーンショットは文字のまわりがにじみ、PNG で保存した写真は見た目の利点なしにサイズが5倍になることがあります。
透過をどうするかという問題
JPEG への変換だけは、圧縮とは別の意味で情報が失われる方向です。JPEG にはアルファチャンネルがないため、問題は透明な画素が変わるかどうかではなく、何色に変わるかです。
多くの変換ツールはこれを黙って決めており、canvas の既定値は黒です。透過背景のロゴが黒い長方形に乗って出てくるのは、たいていこれが原因です。このツールでは選べるようにし、既定を白にしています。多くの文書やウェブページの下地が白だからです。色のついた背景に置く予定なら、その色をここで指定してください。縁が白く浮かずになじみます。
同じ絵を、それぞれの形式で書き出すと
上の表は「何のための形式か」でしたが、こちらは「いくらかかるか」です。素材は1280 × 992のスクリーンショット1枚——平坦な色面と文字のエッジばかりで、写真的なグラデーションはありません。このツールと同じ canvas の経路で読み込み、書き出して測りました。
| 形式 | 書き出し方 | サイズ | 元との比 |
|---|---|---|---|
| PNG | 元ファイル | 89 KB | 100% |
| JPEG | 非可逆 品質 0.85 | 85 KB | 95.6% |
| WebP | 非可逆 品質 0.85 | 50.2 KB | 56.5% |
| PNG | 可逆 | 132.4 KB | 148.7% |
| WebP | 可逆 | 281 KB | 315.8% |
3つの結果は、いずれも「変換ツール」に対する期待を裏切るので、取り出しておきます。
JPEG にしてもほとんど小さくなりませんでした——品質0.85で元の95.6%、品質0.95では144.6%です。ファイルは1.5倍近くに膨らみ、しかも文字まわりは目に見えて汚くなります。JPEG はどんな画像にもかけられる「圧縮」ではなく、写真のための形式です。この画像は写真ではありません。
WebP が大差で勝ちました——56.5%。非可逆形式が得意なはずのない絵でこれです。迷ったら WebP、という一般則がここにも出ています。
可逆変換は2つとも元より大きくなりました——canvas 経由の PNG が148.7%、可逆の WebP が315.8%。元ファイルは PNG 最適化ツールを通ったもので、ブラウザのエンコーダはそれではありません。よく最適化された PNG を別の可逆形式に変えるのは節約ではなく、悪い比率での書き直しです。
避けたほうがよい変換
- 画質が良くなることを期待した JPEG → PNG。すでに劣化した画像を可逆で保存すると、劣化がそのまま完全に保存され、ファイルサイズだけが膨らみます。何も復元されません。
- 最適化済みの PNG → 可逆 WebP。上の実測で3倍以上になりました。WebP の強みは非可逆の側にあります。
- 非可逆形式を往復させること。JPEG や WebP は保存のたびに情報を捨てます。数回往復させると、元に戻せない劣化が目に見える形で現れます。常に、手元にある最高品質の元データから始めてください。
- 写真を PNG にすること。スクリーンショット機能で写真を撮ったときによく起きます。結果は巨大で、見た目は何も良くなりません。
通底しているのは、変換ツールが変えるのは容器であって中身ではない、ということです。以前の保存で失われた情報を足すことはできませんし、その形式が想定していない絵に合わせることもできません。絵が何でできているか——平坦な色とエッジか、連続したグラデーションか——を見れば、ほとんどのことは決まります。
AVIF が一覧にない理由
AVIF は明らかな欠落なので、隠さずに書いておきます。ブラウザは AVIF を表示できますが、書き出しは別の話です。canvas に AVIF を要求すると、エラーも警告もなく PNG が返ってきます。AVIF を一覧に載せた変換ツールは、.avif という名前の PNG をあなたに渡すことになります。
それは「対応していない」より悪い結果なので、ここに並んでいる形式は、ブラウザが本当に生成できるものだけです。AVIF が必要なら、自前のエンコーダを持つツール——ウェブでは、つまり画像をサーバーに送るツール——を使うしかありません。その取引をせずに済む範囲で最も近いのが WebP で、写真であれば AVIF との差は数パーセント程度に収まります。
このツールでの変換の流れ
画像をブラウザがデコードし、canvas に描画し、指定された形式で再エンコードする——ブラウザが何年も前からネイティブに備えている3工程です。何も送信されないため、アップロードの待ち時間も、順番待ちも、他人の通信費に由来するサイズ上限もなく、聞いたこともないサーバー上にあなたの画像の複製が残ることもありません。
知っておく価値のある副作用がひとつあります。canvas に描き直す処理は画素だけを引き継ぎます。撮影メタデータ、撮影日時、カラープロファイル、GPS 座標は引き継がれません。画像を公開する前にはむしろ望ましいことが多いのですが、それらが必要な場合は原本を保管しておいてください。
よくある質問
- どの形式がいちばん小さくなりますか？
- たいていは WebP で、しかも思っているより差が大きいです。PNG で91.4KBの1280 × 992のスクリーンショットを品質0.85で書き出すと、WebP は51.5KB、JPEG は87.1KB——同じ設定で WebP のほうが41%小さくなります。例外は、すでに最適化済みの PNG です。それを可逆の WebP に変換した場合は元の315.8%になりました。
- PNG に変換すればぼやけた JPEG は綺麗になりますか？
- なりません。PNG は与えられたものを劣化なく保存するので、すでにある劣化をそのまま完全に保存し、ファイルだけが大きくなります。以前の非可逆保存で捨てられた情報はファイルの中に存在せず、どんな変換でも復元できません。変換に意味があるのは、透過が必要なときや、受け取り側が特定の形式しか扱えないときであって、修復の手段ではありません。
- 変換すると Exif や位置情報は消えますか？
- 消えます。画像は一度デコードされ、canvas に描き直され、再エンコードされます。この経路が運ぶのはピクセルだけです。カメラの機種、撮影日時、カラープロファイル、GPS 座標は出力に書き込まれません。写真を公開する前としてはたいてい望ましい挙動ですが、変換後のコピーからは取り戻せないので、メタデータが必要なら元ファイルを残してください。
- 透過部分が白くなったのはなぜですか？
- JPEG には透過を保存する仕組みがないためです。JPEG のすべての画素は不透明なので、透明だった部分は何らかの色にならざるをえません。このツールではその色を選べるようにしており、既定は白です。この処理がないと黒く出ます。透過を保ちたい場合は PNG か WebP に変換してください。
- iPhone の HEIC ファイルも変換できますか？
- ブラウザが HEIC をデコードできる場合に限られます。Apple 製デバイスの Safari は対応していますが、多くのブラウザは対応していません。読み込める環境であれば通常どおり変換できます。読み込めない環境では、ファイルの読み込み自体が失敗します。ブラウザが対応していない形式を、大きなデコーダを読み込まずにページ側で扱う方法はありません。
- 変換すると画質は落ちますか？
- 方向によります。PNG から WebP や JPEG への変換は非可逆なので、情報の一部が失われます。JPEG から PNG は可逆ですが、すでに失われたものが戻るわけではありません。劣化した画像を、より大きなファイルで正確に複製するだけです。WebP から JPEG は、非可逆だったデータをさらに非可逆で再エンコードするため、劣化がわずかに重なります。
- どの形式を書き出せるかはどう判定していますか？
- ページの読み込み時に実際に試して、動作する形式だけを選択肢に出しています。ブラウザは書き出せない形式を指定されると黙って PNG を返すため、そのままでは拡張子と中身が食い違うファイルができてしまいます。選ぶ前に判定しているのはそのためです。
- ファイルサイズの上限はありますか？
- 端末のメモリに収まる範囲だけが制約です。アップロードしないため、サーバー側の上限も順番待ちもありません。5,000万画素を大きく超えるような画像では、処理が遅くなったり、空きメモリの少ないスマートフォンでは失敗したりすることがあります。
出典
このツールが使っている計算式と税率・基準値は、下記の資料に基づいています。制度は改正されます。ここの数字と出典が食い違う場合は、出典が正しいものとお考えください。
2026年9月1日 時点で、下記の出典と数値を突き合わせています。