多くの人は「いつもJPGで保存している」「PNGのほうが高画質」といった習慣で形式を選んでいて、両者の本当の違いを知りません。その結果、必要の5倍も重いPNGの商品写真、輪郭が汚れたJPGのロゴ、文字が読めないJPGのスクリーンショットが生まれます。

この記事では、2026年に押さえておくべき形式をすべて扱います。それぞれが何であり、圧縮のしくみはどうなっていて、どこで強く、どこで破綻するのか。そして用途ごとの正しい選び方までを見ていきます。

ラスターとベクター：最も基本的な違い

個々の形式に入る前に、最も重要な区分を押さえておきましょう。 ラスターか、ベクターか.

ラスター画像 （JPG、PNG、WebP、AVIF、GIF、BMP）は、画像をピクセルの格子として保存します。点のひとつひとつに色が決まっており、解像度は固定です。元のサイズを超えて拡大すると、新しいピクセルのデータが存在しないため粗くなります。印刷した写真を拡大すると、インクの点が見えてくるのと同じことです。

ベクター画像 （SVG）は、画像を数式の命令として保存します。「座標X,Yに半径50の円を色Zで描く」といった具合です。描画はそのつど、必要な解像度に合わせて計算されます。どこまで拡大しても画質は落ちません。

ラスターとベクターのどちらを使うかは、好みの問題ではなく、扱う内容で決まります。写真には必ずラスター形式が必要です。ロゴ、アイコン、幾何学的なイラストはベクターの恩恵を受けます。

各形式の詳細

JPG / JPEG  Joint Photographic Experts Group

ラスター 非可逆（データを捨てる） 透過なし アニメーション不可 対応率：100%

JPGは1992年にJoint Photographic Experts Groupが策定した形式で、写真を効率よく圧縮するために設計されました。画像を8×8ピクセルのブロックに分け、それぞれに離散コサイン変換（DCT）をかけて周波数の組み合わせとして表現し、人の目が気づきにくい高周波成分を捨てます。つまり非可逆圧縮で、元のデータの一部は永久に失われます。

写真に強い理由： 写真は色がなめらかに移り変わります。これはJPGが最も得意とする情報です。品質80%で保存した風景写真は、無圧縮の同じ画像より10分の1ほどの大きさになり、画面上では違いがわかりません。

苦手なところ： 8×8ブロックの処理は、くっきりした輪郭、文字、一様な色面でノイズを目立たせます。白地に黒いロゴをJPGにすると、文字のまわりに灰色のにじみが出ます。いわゆるJPEGノイズです。さらにJPGはアルファチャンネル（透過）に対応していません。

使うべき場面： Web・印刷・メールに載せる写真。商品写真、バナー、ブログの挿絵。色数が多く、透過の必要がない画像全般。

避けるべき場面： ロゴ、アイコン、文字入りのスクリーンショット、透過が必要な画像、輪郭のはっきりしたイラスト、何度も編集して保存し直す画像。

PNG  Portable Network Graphics

ラスター 可逆（データを捨てない） 完全な透過（アルファチャンネル） 標準ではアニメーション不可 対応率：100%

PNGは1996年、特許上の制約があったGIFの代替として生まれました。可逆圧縮を使い、データは一切捨てません。DEFLATE（LZ77とハフマン符号の組み合わせ）というアルゴリズムが、何も失わずにピクセルデータを効率よく並べ替えます。そのため、何度保存し直しても、展開した画像は原本とピクセル単位で一致します。

アルファチャンネル： PNGはRGBに加えて、ピクセルごとに4つ目のチャンネルを持てます。0（完全な透明）から255（完全な不透明）まで不透明度を表すアルファチャンネルです。これにより、完全な透過も半透明も、どんな背景の上でもなめらかな輪郭も表現できます。

PNG-8・PNG-24・PNG-32の違い： PNG-8はGIFと同じく最大256色のパレットを使い、単純なアイコンや色数の少ない画像に向きます。PNG-24はフルカラー（1600万色）ですが透過はできません。PNG-32はフルカラーにアルファチャンネルを加えたもので、「透過PNG」と呼ばれるときはたいていこれを指します。

苦手なところ： 写真にPNGは不向きです。同じ写真でも、JPGの3〜10倍の大きさになることがあります。可逆圧縮では、写真の色のばらつきをうまく減らせないためです。

使うべき場面： 透過背景のロゴやアイコン、文字入りのスクリーンショット、図解、一様な色面の多い画像、輪郭のはっきりしたデジタルアート、劣化を重ねずに編集し直したい画像。

避けるべき場面： Web用の写真（JPGかWebPを使ってください）、ファイルを軽くしたい場面、JPGのほうが確実に表示されるメールマガジン。

WebP  Web Picture format

