最適な画像形式を選ぶことはサイトのパフォーマンスとビジュアル品質を左右する重要な要素です。

とりわけ”サイトの表示速度”の面では最も色濃く影響します。

この記事ではJPG、PNG、SVG、GIF、WebP、AVIFといった一般的な画像形式の特徴を比較し、それぞれの推奨使用方法をお伝えします。

広告用のLPを「画像のみで作る」は本当にナシなのか？
広告用のLPを「画像のみで作る」は本当にナシなのか？
広告用のランディングページで使われる「画像のみで制作したLP」。表示速度が気になる、広告評価が下がる…それらは杞憂かもしれません。画像LPについて解説します。
この記事を読む

『画像拡張子別』特徴を紹介

他にもBMPやHEIC等の画像形式はありますが、ここでは一般的にWebサイトで使われる画像形式を中心に紹介します。

具体的には

  • JPG(JPEG)
  • PNG
  • SVG
  • GIF
  • WebP
  • AVIF

について解説します。

比較表はこちら

特徴/形式JPG(JPEG)PNGSVGGIFWebPAVIF
推奨使用方法写真やカラフルな画像の表示透明な背景の画像やテキスト、アイコンパスで構成されたロゴやテキストシンプルなアニメーション高品質な静止画像やアニメーション高品質な静止画像やアニメーション
ファイルサイズ中大小〜中小〜中中〜小小
アニメーション××△◎◎◎
透過対応×◎◎◎◎◎
最大サイズ65,535×65,535ピクセル––64,000×64,000ピクセル16,383×16,383ピクセル65536×65536ピクセル
主な変換方法写真編集ソフトウェア写真編集ソフトウェア写真編集ソフトウェア写真編集ソフトウェアWebp画像変換ソフト・サイト等変換ソフト/Node.jsライブラリ等
※画像により大きく異なります。※ファイルサイズは推奨使用方法で使用した場合の一般的な例で、JPGを基準に比較しています。※各フォーマットの仕様は各参考文献参照（JPG,GIF,AVIF,WebP,SVG,PNG）

JPG（JPEG）画像

JPG（JPEG）は非常にポピュラーな画像フォーマットで、特に写真を保存するのによく使われます。

特徴としては

  • 扱える色の種類が多く、写真やグラデーションの再現に向いている
  • 非可逆圧縮なためファイルサイズが小さくなる傾向がある
  • 画像形式の基本となっており、ほぼ全ての端末で表示可能
  • 透過画像は設定できず、背景色が発生する

という特徴があります。

短くにまとめるなら「写真素材の基本形式」として扱われていると思って構いません。

JPGとJPEGの違いは？

結論から言えば、「jpg」と「jpeg」に違いはありません。

これは歴史的な経緯らしく、現状どちらも同じJPG画像として扱われます。ただの文字数の違い…くらいに思っていただければ問題ありません。

軽く調べたところによると近年はjpgが一般的らしいので、迷ったら「.jpg」を使えば問題ないです。

PNG

PNGは「透明性」をサポートする画像フォーマットで、使用する色や設定による差異が大きいファイル形式です。

  • 透過が使えるため、背景を透明にすることができる
  • ロゴマークやテキストの表示に適している
  • 可逆圧縮なので保存しても品質を落とすことなく元の状態に戻せる

使用する色によってPNG-8・PNG-24・PNG-32のようにさらに細分化されます。

画像の一部を透明にして背景の色や他の画像を見せることができるため、ロゴやアイコンを作る時にPNGは非常に便利です。

また、PNGは可逆圧縮ができる形式なため、加工に向いています。

SVG画像

SVGは「ベクター画像」を作るための形式で、数式によって構成されています。

  • 点と線で構成されており、ロゴやテキストの表示に強い
  • HTMLとして書くことが可能
  • 拡大や縮小しても基本的に劣化しない
  • 一部のブラウザでの取り扱いが難しい（特にApple系）
  • Adobe After Effects等を使えばデザイナーでもアニメーションが作れる

最大の特徴は「ベクター画像（点と線で描かれる画像）」なため、どれだけ拡大しても画像がぼやけたりしない点です。

また、After Effects等の動画作成ソフトを使って制作することができ、デザイナーでもアニメーションを作ることが可能です。

GIF画像

