Web制作でよく使う画像形式、どれを選べばいい？

こんにちは。Maromaor　Chieです。

Webサイトを制作していると、画像を書き出すタイミングで「これってJPGでいいの？」「透過だからPNG？」「WebPって使って大丈夫？」と迷うことがあります。 画像形式はなんとなく選んでしまいがちですが、形式によって画質・容量・透過対応・ブラウザ対応・編集のしやすさが変わります。 画像の容量はページの表示速度にも関わるため、Web制作では意外と大事なポイントです。
今回は、Web制作でよく使う JPG／PNG／SVG／WebP／AVIF を中心に、それぞれの特徴と使い分けをまとめてみました。

まずはざっくり早見表

Web上で一般的に使われる画像形式として、JPEG、PNG、SVG、WebP、AVIFなどが紹介されていることが多く、WebPはJPEGやPNGより高い圧縮効率を持ち、AVIFはさらに高い圧縮性能が期待できる形式として説明されていることが多いです。

JPG / JPEG：写真に向いている定番形式

JPG、またはJPEGは、Web制作で昔からよく使われている画像形式です。
特に向いているのは、写真のように色数が多く、グラデーションが複雑な画像です。

たとえば、以下のような画像に向いています。

• 人物写真
• 風景写真
• 商品写真
• メインビジュアル用の写真

JPGは容量を軽くしやすい一方で、保存時に画像の情報を一部削って圧縮する「非可逆圧縮」の形式です。そのため、圧縮しすぎると画像がぼやけたり、ノイズが出たりすることがあります。とくに人物画像などは色数を落としすぎるとゾンビ化するので気をつけましょう！

また、JPGは透過に対応していません。
背景を透明にしたいロゴやアイコンには向かないので注意しましょう。

JPGがおすすめの場面

写真を軽く書き出したいとき。
ただし、最近のWeb制作ではJPGをそのまま使うだけでなく、WebPやAVIFに変換してさらに軽量化することも増えています。

PNG：透過したい画像や、くっきり見せたい画像に

PNGは、透過画像を使いたいときによく選ばれる形式です。
ロゴ、図版、スクリーンショット、UIパーツなど、輪郭をくっきり見せたい画像に向いています。

たとえば、以下のような画像に向いています。

• 背景を透過したロゴ
• アイコン画像
• 図解画像
• 管理画面などのスクリーンショット
• 文字が入った画像

PNGはJPGと違って、画質を保ったまま保存しやすい形式です。
その反面、写真のような大きな画像をPNGで保存すると、ファイルサイズがかなり大きくなることがあります。

PNGは元画像を正確に再現したい場合や透明度が必要な場合にJPEGより適しているとされています。

PNGがおすすめの場面

透過が必要な画像や、文字・線・図形をくっきり見せたい画像におすすめです。
ただし、写真をPNGで書き出すと重くなりやすいので、写真には基本的にJPG、WebP、AVIFを検討しましょう。

SVG：ロゴやアイコンに強いベクター形式

SVGは、JPGやPNGとは少し性質が違う画像形式です。
JPGやPNGはピクセルで構成される「ラスター画像」ですが、SVGは線や図形の情報で構成される「ベクター画像」です。

そのため、SVGは拡大・縮小しても画像が劣化しにくいという特徴があります。

たとえば、以下のような画像に向いています。

• ロゴ
• アイコン
• シンプルなイラスト
• 図形ベースの装飾
• UIパーツ

スマートフォン、タブレット、PCなど、さまざまな画面サイズで表示されるWebサイトでは、拡大してもきれいに見えるSVGはとても便利で、SVGは異なるサイズで正確に描画したいUI要素、アイコン、図などに適しています。

ただし、SVGは写真には向いていません。
人物写真や風景写真をSVGにするのではなく、ロゴやアイコンなどのシンプルな画像に使うのが基本です。

SVGがおすすめの場面