ラスター 非可逆・可逆の両方 完全な透過（アルファチャンネル） アニメーション対応 対応率：約97%（2026年）

WebPは動画コーデックVP8をもとにGoogleが開発し、Web上のJPGとPNGをまとめて置き換える後継として2010年に公開されました。写真向けの非可逆モード（VP8ベース）と、図版向けの可逆モード（独自アルゴリズム）の両方を備えます。非可逆モードでは、ブロック予測と適応的な変換というJPGのDCTより高度な手法を使い、同じ見た目の画質で25〜35%小さいファイルを作ります。

両方の長所を兼ねる： WebPは写真でJPGの代わりになる（非可逆モード）だけでなく、ロゴや図版でもPNGの代わりになります（アルファチャンネル付きの可逆モード）。しかもファイルは20〜30%小さくなるのが普通です。JPGとPNGの用途をひとつにまとめ、どちらでも効率で上回る唯一の形式です。

2026年時点の対応状況： Chrome、Firefox、Safari（14以降）、Edge、Operaが対応しており、Web利用者の97%以上をカバーします。主な例外は、古いメールソフト（とくにOutlook）と、IE11が残る企業内の古いシステムです。

使うべき場面： Webに載せる画像のほぼすべて。写真、ロゴ、アイコン、バナーを問いません。現在のサイトにアップロードする際の標準と考えてよいでしょう。GoogleのPageSpeed Insightsも、WebPにできるJPGやPNGを見つけると名指しでWebPを勧めてきます。

避けるべき場面： メールマガジン（対応がまちまち）、印刷・製版、YouTubeのサムネイル（WebPは受け付けません）、古い環境で開かれる可能性のあるダウンロード用ファイル。

AVIF  AV1 Image File Format

ラスター 非可逆・可逆の両方 完全な透過（アルファチャンネル） アニメーション対応 対応率：約88%（2026年）

AVIFは動画コーデックAV1から派生した形式です。AV1はGoogle、Mozilla、Netflix、Amazonなどが参加するAlliance for Open Mediaが開発しました。Web用画像としては最も新しく、技術的にも最も進んだ形式で、同じ見た目の画質ならWebPより20〜50%小さくなる場合が多くあります。とくに画質を落とした領域では、WebPが先にノイズを見せ始めるため差が開きます。

効率が高い理由： AV1は、WebPのVP8よりはるかに高度な圧縮技術を使います。フレーム内予測、可変サイズの変換、ループフィルタなどです。効果がとくにはっきり出るのは、情報量の多い写真と、微妙なグラデーションです。

書き出しの問題： AVIFへの変換はWebPより格段に遅く、同じ画像の処理に10〜100倍の時間がかかることもあります。画像数の多いサイトや、その場で各サイズを生成するビルド処理では、この負荷は無視できません。

2026年時点の対応状況： Chrome 85以降、Firefox 93以降、Safari 16以降が対応します。IE11と、多くのメールソフトは非対応です。対応範囲はWebPより狭いため、 <picture>.

使うべき場面： 1 KBの削減が通信費に効いてくるアクセスの多いサイト、WebPとの差が目に見えるほど高画質な画像、ビルド処理がすでにAVIFに対応している新規案件。

避けるべき場面： 書き出し時間が制約になる場面。またImageToolsの変換ツールでも扱いません（ブラウザのCanvas APIによるAVIFの書き出しは最適化されておらず、原本より大きくなることがあります。品質を求めるならsharpなどサーバー側のツールをお使いください）。

SVG  Scalable Vector Graphics

ベクター 原理上、劣化なし 完全な透過 CSS／JSでアニメーション可 対応率：98%以上

SVGはここまでの形式とまったく性質が異なります。ピクセルではなく、XMLで書かれた数式の命令を保存するのです。「座標X,Yに幅200の長方形を#3ecf8eで描く」といった具合です。ブラウザやソフトが、必要な解像度に合わせてそのつどピクセルを計算します。5 KBのSVGが、16pxのファビコンでも20メートルの看板でも同じように美しく表示されます。

ロゴとアイコンに最適な理由： ロゴやアイコンは、長方形、円、ベジェ曲線、文字といった幾何学的な形でできています。SVGはその形をそのまま、情報を失わずに記述します。200pxで作ったPNGのロゴは2000pxにすると粗くなりますが、同じロゴをSVGにしておけばどの大きさでも崩れません。

CSSとJavaScriptで編集できる： HTMLに直接書いたSVGの要素は、他のDOM要素と同じように扱えます。CSSで色を変え、CSSトランジションやJSで動きをつけ、マウス操作に反応させることもできます。いわば画像版のHTMLです。