GIFは簡単なアニメーションを作るのに使われる古い画像フォーマットです。

  • 短いアニメーションを再生可能
  • 表示できる色に制限がある
  • データ容量は比較的小さめ
  • 画質が荒く見える

先ほどのJPGやPNGと異なりアニメーションが表現できる反面、使用できる色に大幅な制限があります。

画質はそこまで気にしないがロゴやアイコンにちょっとした動きがほしい…といったケースで使われます。

WebP画像

WebPはGoogleが開発した新しい画像フォーマットで、JPEGやPNGよりも高い圧縮率を持っています。

  • JPGやPNGよりも高い圧縮率でファイルサイズが小さい
  • アニメーション・透過・非可逆圧縮も対応可能
  • 手軽に圧縮できるツールが増えてきている

2022年以前は「対応ブラウザに難がある」という理由で避けられていたこともあるWebP画像ですが、CanIUseを見ると2023年11月現在は全てのモダンブラウザでWebP画像対応しており、グローバルでは96.88%対応率となっています。

透明性もサポートしているため、Webブラウザで表示するという点においては「JPG/PNG」の上位互換だと考えてもらっても問題ありません。

弊社が開発した『WebP変換ツール』を使えば圧縮前後の画質を確認しながらWebP画像を一括変換可能です。

AVIF

AVIFはWebPよりもさらに新しい画像フォーマットで、WebPよりも高い圧縮率でより軽量な画像を提供可能です。

AVIF形式はAmazon・Netflix・Google・Microsoft・Apple等の名だたる大企業が共同で開発している形式なため、今後の中心となる可能性が高いです。

特徴としては

  • WebPよりも高圧縮
  • WebPよりも高画質・高品質な表示可能
  • 圧縮するための環境が必要で、手軽に圧縮できない

驚くべきは「WebP画像よりもファイルサイズが小さくなる」点。画像によって大きく差がありますが、WebP形式より約10～30％の軽量化が可能です。※画像によって差があります

また、AVIFはHDR（High Dynamic Range）や広い色域をサポートしているため、色鮮やかな画像を表示するのに適しています。

弊社では主にこのAVIF形式と先ほどのWebP形式を組み合わせて使用しています。

AVIF形式を扱う際の注意点

AVIFはかなり新しい画像形式であり、Edge等一部のブラウザでは対応していません。

グローバルの対応率も86.95%ほどになりますので、<picture>タグ等によるケアが必要です。

【画像おすすめ】結局どれが良いの？

結論から言えば、基本的にはAVIFまたはWebPで表示されるようにするのが最善です。

弊社がコーディングする場合には基本的にAVIF>WebP>元の拡張子の構成で制作しています。

ただし、先ほどお伝えした通りAVIF形式やWebP形式は未対応ブラウザへのケアが必要になりまして…

  • フロント側で<picture>タグを使用する
  • サーバーサイド（.htaccess等）で出し分けをする

等々の対策が必要になります。これらの知識が必要な点に注意しましょう。

特徴/形式JPG(JPEG)PNGSVGGIFWebPAVIF
推奨使用方法写真やカラフルな画像の表示透明な背景の画像やテキスト、アイコンパスで構成されたロゴやテキストシンプルなアニメーション高品質な静止画像やアニメーション高品質な静止画像やアニメーション
ファイルサイズ中大小〜中小〜中中〜小小
アニメーション××△◎◎◎
透過対応×◎◎◎◎◎
最大サイズ65,535×65,535ピクセル––64,000×64,000ピクセル16,383×16,383ピクセル65536×65536ピクセル
主な変換方法写真編集ソフトウェア写真編集ソフトウェア写真編集ソフトウェア写真編集ソフトウェアWebp画像変換ソフト・サイト等変換ソフト/Node.jsライブラリ等
※画像により大きく異なります。※ファイルサイズは推奨使用方法で使用した場合の一般的な例で、JPGを基準に比較しています。※各フォーマットの仕様は各参考文献参照（JPG,GIF,AVIF,WebP,SVG,PNG）

画像形式は常に状況が変わるので注意

今回は画像形式別の特徴とおすすめの画像形式をご紹介しました。

ウェブブラウザの対応する画像形式は、技術の進化により常に変化します。ウェブ開発の専門家に相談し、最新の情報に基づいた適切なアドバイスを受けることが重要です。

1日16円〜で頼れる技術パートナー

営業支援・技術支援ツールはこちら

PageCraftAppについて知る