ロゴやアイコンなど、拡大してもきれいに表示したい画像におすすめです。
特にWebサイトのヘッダーロゴやSNSアイコン、矢印アイコンなどはSVGと相性が良いです。

WebP：いまのWeb制作でかなり使いやすい形式

WebPは、Googleが開発した比較的新しい画像形式です。
JPGやPNGよりも軽くできることが多く、写真にも透過画像にも使える便利な形式です。

WebPは以下のような特徴があります。

• 写真に使える
• 透過にも対応している
• アニメーションにも対応している
• JPGやPNGより容量を小さくできることが多い
• モダンブラウザで広く対応している

WebPは非可逆圧縮と可逆圧縮の両方に対応しており、JPEG、PNG、GIFの代替として使いやすい形式です。

ブラウザ対応についても、2026年時点ではChrome、Firefox、Safari on iOSなど主要なモダンブラウザでWebPがサポートされています。

WebPがおすすめの場面

Webサイトに掲載する写真、バナー、アイキャッチ画像、透過画像などに幅広く使えます。
「とりあえずWeb用に軽くしたい」という場合は、WebPを選択肢に入れておくと良いです。

ただし、画像を納品したあとに別のソフトで編集したり、古い環境で扱ったりする場合は、JPGやPNGのほうが扱いやすいこともあります。
サイト表示用はWebP、編集・保管用はJPGやPNG、というように分けておくと安心です。

AVIF：さらに軽量化したいときの次世代形式

AVIFは、WebPよりもさらに高い圧縮効率が期待できる画像形式です。
大きな写真やメインビジュアルなど、ページ表示速度に影響しやすい画像で使うと効果が出やすいことがあります。

AVIFは以下のような特徴があります。

• 高画質のまま容量を小さくしやすい
• 透過に対応している
• アニメーションにも対応している
• 写真の軽量化に向いている
• WebPより対応状況や運用面の確認が必要な場合がある

一方で、WebPのほうがブラウザ対応の面で扱いやすい場合があるため、必要に応じて<picture>要素で代替画像を用意するのが安全です。

AVIFはChrome、Firefox、Safari、Edgeなどで対応が進んでいますが、古いブラウザや一部環境では注意が必要です。

AVIFがおすすめの場面

メインビジュアルや商品写真など、画質を保ちながらできるだけ軽くしたい画像におすすめです。
ただし、制作フローやCMS、ブラウザ対応を確認したうえで使うと安心です。

迷ったときの選び方

画像形式で迷ったときは、まず「その画像が何に使われるか」で考えると選びやすくなります。

実務では「表示用」と「保管用」を分けるのがおすすめ

Web制作では、サイト上に表示する画像だけでなく、あとから修正するための元データも大切です。

たとえば、サイト表示用にはWebPを使い、元画像としてJPGやPNG、PSD、AI、Figmaデータなどを保管しておくと、あとから差し替えや再書き出しがしやすくなります。

特にWebPやAVIFはWeb表示には便利ですが、すべての制作ツールや運用環境で扱いやすいとは限りません。
「表示用に軽くする画像」と「編集・再利用するための画像」は、分けて管理しておくと安心です。

まとめ

画像形式は、どれかひとつが万能というわけではありません。
写真、ロゴ、透過画像、図版など、画像の種類によって向いている形式が変わります。

ざっくりまとめると、以下のようになります。

• 写真なら JPG / WebP / AVIF
• 透過画像なら PNG / WebP
• ロゴやアイコンなら SVG
• 軽量化したいなら WebP
• さらに軽くしたい大きな画像なら AVIF
• 迷ったら、まずは WebPを候補に入れる

画像形式を正しく選ぶことで、サイトの表示速度や見た目の品質、運用のしやすさが変わります。
「なんとなくPNG」「とりあえずJPG」ではなく、画像の目的に合わせて最適な形式を選んでいきたいですね！

以上、Maromaro　Chieでした。