苦手なところ： 写真や、色数の多い複雑なグラデーションを含む画像。SVGにすると巨大で扱えないファイルになり、しかも画質はJPGに劣ります。SVGは写真のデータを表すために作られていないからです。

使うべき場面： ロゴ、アイコン、幾何学的なイラスト、データのグラフ、地図、さまざまな大きさで使う図版、Web画面上の動くアイコン。

避けるべき場面： 写真、色数や質感の多い画像、SNS（多くがSVGのアップロードに対応していません）、メールマガジン。

GIF  Graphics Interchange Format

ラスター 可逆（ただし色数に制限） 部分的な透過（1色のみ） アニメーション対応 対応率：100%

GIFは1987年にCompuServeが作った形式で、LZW（Lempel-Ziv-Welch）という可逆圧縮を使います。ただし決定的な制限があり、1フレームあたり256色しか扱えません。各ピクセルは最大256項目のパレットへの参照番号にすぎず、数百万色を持つ写真には不向きな一方、色数の少ない単純な画像には適しています。

GIFが今も生き残っている理由： 複数フレームのアニメーションを標準で扱え、しかも幅広い環境で開ける唯一のラスター形式だからです。技術的に優れた形式が次々と登場したあとも、この一点で何十年も生き延びてきました。アニメーションWebPやアニメーションAVIFのほうが効率はよいのですが、GIFの互換性と文化的な定着ぶりが、その地位を守っています。

透過は部分的： GIFは1フレームにつき1色だけを「透明」に指定できます。半透明もアンチエイリアスもありません。そのため曲線の輪郭はギザギザになり、色のついた背景の上ではとくに目立ちます。

使うべき場面： アニメーションWebPやMP4に対応していない環境での簡単なアニメーション、色数の少ない動くアイコン、GIFであることが前提になっているSNS向けのネタ画像。

避けるべき場面： 静止画の写真（JPGかWebPを）、動かないロゴ（PNGかSVGを）、Web向けの複雑なアニメーション（MP4かアニメーションWebPのほうがはるかに効率的です）。

BMP  Bitmap

ラスター 基本的に無圧縮 標準では透過なし アニメーション不可 対応環境：Windows／Office

BMPはMicrosoftが作ったWindowsのビットマップ形式です。多くの設定では圧縮を行わず、各ピクセルの色をそのまま書き込みます。結果としてファイルは非常に大きくなり、1920×1080の24ビットBMPは中身にかかわらず常にちょうど5.93 MBになります。

それでも残っている理由： Windows、Office、プリンタ、古い編集ソフトといったMicrosoftの環境で確実に開けるからです。また、工程ごとにノイズを増やさないことが求められる画像処理の中間形式としては、無圧縮であること自体が利点になります。

使うべき場面： 特定の（とくに古い）システムがBMPを要求する場合、圧縮によるノイズを避けたい処理工程の中間形式、一部の産業用印刷システム。

避けるべき場面： Web、メール、SNSなど、ファイルサイズが問題になるあらゆる場面。

全形式の比較表

Formato 圧縮 透過 アニメーション 向いている用途 写真での相対サイズ
JPG 非可逆 なし なし 写真 基準（1倍）
PNG-32 可逆 完全なアルファチャンネル なし ロゴ、アイコン、スクリーンショット JPGの3〜8倍
WebP（非可逆） 非可逆 完全なアルファチャンネル あり Web上のあらゆる用途 JPGより25〜35%小さい
WebP（可逆） 可逆 完全なアルファチャンネル あり ロゴ、アイコン PNGより20〜30%小さい
AVIF 非可逆・可逆の両方 完全なアルファチャンネル あり 高速表示が必要なWeb JPGより30〜50%小さい
SVG ベクター 完全対応 CSS／JSで可 ロゴ、アイコン、イラスト 内容次第（単純な形なら極めて小さい）
GIF 可逆（256色） 1色のみ（半透明不可） あり（複数フレーム） 簡単なアニメーション 内容次第
BMP なし 標準では不可 なし 古いWindows環境 JPGの5〜20倍

どの形式を使うか：決定ガイド

写真や色数の多い画像に

ロゴとビジュアルアイデンティティに

スクリーンショットに

アニメーションに

画面のアイコンに

🎯 8割の場面で通用する原則： 写真ならWebP（メールや印刷ならJPG）。ロゴとアイコンならSVG（使えない場所ではPNG）。文字入りのスクリーンショットならPNGかWebPの可逆モード。アニメーションならMP4かGIF。

同じ形式でも画質が変わるのはなぜか

「JPGは画質が悪い」「PNGなら画質は安心」という誤解をよく耳にします。実際には、画質はその形式に備わった性質ではなく、保存するときの設定の結果です。

