「担当者から届いた画像を、そのままサイトに貼ったら妙に重い」「ロゴをJPEGでもらったら背景が真っ白になってしまった」―― Webサイトやチラシ、SNS投稿を運用していると、一度はこうした「画像の拡張子」まわりのトラブルに出くわします。
JPEG、PNG、GIF、WebP、AVIF、SVGといった画像形式は、見た目にはほとんど区別がつかなくても、 内部の仕組みや得意・不得意がまったく異なります。この違いを知らないまま画像をやり取りすると、 「なぜか表示が崩れる」「サイトが重くて離脱される」「ロゴの背景が透けない」といった、地味だけれど確実に機会損失につながる問題が起こります。
この記事では、専門知識がなくても判断できるように、画像形式ごとの特徴と用途別の選び方を整理し、 実際に拡張子を切り替えながら違いを体感できるデモもあわせて紹介します。
画像形式と一口に言っても、仕組みのうえでは大きく3つのグループに分けられます。まずはこの分類を押さえておくと、 個別の拡張子の特徴も理解しやすくなります。
それぞれの形式の特徴と主な用途を一覧にまとめました。まずは全体像をつかんでください。
| 種類 | 形式 | 特徴 | 主な用途 |
|---|---|---|---|
| ラスター画像 | JPEG / JPG | 写真向き・圧縮率が高い・透過は不可 | 写真、商品画像 |
| PNG | 透過が可能・劣化しにくい | ロゴ、UI、図 | |
| GIF | 簡易アニメーションに対応 | 短い動き、バナー | |
| WebP | JPEG／PNG／GIFの代替・軽量 | Web画像全般、アニメも可 | |
| AVIF | WebPよりさらに高圧縮になりやすい | 写真、Webの高速化 | |
| ベクター画像 | SVG | 拡大しても劣化しない | ロゴ、アイコン、図形 |
| データ埋め込み | インラインSVG | <svg>...</svg>とHTMLに直接書く |
アイコン、動的な図、CSS/JS制御 |
| Base64 / Data URI | 画像ファイルを文字列化してHTML/CSS内に埋め込む | 小さい画像、メールHTMLなど |
比較表を見ても「結局どれを使えばいいのか」が一番知りたいところだと思います。実務でよくある場面ごとに、 優先して検討したい形式をまとめました。
| やりたいこと | 優先して検討する形式 | 理由 |
|---|---|---|
| 商品写真・スタッフ写真を載せたい | WebP（対応が心配ならJPEGも用意） | 写真の圧縮効率が高く、表示速度への影響を抑えられる |
| ロゴ・アイコンを載せたい | SVG（難しければPNG） | 拡大・縮小してもにじまず、スマホ・PCどちらでも綺麗に表示できる |
| 背景を透明にしたい | PNG／WebP／SVG | JPEGは透過そのものに対応していないため選択肢から外れる |
| ちょっとした動きをつけたバナーを載せたい | WebP（またはGIF） | WebPはGIFより軽量にアニメーションを扱える |
| メール本文に画像を入れたい | Base64 / Data URI | メールソフトによっては外部画像の読み込みがブロックされるため |
| サイトの表示速度を最優先したい | AVIF（対応ブラウザを確認のうえ） | 同じ画質ならWebPよりさらに軽くなりやすい |
問い合わせフォームやサイト全体の作り方の基本は 問い合わせフォーム設計の基本 で解説しています。画像形式の選び方も、フォームやページ全体の表示速度・ユーザー体験を左右する要素のひとつです。
説明だけではイメージがつかみにくいと思うので、実際に拡張子タブを切り替えながら、 同じサンプル画像がどう扱われるかを体験できるデモを用意しました。
下の拡張子タブは、それぞれ実際にその拡張子で書き出したファイルを表示しています。特徴とコード例も一緒に切り替わります。
※イラストは解説用のサンプルです。実際のファイルは差し替えて運用します。
インラインSVGとBase64のタブでは、実際にHTMLへ書き込まれるコードもあわせて表示しています。 見た目は同じでも、裏側の仕組みがまったく違うことを感じてもらえると思います。
「ロゴの背景を透明にしたい」「切り抜いた商品画像を好きな背景の上に置きたい」――こうした要望は非常によくありますが、 対応できるかどうかは形式選びの時点で決まってしまいます。JPEGはどれだけ設定を工夫しても背景を透明にはできません。 透過が必要な場面では、最初からPNG・WebP・SVGのいずれかで用意することが前提になります。
透過の仕組みや対応拡張子ごとの違いをさらに詳しく知りたい方は、 画像を透過させる方法と対応拡張子 で詳しく解説しています。
ロゴやアイコンのように「拡大しても輪郭がくっきりしていてほしい」画像には、ベクター形式のSVGが向いています。 スマートフォンの小さい画面から、印刷物のような大きなサイズまで、同じ1つのファイルで対応できるのも実務上のメリットです。
さらに、SVGはファイルとして読み込むだけでなく、HTMLに直接コードを書き込む「インラインSVG」や、 文字列に変換してコード内に埋め込む「Base64（Data URI）」という埋め込み方の選択肢もあります。 それぞれの使い分けは SVG・インラインSVG・Base64の使い分けガイド で詳しく解説しています。
すべてを完璧に使い分けるのは制作会社でも簡単ではありません。判断に迷ったときは、次のシンプルな基準で考えれば大きくは外しません。
画像形式・拡張子は、見た目では判断しにくいぶん後回しにされがちですが、サイトの表示速度・見え方・運用のしやすさに直結する要素です。 ポイントは次の3つに整理できます。
次にサイトへ画像を用意するときは、「とりあえずJPEGで」ではなく、この記事の比較表を見ながら形式を選んでみてください。