必要なツールを、すぐ使えるかたちで

JPG・PNG・WebPをまとめて変える画像 形式 変換

左側に写真を何枚か読み込み、形式と品質を選ぶと右側のキューに変換結果がすぐに並びます。ファイルごとに変換前の容量と後の容量、削減率を並べて示すので、保存する前に判断できます。ファイルがブラウザの外に出ることはありません。

写真を読み込む

ここに画像をドラッグしてください

JPG · PNG · WEBP · AVIF · BMP · 複数枚同時 · 1枚あたり最大20MB

このブラウザが実際に作れる形式だけを一覧に入れています。

変換結果

ファイル数
元の合計
変換後の合計
削減率

サンプル画像を表示しています。ご自身の写真を読み込むとそのまま切り替わります。

変換はブラウザ内のCanvasだけで行います。ファイルはどこにも送信されず、描き直す過程で撮影情報と位置情報が消えます。品質値はJPGやWebPのような非可逆形式にのみ適用され、PNGには影響しません。

最終更新日:
ROBERIN基準必要なツールを、
すぐ使える形で。
  • すぐ見える画面入力場所と結果の場所をはっきり分けます。
  • 結果を先に大事な数字を先に出し、過程は必要な分だけ見せます。
  • 求めるものを減らす登録や余計な入力なしで使えるようにします。
Roberin

画像 形式 変換ツールの使い方

同じ写真でもどの形式で保存するかで容量が何倍も変わります。ウェブに載せる写真をPNGのままにすると必要以上に重く、ロゴをJPGに変えると透過背景が失われます。形式の選択は好みではなく用途の問題です。

この画像 形式 変換ツールは複数枚をまとめて受け取りJPG・PNG・WebPに変え、ファイルごとに変換前後の容量と削減率を並べて示します。ブラウザが実際に作れる形式だけを一覧に入れるので、名前だけが変わったファイルを受け取ることはありません。処理はすべてブラウザ内で行われます。

形式ごとに得意なことが違う

三つの形式は優劣ではなく役割が違います。何を含む画像なのかを先に見れば答えは決まります。

  • JPG — 色が連続的に変わる写真に強く、透過は扱えません
  • PNG — ロゴ・アイコン・スクリーンショットのような境界のはっきりした画像と透過背景に使います
  • WebP — 同じ画質でJPGより小さく透過も扱えます。主要ブラウザはすべて読めます
  • 写真をPNGのままにすると容量が何倍にもなりがちです

このツールがファイルを扱う仕組み

ファイルを選ぶとブラウザが各画像をCanvasに描き、選んだ形式で書き戻します。アップロードの工程がないため即座に反応し、元のファイルには手を加えません。

  • 形式・品質・サイズを変えるとボタンなしでキュー全体が変換し直されます
  • ブラウザがどのエンコーダを持っているかを実測して形式一覧を作ります
  • 描き直す過程で撮影情報や位置情報などのメタデータは消えます

画面の順番どおりに進める

左の列が入力と設定、右の列が変換キューです。上から下へ一度たどれば保存まで終わります。

  • 左のパネルに写真を何枚かドラッグするかファイルを選ぶを押します
  • 出力形式を選びます。写真はJPGかWebP、透過が必要ならPNGかWebPです
  • 非可逆形式なら品質を調節します。写真は80前後で十分です
  • 小さくもしたければサイズで比率か正確なピクセルを指定します
  • ファイルごとに保存するかZIPで一括保存します

品質値はどこに適用されるか

品質は非可逆圧縮の強さです。可逆形式にはその概念自体がありません。

  • JPG — 値がそのまま適用され、80を下回ると境界にむらが見え始めます
  • WebP — 値が適用され、同じ設定でJPGより小さくなります
  • PNG — 可逆なので値に関係なく同じ結果になります
  • 一度非可逆圧縮したファイルを再度圧縮すると損傷が積み上がります

一部の形式しか出ない理由

Canvas はブラウザがエンコーダを持つ形式しか書き出せません。対応していない形式を要求すると黙ってPNGを返すため、確認しないと名前だけ変わったファイルができます。

  • このツールは起動時に各形式で小さな画像を一度書き出し、戻ってきた型を確かめます
  • 要求した型と違うものが戻れば、その形式を一覧から外します
  • だから受け取ったファイルの拡張子と実際の中身は常に一致します
  • AVIFやBMPが見えないなら、このブラウザがそのエンコーダを持っていないということです

サイズも一緒に下げたいとき