品質95%で保存したJPGは非常にきれいで、原本とほとんど見分けがつきません。同じJPGでも30%で保存すればノイズだらけになります。違いは形式ではなく、選んだ圧縮設定にあります。

PNGにこの問題がないのは、可逆圧縮を使っているからです。アルゴリズムや圧縮レベルによってファイルサイズは変わりますが、見た目は常に原本と同一です。PNGが「画質を落とさない」のは、JPGより優れているからではなく、データを捨てない別種の圧縮を使っているからにすぎません。

⚠️ JPGの再保存には注意： JPGを保存し、開いてまた保存すると、圧縮の上にさらに圧縮が重なり、そのたびにデータが失われます。5〜10回も繰り返せば劣化ははっきり見えてきます。作業は常に最高画質の原本から行い、JPGへの書き出しは最後の工程だけにしてください。

形式を変換する

ImageToolsの 変換 を使えば、JPG・PNG・WebPの相互変換をブラウザ内で行えます。インストールも、外部サーバーへの送信も不要です。変換先の形式を選び、画像をアップロードして、結果をダウンロードするだけです。

とくに WebPへの変換については、オンラインツール、WordPress、コマンドライン、Node.jsまで手段を網羅した専用の記事があります。

今すぐ形式を変換

JPG・PNG・WebPの無料変換をブラウザ内で。会員登録も、外部サーバーへのアップロードもありません。

無料で画像を変換する

よくある質問

いちばん画質のよい形式はどれですか？
文脈によって変わります。写真の場合、画質はどれだけ圧縮したかで決まります。品質95%のJPGや90%のWebPは非常にきれいで、画面上では原本とほぼ見分けがつきません。PNGは可逆圧縮なので定義上つねに原本と同一ですが、写真に使うと画面上の見た目は変わらないままファイルだけが巨大になります。SVGは幾何学的な形を扱うかぎり、ピクセルに依存しないため「無限の」画質を持ちます。つまり「最も画質のよい形式」というものはなく、内容ごとに適した形式があるだけです。
同じ写真なのにPNGがJPGよりずっと大きいのはなぜですか？
PNGが可逆圧縮を使っており、写真の色のばらつきをうまく減らせないからです。写真は数百万のピクセルがわずかずつ違う色を持っており、可逆圧縮のアルゴリズムが最も苦手とするデータです。JPGやWebPは、人の目がほとんど気づかない高周波の情報を捨てることで、見た目をほぼ損なわずにファイルを90%以上小さくできます。PNGが力を発揮するのはロゴやアイコンのように広い面が同じ色の画像で、写真ではありません。
WebPはJPGとPNGを完全に置き換えますか？
Webでの推奨形式という意味では、WebPはすでに実質的にJPGとPNGを置き換えています。それでも両者は長く残ります。メール環境ではWebPの対応がいまだにまちまちであること、印刷や製版の現場がJPGとTIFFを前提にしていること、JPGのファイルが世界中に何十億と存在すること、そして利用者にとってなじみが深いことが理由です。実際には、これらの形式の共存は今後何十年も続くでしょう。
AVIFはWebPより優れていますか？今すぐ移行すべきでしょうか？
圧縮効率という技術面ではAVIFがWebPを上回ります。とくに低〜中程度の画質域では、WebPのほうが先にノイズを見せ始めます。ただし2026年時点で、多くのサイトがAVIFへ全面移行する理由はまだありません。対応環境がWebPより狭いこと、書き出しがはるかに遅くビルド処理の負担になること、そして一般的なサイト画像で得られる実際の削減幅が、理想条件のベンチマークほど劇的ではないことが理由です。まずWebPを導入し、アクセスの多い一部の用途でAVIFを検討する、というのが現実的です。
SVGはどんな画像にも使えますか？
使えません。SVGが力を発揮するのは、幾何学的な形で記述できる画像だけです。ロゴ、アイコン、グラフ、図解、ベクターイラストなどがこれにあたります。写真では現実的ではありません。1200万画素の写真の全ピクセルをXMLの命令として書けば、数ギガバイトの、描画すら不可能なファイルになってしまいます。SVGには無敵の領域（拡大しても崩れない幾何形）と、まったく向かない領域（写真や質感のある画像）がはっきり分かれています。
iPhoneの写真に出てくるHEICとは何ですか？
HEIC（High Efficiency Image Container）は、iOS 11以降のiPhoneで標準になっているカメラの保存形式です。HEVC（H.265）コーデックをもとにしており、同じ画質でJPGより約50%小さいファイルになります。AVIFと狙いは似ていますが、技術は別物です。難点は対応環境の狭さで、Windows 10や11では追加のコーデックがないと開けず、HEICのアップロードを受け付けないWebサービスも少なくありません。Webで使うなら、あらかじめWebPかJPGに変換してください。