Webサイト・ブログ運営に必須！画像の拡張子の違いと使い分け

Webサイトに画像を載せるとき、「JPEGとPNG、どっちで保存すればいいんだっけ」と迷ったことはありませんか。

最近は、WebPやAVIFといった新しい形式も加わって、選択肢がさらに増えました。

この記事では、画像の拡張子の違いを整理して、「この画像なら、この形式」という選び方を、用途別にまとめました。WordPressで使うときの注意点や、SEOとの正しい関係も入れています。

※この記事の内容は2026年10月時点のものです。ブラウザやWordPressの対応状況は変わることがあります。

迷ったら、この表の通りに

先に、用途別の早見表です。

画像の種類	おすすめの形式	補足
写真	WebP（またはAVIF）、JPEG	軽さ重視ならWebP・AVIF。互換性重視ならJPEG
ロゴ・アイコン・図形	SVG	難しければPNG
スクリーンショット・文字の多い図	PNG（またはWebPの可逆圧縮）	JPEGだと文字の周りがにじむことがある
背景を透明にしたい画像	PNG、WebP、AVIF、SVG	JPEGは透明に対応していない
アニメーション	動画（MP4・WebM）、またはアニメーションWebP	GIFは最終手段

詳しい理由を、これから順番に説明します。

拡張子とは？ファイル形式との関係

拡張子とは、ファイル名の最後につく.jpg.pngのような文字列です。パソコンやブラウザに、「このファイルは、こういう形式で作られています」と伝える役割があります。

形式とは、画像のデータを、どんなルールで記録するかということです。

拡張子を書き換えても、形式は変わらない

よくある間違いが、「ファイル名の末尾を.jpgから.pngに書き換えれば、PNGになる」という思い込みです。

拡張子を変えただけでは、中身は変わりません。 形式を変えるには、画像編集ソフトやツールで、「書き出し」「変換」をする必要があります。

Googleも、ファイルの拡張子は、実際のファイル形式と合わせるのがよいとしています。

画像の形式を決める、2つの基準

形式を比べるときは、次の2つを知っておくと整理しやすくなります。

① 圧縮の方式：可逆か、非可逆か

• 非可逆圧縮：
  データの一部を捨てて、ファイルサイズを小さくする。画質は少し落ちる（JPEGなど）
• 可逆圧縮：
  データを捨てずに、小さくする。画質は落ちないが、サイズは大きくなりやすい（PNGなど）

WebPやAVIFは、どちらの方式にも対応しています。

② 写真向きか、図形向きか

• 写真：色の変化が滑らかで、色数が多い
• ロゴ・図形・イラスト：色が少なく、輪郭がはっきりしている

写真を可逆圧縮のPNGで保存するとファイルが非常に大きくなり、図形をJPEGで保存すると、輪郭がにじむことがあります。

主な画像形式の特徴

形式	圧縮	透明	アニメ	向いている用途
JPEG	非可逆	×	×	写真
PNG	可逆	○	△	ロゴ、スクリーンショット、透明が必要な画像
GIF	可逆（256色まで）	○	○	簡単なアニメーション（ただし非推奨）
WebP	両方	○	○	写真から図形まで幅広く
AVIF	両方	○	○	写真（さらに軽くしたいとき）
SVG	ベクター形式	○	○	ロゴ、アイコン、図形

JPEG（.jpg / .jpeg）

写真の定番で、ほとんどの環境で表示できます。非可逆圧縮なので、保存を繰り返すと画質が落ちます。透明にはできません。

PNG（.png）

画質が落ちない可逆圧縮で、背景の透明にも対応しています。ロゴやスクリーンショット、文字の入った画像に向いています。

ただし、写真をPNGにすると、ファイルサイズがとても大きくなります。「画質のよい写真を使いたいからPNG」というのは、Webでは避けたほうがよい選び方です。

GIF（.gif）

色数が256色までに限られていて、写真には向きません。アニメーションに使われてきましたが、アニメーションのGIFは、ファイルが大きくなりやすいのが難点です。

動きのあるものは、MP4やWebMなどの動画を、自動再生・ループ・音なしで表示する方法のほうが、ずっと軽くなります。

WebP（.webp）

Googleが開発した形式です。非可逆・可逆の両方に対応し、透明やアニメーションも使えます。 JPEGより小さくなることが多く、主要なブラウザで表示できます。

以前は「対応していないブラウザがある」と注意されていましたが、現在は、ほとんどの環境で問題なく使えます。

AVIF（.avif）

WebPよりさらに小さくなることが多い、新しい形式です。主要なブラウザが対応しており、Google検索でも、画像として扱われる形式に含まれています。

WordPressは、バージョン6.5からAVIFのアップロードに対応しています。ただし、サーバー側が画像処理に対応している必要があります（後述）。

SVG（.svg）

点と線の情報で描く、ベクター形式です。拡大しても、画質が劣化しません。ロゴやアイコンに向いています。

注意点が2つあります。

• 写真や、複雑な絵には向いていません
• SVGの中には、スクリプトを含められるため、出どころの分からないSVGを、そのままアップロードしないようにしてください

BMP・TIFF・HEICなど

• BMP：非圧縮で、ファイルが非常に大きい。Webには不向きです
• TIFF：主に印刷用です
• HEIC：iPhoneの写真の標準形式です。ブラウザやWordPressで、そのままでは表示できなかったり、アップロードできなかったりすることがあるため、JPEGなどに変換してから使います

