ホームページで画像を使うとき、たいていは「JPG・PNG・GIF」のどれかを選ぶことになります。
ただ、なんとなくで選んでいると、画質が落ちたり、ファイルが必要以上に重くなってページ表示が遅くなったりします。
このページでは、「どんな画像にどの形式を選べばいいか」を最初に一覧表で結論として示し、そのうえで各形式の特徴と理由を、ホームページ制作のプロの視点で解説します。
さらに、近年の主流になりつつあるWebP（ウェッピー）・AVIFといった新しい画像形式まで、2016年公開時から内容を更新して整理しました。
スマートフォンでホームページを見る人が当たり前になった今、画像の読み込みサイズ（容量）は表示速度に直結する重要な要素です。
画像が重いとページの読み込みが遅くなり、その分だけ離脱（ユーザーがページを離れること）も増えてしまいます。
見た目を損なわず、できるだけ軽く書き出せる形式を選べるようになっておきましょう。
まず結論：用途別「どの画像形式を選べばいいか」早見表
細かい理由は後ほど説明します。
迷ったときは、まずこの表のとおりに選べば大きく外しません。
| 使いたい画像 | おすすめ形式 | 理由・ポイント |
|---|---|---|
| 写真（風景・人物・商品など） | JPG（または WebP） | 色数が多く複雑な画像を、軽く書き出せる |
| 切り抜き画像・透過が必要な画像 | PNG（または WebP） | 背景を透明にできる。JPGは透過できない |
| イラスト・図版（色数が少なめ） | PNG（または WebP） | 形がシンプルな画像はPNGの方が軽くなることがある |
| ボタン・アイコンなど小さなパーツ | PNG(8bit)・GIF（アイコンは SVG も） | 色数が少なくファイルサイズを小さく抑えられる |
| サイト全体を軽くしたい（最新環境） | WebP / AVIF | 同じ見た目でもJPG/PNGより軽くなりやすい |
言葉でまとめると、こうなります。
これを意識して判断するだけでも、まず大丈夫です。
ただし明確に線引きできるわけではないので、最終的には同じ画像を複数の形式で書き出し、いちばんファイルサイズが小さくなる形式を選ぶのが確実です。
各形式の特徴をもう少し詳しく
早見表だけでも十分ですが、「なぜそうなるのか」を知っておくと、迷ったときに自分で判断できるようになります。
形式ごとの特徴を、容量・色数・透過の観点で整理します。
| 形式 | 色数 | 透過 | 圧縮の特徴 | 得意な画像 |
|---|---|---|---|---|
| JPG | 約1,677万色（フルカラー） | 不可 | 高圧縮だが不可逆（戻せない） | 写真 |
| PNG-8 | 256色 | 可能 | 可逆（劣化しない） | 色数の少ないイラスト・パーツ |
| PNG-24/32 | フルカラー | 可能 | 可逆。JPGほど小さくはならない | 透過が必要なイラスト・切り抜き |
| GIF | 256色まで | 可能（半透明は不可） | 高圧縮。簡単なアニメも可 | 小さなボタン・アイコン |
| WebP | フルカラー | 可能 | 可逆・不可逆の両対応で軽い | 写真・イラスト全般（最新環境） |
JPG
使用できる画像の色は約1,677万色のフルカラーです。圧縮率も大きく、写真の画像形式として使われます。 デジカメやスマートフォンで写真を撮ると、書き出しはほとんどこの形式になっています。 写真 = JPG で、とりあえず考えておきましょう。
写真画像を書き出すと、JPGの方がPNGの約2分の1のサイズで済むのがわかります。ただし、JPGは圧縮率を高くした分のデメリットもあります。
画像をきれいなままファイルサイズを高圧縮するため、その過程で元あった情報が欠落し、元の状態には戻せません。
これを「不可逆圧縮」といいます。
1回圧縮する程度なら気になりませんが、同じJPGを何度も書き出し直していると画質がどんどん劣化してしまう点に注意しましょう。 JPEGによる圧縮では、画像を8×8ドット単位の正方形で区切り、このひとつのブロックを近い色に置き換えることで圧縮しています。
PNG
PNGには色数によっていくつかの種類があり、代表的なのがPNG-8（256色）とPNG-24/32（フルカラー）です。どちらも透過表現が可能なのが大きな特徴です。
色数に応じて、色の少ない画像はPNG-8、色の多い画像や透過が必要な写真調の画像はPNG-24/32、というように使い分けます。 PNGは可逆圧縮なので画像を元に戻せますが、その分JPGほど圧縮率は高くありません。
ただし、イラストのような画像ではJPGよりサイズが小さくなることもあります。 PNGの圧縮方法は「ランレングス圧縮」といって、隣り合う色とその連続数を記録します。 例えば「A A A A A B B B B B B B B B A A A」は「A5 B9 A3」と表せます。17文字が6文字に減りました。
逆に写真のように色が複雑に変化する画像は、PNGだとかえって大きくなりがちです。
そのため、写真はJPG、色がシンプルなイラストや図版はPNG、という使い分けになります。
色数が256色以下であればPNG-8にすると、かなりサイズを小さくできます。ボタンやアイコンなどはPNG-8で書き出すとよいでしょう。
GIF
256色までをサポートする高圧縮なファイル形式です。256色以下のボタンやアイコンなどは、GIF形式でファイルサイズを抑えられます。
簡単なアニメーション（動く画像）を作れるのもGIFの特徴です。
【2026年追記】これからは WebP・AVIF も選択肢に
この記事を最初に書いた頃にはまだ一般的ではありませんでしたが、今はWebP（ウェッピー）という新しい画像形式が主流になりつつあります。
表示速度がSEO評価にも関わる今、知っておいて損はありません。
WebP（ウェッピー）
Googleが開発した比較的新しい画像形式です。可逆・不可逆の両方の圧縮に対応し、透過もアニメーションも扱えます。
最大の魅力は軽さで、同じ見た目でもJPGやPNGよりファイルサイズが小さくなりやすい（一般に2〜3割程度軽くなるとされます）点です。
主要なブラウザはすでに対応済みなので、サイトの表示速度を上げたい場合の有力な選択肢になります。
WordPressでも近年のバージョンならアップロードに対応しています（プラグインでJPG/PNGを自動的にWebPへ変換する方法もあります）。
AVIF
WebPよりさらに高い圧縮率をねらえる、より新しい形式です。対応ブラウザは広がってきていますが、環境によっては表示できない場合もあるため、現時点ではWebPを基本にしつつ、AVIFは状況を見て取り入れるのが無難です。
なお、アイコンやロゴのように図形でできた画像は、拡大しても劣化しないSVG形式もおすすめです。
さまざまなデバイスで見られる今、SVGはとても便利な形式です。
SVGについては、こちらの記事を参照してください。
画像最適化まで手が回らない・表示速度が気になるときは
画像形式の選び方を押さえるだけでも、ホームページはぐっと軽く・速くなります。
とはいえ、ページごとに最適な形式へ書き出し直したり、WebP化や表示速度の改善まで手を回すのは、運用しながらだと意外と大変です。
「画像が多くてサイトが重い」「リニューアルのついでに表示速度も見直したい」「そもそも更新の手が足りない」——そんなときは、ホームページ制作・運用のプロにご相談ください。
株式会社はなさか（YCOM）では、表示速度や画像最適化を含めたホームページの制作・リニューアル・運用をお手伝いしています。
画像の選び方のような細かな積み重ねが、最終的にサイトの使いやすさと集客力につながります。
気になる点があれば、お気軽にお問い合わせください。
0120-899-952