形式を変えるだけでは目標容量に届かないことが多く、品質を下げるより幅を減らすほうが効きます。

  • 比率で調整 — 元に対するパーセントで一括で縮めます
  • 正確なサイズを指定 — 幅か高さに目標ピクセルを入れます
  • 縦横比を保つを有効にしておけば片方だけ入れてももう一方が追従します
  • 容量はおおむね幅の二乗に比例して減ります

用途別に何を選ぶか

使われる場所が分かれば形式と品質はほぼ自動的に決まります。

  • ブログ本文の写真 — WebP 品質80、幅1200px前後
  • 商品詳細画像 — JPG 品質85以上、元のサイズのまま
  • ロゴ・アイコン — PNG または WebP、サイズ変更なし
  • メール添付 — JPG 品質70〜75で先に容量を合わせます

実際の例で手順をたどる

スマホで撮った4032×3024のJPGを10枚、ブログに載せる場合を考えます。

  • 10枚を一度に読み込むとキューの上に元の合計が出ます
  • 出力形式をWebP、品質を80にします
  • サイズで比率で調整を選び30%前後に縮めます
  • 削減率を確かめてからZIPで一括で受け取ります

ありがちな失敗

形式変換は戻せない損失を残しやすい作業です。次の四つが多いです。

  • 透過PNGをJPGに変える — 透過部分が白で埋まります
  • 容量を減らそうとJPGをPNGに変える — かえって何倍にもなります
  • すでに圧縮済みのJPGを低い品質で保存し直す — 損傷が積み上がります
  • 拡張子だけを手で変える — 中身はそのままなので形式は変わりません

保存前に確認すること

保存直前に下の項目を順に見ておくとやり直しが減ります。

  • 透過が必要な画像をJPGで書き出していないか
  • 削減率が目標に届いたか
  • 一番大事な画像を拡大して画質を確かめたか
  • 元ファイルを別に保管しているか
  • ファイル名が使い先で問題ないか

よくある質問

読み込んだ写真はサーバーに送られますか。

送られません。ファイルを選ぶ時点から保存まで、すべての処理がお使いの端末のブラウザ内で完結します。人物写真や未公開の画像でも安心して扱えます。

一度に何枚まで読み込めますか。

枚数に固定の上限は設けていません。ただ1枚あたり20MBまでで、大きな写真を数十枚読み込むとブラウザのメモリを多く使うので、分けて処理するほうが安定します。

AVIFやBMPが一覧にないのはなぜですか。

ブラウザがその形式のエンコーダを持っていないからです。対応していない形式を要求するとブラウザが黙ってPNGを返し、そのまま保存すると中身はPNGなのに名前だけ違うファイルになります。このツールは起動時に実際に一度書き出して成功した形式だけを一覧に入れます。

PNGに変えたら容量が大きくなりました。

正常です。PNGは可逆形式なので、色の複雑な写真ではJPGよりはるかに大きくなります。写真の容量を減らすならJPGかWebPを選んでください。PNGはロゴやスクリーンショットのように色が単純で境界のはっきりした画像に適しています。

透過背景は保たれますか。

PNGとWebPで書き出せば保たれます。JPGは透過を扱えないため透過部分が白で埋まります。ロゴのように透過が必要な画像はJPGに変えないでください。

品質を下げてもPNGの容量が変わりません。

PNGは可逆形式なので品質値が適用されません。画面の品質値はJPGとWebPにだけ影響します。PNGの容量を減らすには形式を変えるか縦横のサイズを下げる必要があります。

変換すると画質は落ちますか。

非可逆形式で書き出すときだけ落ちます。PNGは可逆なので画質はそのままです。ただしすでにJPGで圧縮された写真を再度JPGで保存すると損傷が少しずつ積もるので、できれば元画像から一度で目標形式に変えてください。

削減率はどう計算しますか。

変換後の容量を元の容量で割った値を百分率から引いた値です。1MBが300KBになれば約70%削減です。マイナスになれば変換後のほうが大きいということで、写真をPNGに変えたときによく起きます。

ファイル名はどう決まりますか。

元の名前を残し、拡張子だけを新しい形式に変えます。ZIPで保存しても同じ規則で、名前が重なる場合は後ろに番号が付きます。

参考にした資料

Canvas エンコードと形式対応の公式ドキュメントです。

一緒に使うと便利なツール

Roberin
センスのある開発者
創造的で実用的なツールでより良い世界を作るセンスのある開発者、Roberinです。技術は皆のためのもの、一緒により便利な世界を作っていきましょう!😊
お問い合わせフォーム
確認に必要な内容だけお送りください。
返信が必要な場合は、メールアドレスも入力してください。不具合の報告では、ページURL、入力した値、期待した結果と実際の結果を書いていただくと確認が早くなります。