画像形式変換
画像変換は、ブラウザ内でJPG、PNG、WebP、AVIFの間で画像を変換します。変換にはブラウザ自身のコーデックを使います。そしてツールがよく間違える一点、つまり透明な画像をアルファチャンネルのない形式へ変換する場面では、透明部分を黒としてエンコードしてしまう代わりに、選択した背景色を塗ることで処理します。
ここに画像をドロップ
ページのどこにでもドロップできます · ファイルを選択 · 100 MB
対応形式: JPG, JPEG, PNG, WebP, AVIF, HEIC, HEIF, GIF, BMP
画像形式変換はどう動きますか?
画像の変換は、デコードの後にエンコードが続く処理です。ソースは生のピクセルに変換され、そのピクセルが別のルールで書き出されます。フォーマット間で直接変換されるものは何もありません。だからこそ変換は決して完全なタダにはならず、出力形式の選択が重要になるのです。
透明部分の落とし穴
JPEGにはアルファチャンネルがありません。透明な背景を持つPNGをJPEGに変換すると、そのピクセルはどこかの色にならざるを得ません。描画されていないキャンバスは透明な黒であるため、黒になるのです。ネット上の「ロゴが黒い四角の中に出力された」という報告のほとんどは、これが原因です。
修正は矩形を1つ塗るだけです。画像を描く前にキャンバスを選択した色で塗りつぶせば、半透明のピクセルは0として解釈される代わりに、その色に対して正しく合成されます。この色はハードコードされた白ではなく、ここでは設定項目になっています。暗いサイト向けに作られたロゴには暗い背景が必要で、白は黒と同じくらい間違いだからです。
各フォーマットの使いどころ
JPEGは非可逆で、あらゆる環境で開け、透明部分は扱えません。連続階調のために作られたフォーマットなので、写真には優れ、テキストには弱いのが特徴です。圧縮アーティファクトは細部に隠れ、平坦な色の上では目立ちます。この30年間に作られたすべてのデバイスがJPEGを開けます。今もJPEGを選ぶ理由は、依然としてこれです。
PNGは可逆で、透明部分を保持します。スクリーンショット、ロゴ、図、そしてエッジの鋭いものはすべてPNG向けです。非可逆フォーマットは、それらを読みやすくしているエッジをまさにぼかしてしまうからです。代償はサイズです。写真をPNGにすると、JPEGの10倍になることもよくあります。
WebPは同じ見た目の品質でJPEGより通常25–35%小さく、透明部分をサポートし、たいていPNGを上回る可逆モードも備えています。現在使用中のすべてのブラウザが対応しており、今のウェブにおける賢明なデフォルトです。
AVIFはさらに小さく(多くの場合WebPより20–30%小さい)、JPEGが破綻する低ビットレートでは目立って優れています。代償はエンコード時間と利用できる環境です。AVIFを生成できないブラウザもあるからです。このページは、オプションを提示する前に1 × 1の画像をエンコードしてそれを確認します。ユーザーエージェントからの推測なら、1年もすれば外れるやり方です。
非可逆から可逆へ変換しても、劣化は元に戻らない
JPEGをPNGに変換すると、すでに情報を失った画像の可逆コピーができます。アーティファクトは完璧に保存され、ファイルは数倍大きくなります。これが正しい選択になることはあります。画像をこれから繰り返し編集するなら、可逆の中間形式にしておけば劣化の累積を止められるからです。ただし品質を回復する方法ではなく、そんな方法はそもそも存在しません。
逆方向の変換は1世代分の代償を払う
JPEGを別のJPEGに、あるいはWebPに変換すると、すでに量子化されたデータが再度量子化されます。変換のたびに、前回のブロックグリッドとずれる可能性のあるブロックグリッド上へアーティファクトが加わります。オリジナルが手元にあるなら、常にそこから変換してください。
メタデータはどうなるか
処理の流れが生のピクセルを経由するため、EXIFブロックは残りません。カメラの型番、タイムスタンプ、GPS座標はすべて失われます。たいていの用途ではそれこそ利点です。そのままだと、ネットに投稿した写真が位置情報を持ち続けるからです。破棄されずに尊重される唯一のタグがorientation(向き)です。これはデコードの際にピクセルへ適用されるため、横向きで撮った写真もまっすぐに出力されます。
入力
logo.png — 148 KB transparent background target: JPG, background #ffffff
出力
logo.jpg — 22 KB white composited behind alpha channel dropped
画像形式変換が対応するオプションとエッジケースは?
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| JPG | 可逆圧縮なし | — | 非可逆で互換性が高く、透明部分は保存できません。圧縮の乱れが目立ちにくい写真に適しています。 |
| PNG | 可逆圧縮あり | — | 可逆圧縮で透明部分を保存できます。スクリーンショットやロゴ、線画に適し、写真ではファイルが大きくなります。 |
| WebP | 可逆圧縮なし / 可逆圧縮あり | default | 見た目の画質が同じJPEGより通常25~35%小さく、透明部分と可逆モードにも対応します。 |
| AVIF | 可逆圧縮なし | — | WebPよりさらに20~30%小さくなることが多く、低ビットレートにも強い形式です。エンコードには時間がかかり、一部のブラウザーでは利用できません。 |
| 品質 | 0.1 – 1.0 | 0.85 | JPG、WebP、AVIFに適用されます。可逆圧縮であるPNGは無視されます。 |
| 背景色 | 色 | #ffffff | 対象画像にアルファチャネルがない場合に、画像の後ろに描画されます。透明部分が黒としてエンコードされるのを防ぎます。 |
| HEIC入力 | サポート対象 | — | libheifでデコードされ、HEICファイルがドロップされた場合のみ読み込まれます。詳細はHEICからJPGツールを参照してください。 |
よくある質問
PNGをJPGに変換したら黒くなったのはなぜですか?
JPEGにはアルファチャンネルがなく、描画されていないキャンバスに描かれた透明ピクセルは透明な黒になるため、エンコーダーは黒を書き出します。ブラウザでの画像変換における最もよくあるバグで、修正は1行です。画像を描く前に背景を塗る。このツールはそれを行い、しかも色を選べるようにしています。暗いサイト向けにデザインされたロゴには暗い背景が必要で、白も黒と同じくらい間違いだからです。
どのフォーマットに変換すればよいですか?
ウェブ向けはWebPです。同じ見た目の品質でJPEGより25–35%小さく、透明部分も対応し、現行のすべてのブラウザがサポートしています。相手が自分で管理していないシステム(古いCMS、印刷サービス、メールクライアント)ならJPGです。スクリーンショット、ロゴ、図など、サイズより可逆性が重要なものはPNG。サイズが決定的に重要で、受け手が読めることが分かっているならAVIFです。
PNGに変換するとJPEGの品質は良くなりますか?
なりません。すでに情報を失った画像の完璧な可逆コピーが、ファイルサイズ数倍で作られるだけです。JPEGのアーティファクトは完全な忠実度で保存されます。非可逆エンコーダーが捨てたディテールを取り戻せるものは何もありません。PNGへの変換が意味を持つのは、画像をこれから繰り返し編集する予定があり、保存のたびに劣化が積み重なるのを止めたい場合だけです。
HEICファイルは変換できますか?
できます。ブラウザがファイルを拒否し、そのバイト列がHEIFコンテナだった場合に限り、デコードのためにlibheifのWebAssemblyビルドが読み込まれます。その場合だけなので、JPEGを変換するだけの人がこのダウンロードの負担を払うことはありません。SafariはHEICをネイティブでデコードするため、まったく必要としません。なぜこの処理が必要なのかの詳細は、専用のHEIC→JPG変換ページにあります。
変換できる画像の枚数に制限はありますか?
1回の選択で100ファイル、1ファイルあたり100 MB、合計250 MBまでです。すべてがあなたのマシン上で動くため、この制限はペイウォールではなく、ブラウザのタブが保持できる量で決まっています。ファイルは並列ではなく、意図的に1件ずつ処理されます。複数の大きなビットマップが同時に生きていることが、モバイルのタブを実際に殺すものだからです。
変換するとEXIFとGPSデータは削除されますか?
はい。ピクセルにデコードし、そこから再エンコードする以上、避けられない結果です。カメラの型番、タイムスタンプ、GPS座標は残りません。画像を公開する前には、たいていそれこそが望ましいはずです。例外はorientation(向き)です。破棄される代わりにピクセルへ適用されるため、横向きで撮った写真は、倒れたままではなくまっすぐに出力されます。