拡張子そのものでは、SEOの順位は上がらない

古い記事には、「画像の拡張子を適切に選ぶとSEO評価が高まる」と書いてあるものがあります。しかし、拡張子そのものが、順位を上げるわけではありません。

形式の選び方が関係してくるのは、次の2つの場面です。

① Googleが、画像を認識できるか

Googleの公式ドキュメントでは、検索で扱える画像の形式として、BMP、GIF、JPEG、PNG、WebP、SVG、AVIFが挙げられています。

この範囲の形式であれば、形式の違いで不利になることはありません。

ただし、画像の表示のしかたによって、認識されるかどうかが変わります。

• <img>要素のsrcに指定した画像は、認識される（<picture>の中でも可）
• CSSの背景画像（background-image）は、インデックスに登録されない

検索結果に出したい画像は、<img>要素で入れてください。

また、画像の内容を伝えるために、alt属性（代替テキスト）を書き、ファイル名も内容が分かるものにすると、Googleが画像を理解する手がかりになります。

② ページの表示速度

画像が重いと、ページの表示が遅くなり、離脱につながります。形式を選ぶ意味は、ここにあります。

• 表示速度（LCPなど）の見方と改善策はこちらをご確認ください。
  ページ表示速度の改善方法｜PageSpeed Insightsの使い方

WordPressで画像を使うときの注意点

WebPとAVIFのアップロード

• WebP：WordPress 5.8以降で、アップロードして使えます
• AVIF：WordPress 6.5以降で対応。ただし、サーバーの画像処理ライブラリの対応状況によっては、アップロードできない場合があります

SVGは、標準ではアップロードできない

セキュリティ上の理由から、WordPressは、SVGを標準では受け付けていません。プラグインなどで許可する場合は、信頼できる出どころのSVGのみを使ってください。

アップロード前に、サイズを小さくする

スマホで撮った写真は、横幅が数千ピクセルあることが多いです。Webで表示する大きさに、あらかじめ縮小してからアップロードしましょう。

写真には、位置情報などが入っていることがある

スマホやカメラで撮った写真には、撮影した場所や日時などの情報（EXIFなどのメタデータ）が含まれている場合があります。自宅や店舗で撮った写真をそのまま公開すると、場所が分かってしまうことがあります。

公開する前に、メタデータを削除する習慣をつけてください。画像圧縮ツールの中には、削除してくれるものもあります。

古いブラウザが気になるときは

WebPやAVIFを使いつつ、念のためJPEGやPNGも用意する方法があります。<picture>要素を使うと、ブラウザが対応する形式を選んで表示してくれます。ただし、現在は主要なブラウザが対応しているため、ほとんどのサイトで、必須ではありません。

当社では、サーバー等の制約がない限り、新規サイト、リニューアルサイトに関して写真は基本的にWebP、ロゴはSVGで納品しています。

ファイルサイズを小さくするコツ

形式を選んだあとは、サイズを小さくする工夫が効きます。

1. 表示する大きさに合わせて、リサイズする

画面に300px幅で表示する画像を、3000px幅のまま使うのは無駄です。ただし、スマホなどの高精細な画面を考えて、表示サイズの2倍程度までを目安にすると、きれいさと軽さのバランスがとれます。

2. 圧縮する

画質が目立って落ちない範囲で、圧縮します。次のようなツールがあります。

– **Squoosh**：Googleが提供するオンラインツール。圧縮前後を並べて比較でき、WebPやAVIFへの変換もできます

– **TinyPNG**：ブラウザ上で、ドラッグ＆ドロップで圧縮できます

– **ImageOptim**：Mac用のアプリです

– **Compressor.io**：さまざまな形式に対応したオンラインツールです

3. widthとheightを指定する

画像の幅と高さをHTMLに書いておくと、読み込み中にレイアウトがずれにくくなります。

4. 画面の外にある画像は、遅延読み込みにする

loading=”lazy”を指定します。ただし、ページを開いてすぐ見える画像（ファーストビュー）には、使わないでください。

詳しくは、ページ表示速度の改善方法の記事で説明しています。

画像形式の変換方法

オンラインツール

ブラウザ上で、手軽に変換できます。Squooshなどが代表的です。

注意したいのは、お客様の写真や、公開前の画像を、外部のサイトにアップロードしてよいかです。社外秘のものは、ソフトを使うほうが安全です。

画像編集ソフト

PhotoshopやGIMPなどで、「書き出し」から形式を選びます。画質を見ながら、細かく調整できます。

変換のときの注意

• 元の画像（できれば、最初の高画質なもの）は、必ず残しておく
• JPEGからWebPなど、非可逆圧縮どうしの変換を繰り返すと、画質が劣化します。変換は、元の画像から行うのが基本です

まとめ

• 写真はWebP（またはAVIF、JPEG）、ロゴ・アイコンはSVG、スクリーンショットはPNGが基本
• アニメーションは、GIFより動画のほうが軽い
• 拡張子を書き換えただけでは、形式は変わらない
• 拡張子そのものは、SEOの順位を上げない。効くのは、表示速度と、Googleが画像を認識できる表示のしかた
• WordPressでは、AVIFやSVGの扱いに注意。公開前に、サイズの縮小と、メタデータの削除を

画像の最適化や、サイトの表示速度の改善でお困りでしたら、お気軽にご相談ください。
サイトリニューアルについて