Webページで画像ファイルを使用するときに、「jpg」「png」「gif」といった拡張子を目にしたことはありませんか。
この3つのファイル形式にはそれぞれに特徴があり、違いを理解して使用しなければ、ページの表示速度が遅くなってしまうなどのトラブルが発生する恐れがあります。
「それぞれのファイル形式の違いって？」
「Webページの画像のファイル形式に問題があると指摘されたけど、何が問題なのかわからない」
「使い分け方法や、SEO対策に最適なファイル形式が知りたい！」
自社のWebページで複数の画像を使用している場合は、画像のファイル形式の使い分け方法や、SEO対策に有効なファイル形式を知りたいという方も多いのではないでしょうか。
この記事では、jpg・png・gifの違いや、SEO対策に適した画像のファイル形式について解説します。
さまざまなWEBサイト制作やSEO対策を手がけてきたNERD株式会社の視点から詳しく解説しますので、ぜひご覧ください。
jpg・png・gifには、以下の3つの違いがあります。
![]()
ここからは、jpg・png・gifの特徴と使い分け方法について解説します。
以下の表を参考に、それぞれのファイル形式について詳しく見ていきましょう。
![]()
ここからは「それぞれの特徴はわかったけど、SEO対策にはどのファイル形式が一番有効なのか知りたい」という方に向けて、SEO対策に最適なファイル形式について解説します。
冒頭でもご説明した通り、Googleは2021年より「core web vitals」の適用を開始しました。
core web vitalsでは、Webページの読み込み速度や表示速度も評価のひとつとなっています。
Webページをストレスなく表示させるには、画像の軽量化が欠かせません。
そのためにも、画像ファイルは『Webp（ウェッピー）形式』に置き換えることを強くおすすめします。
Webp形式とは、Googleが開発した次世代の画像フォーマットのことです。
Webp形式を用いることで、画像ファイルの拡張子は「.webp」になります。
Webp形式の特徴は、以下の2点です。
![]()
ここまでご覧になって、「画像の置き換えは本当にSEOに効果があるの？」と思われる方もいらっしゃるかもしれません。
そこで、実際に画像ファイルをWebp形式に置き換えた弊社のお客様の例を以下にあげさせていただきます。
このように、Webp形式に置き換えた画像のサイズダウンによってWebページが軽量化することで、Webページの表示速度がGoogleに評価されて検索結果で上位に表示されるという結果が出ています。
一方で、既存の画像を利用し続けてWebページの表示速度が改善されない場合は、検索順位が大幅にダウンしてしまうことも。
なぜなら、ライバルであるほかのWebサイトがWebページの軽量化を行っているからです。
core web vitals適用以降は、Webページの表示速度も評価のひとつです。
ライバルのWebサイトが表示速度の向上を図るなかで、自社Webサイトの表示速度がこれまでと変わらなければ、次々に検索順位を抜かれてしまう恐れがあります。
そのため、既存の画像の置き換えはできるだけ早めに行うことをおすすめします。
![]()
「画像の置き換えを自社で行っても大丈夫なら、できる限り自社で行いたい」と考えている方もいらっしゃると思います。
実際に、画像の置き換えは自社で行っていただくことももちろん可能です。
ただし、自社で作業を行う場合はいくつかの注意点があります。
ここからは、自社で画像の置き換えを行える条件をご紹介します。
![]()
NERD株式会社はWeb制作やWebマーケティングに強い会社で、SEO対策も行っています。
SEO対策会社としてのNERDの強みは、下記の4つです。
目次
jpg、png、gifは何が違う？画像の形式は重要？
jpg・png・gifには、以下の3つの違いがあります。
- 扱える色の数の違い
- 透過の違い
- アニメーションの有無の違い
jpg、png、gifの特徴と使い分け方法
ここからは、jpg・png・gifの特徴と使い分け方法について解説します。
以下の表を参考に、それぞれのファイル形式について詳しく見ていきましょう。
| ファイル形式 | 色数 | 透過 | アニメーション | サイズ |
| jpg | 1,670万色 | 不可 | 不可 | 普通〜重い |
| png-8 | 256色 | 可 | 不可 | 軽い |
| png-16 | 65,536色 | 可 | 不可 | 重い |
| gif | 256色 | 可 | 可 | 軽い （アニメーションの場合は重くなることも） |
jpgの特徴：色数が多く、透過処理はできない
jpgは色数が多く、透過処理ができないことが大きな特徴です。 そして、jpgは保存品質によって画像のサイズが大きく異なります。 高画質で保存すれば画像は綺麗になりますが、ファイルサイズは大きくなります。 反対に、画像の品質を落とすことでファイルサイズも小さくすることができるのです。 Webページの表示速度を考えるとファイルサイズは小さいことが望ましいですが、ユーザーにとって見づらい画像にならないように注意が必要です。 jpgは1,670万色もの膨大な色数を扱うことができるため、色の違いを綺麗に表現することが可能です。 主に『写真』や『色が細かく変化するグラデーションになっている画像』に向いているファイル形式です。png-8の特徴：色数が少なく、ファイルサイズが軽い
png-8は最大256色まで表現することができ、色数が少ないためファイルサイズを軽くすることが可能です。 色数はgifと同じですが、グラデーションになっている画像においてはgifよりもファイルサイズが小さくなることが特徴です。 そして、png-8は表現できる色数が少ないので、Webサイトのアイコンに向いています。 また、背景を透明にする透過処理ができるため、背景を透明にしたい場合はおすすめできるファイル形式です。png-16の特徴：綺麗で加工に向くが、ファイルサイズが重い
png-16は、65,536色の色数を表現することができます。 そのため、画像の色を綺麗に発色できて加工に向きますが、ファイルサイズが重いことが特徴です。 そしてpng-8と同じく、png-16も画像の透過処理が可能です。 画質を綺麗に保ちながら透過処理をしたい場合は、ファイル形式をpng-16に設定するとよいでしょう。gifの特徴：アニメーション対応、近年あまり使われない
gifはpng-8と同等の画質で、ファイルサイズが比較的軽いファイル形式です。 しかし、ファイルサイズを比較するとpng-8の方が軽くなることが多く、近年gifはあまり使われていません。 gifの大きな特徴として、pngと同じく透過処理が可能であることと、アニメーションに対応していることがあげられます。 静止画の画像のファイル形式では、gifだけが唯一アニメーションに対応しています。 そのため、アニメーション画像を作成したい場合は、gifを選択することになるでしょう。 gifは、アニメーション画像や簡単な透明色を用いた画像を作成する際に重宝します。GoogleはSEO対策としてどの形式を勧めているの？
ここからは「それぞれの特徴はわかったけど、SEO対策にはどのファイル形式が一番有効なのか知りたい」という方に向けて、SEO対策に最適なファイル形式について解説します。
冒頭でもご説明した通り、Googleは2021年より「core web vitals」の適用を開始しました。
core web vitalsでは、Webページの読み込み速度や表示速度も評価のひとつとなっています。
Webページをストレスなく表示させるには、画像の軽量化が欠かせません。
そのためにも、画像ファイルは『Webp（ウェッピー）形式』に置き換えることを強くおすすめします。
Webp形式とは、Googleが開発した次世代の画像フォーマットのことです。
Webp形式を用いることで、画像ファイルの拡張子は「.webp」になります。
Webp形式の特徴は、以下の2点です。
- 綺麗でファイルサイズが軽い
- 透過やアニメーション処理も可能
Webp形式の特徴①：綺麗でファイルサイズが軽い
Webp形式の大きな特徴として、画質を綺麗に保ちながらファイルサイズを軽くできることがあげられます。 これまで一般的に利用されていたjpg・png・gifでは、高画質を保とうとするとファイルサイズの軽量化が難しく、画質かファイルサイズのどちらかを優先するしかありませんでした。 しかし、Webp形式は画質の確保とファイルサイズの軽量化のどちらも実現することができるのです。 実際に、GoogleはWebp形式を同等の画質であるpngと比較すると26%、jpgでは25〜34%もファイルサイズを小さくすることができると発表しています。 出典：Google 高画質を保ちながら軽量化でWebページの読み込み速度がアップするので、Webp形式はSEO対策に向いているといえるでしょう。Webp形式の特徴②：透過やアニメーション処理も可能
Webp形式は、画像の透過やアニメーション処理にも対応しています。 これまでは画像を透過させるにはpngを、アニメーション画像を作るためにgifを……というように、ファイル形式を使い分けている方が大半だったのではないでしょうか。 しかし、Webp形式が登場したことで、画像のフォーマットを統一して使用することが可能になりました。 Webp形式は多機能で、とても魅力的なファイル形式といえます。今ある画像をどうやってWebpに置き換える？
すでにWebサイトにアップしている画像をWebp形式に置き換えるには、主に以下の方法があります。- ブラウザ上で画像フォーマットを変換するサービスを使う
- 変換ソフトを使う
- Photoshopで書き出す
- WordPressのプラグインを利用する
画像の置き換えはSEOに本当に効果があるの？
ここまでご覧になって、「画像の置き換えは本当にSEOに効果があるの？」と思われる方もいらっしゃるかもしれません。
そこで、実際に画像ファイルをWebp形式に置き換えた弊社のお客様の例を以下にあげさせていただきます。
弊社のお客様の例：
- 既存の画像のサイズダウンを行っただけで、検索ランキングが10位以下から4位まで上昇
- その一方で、core web vitals適用以降も既存の画像を利用し続けた結果、検索順位が20位以上下がったケースもあり
画像の置き換えは自社で行っても大丈夫？
「画像の置き換えを自社で行っても大丈夫なら、できる限り自社で行いたい」と考えている方もいらっしゃると思います。
実際に、画像の置き換えは自社で行っていただくことももちろん可能です。
ただし、自社で作業を行う場合はいくつかの注意点があります。
ここからは、自社で画像の置き換えを行える条件をご紹介します。
下記の条件があれば、自社で対応可能です
画像の置き換えを行うにあたり、下記の条件が揃っている場合は自社で対応していただいても問題ございません。- 画像点数が多くない
- 置き換えにあたり、バックアップなど必要な作業ができる
ページの表示速度やSEO対策でお困りの方は、ぜひNERDにご相談ください
NERD株式会社はWeb制作やWebマーケティングに強い会社で、SEO対策も行っています。
SEO対策会社としてのNERDの強みは、下記の4つです。
- 様々な業界でWeb制作やSEO対策を行った実績がある
- サイトで成果を出すために最適な施策を提案できる
- SEO対策だけでなくWebマーケティング全般が得意
- 長期的に取引している会社が多い
NERDにSEO対策の問い合わせをする
NERDではSEO対策やWeb制作、Webマーケティングなど幅広いご相談をお受けしております。 この記事ではSEO対策会社に問い合わせる前に押さえておきたいポイントなどもご紹介しましたが、NERDでは目標設定や現状把握から問題の洗い出し、施策の提案まですべておまかせにしていただくことも可能です。 「SEO対策はやっぱり難しそうだからおまかせにしたい」 「サイトの売上をアップさせたいけど何をすればいいかわからない」 「自社サイトの問題点がうまく把握できない」 そのようなお悩みを抱えている方は、ぜひお問い合わせフォームからNERDにご相談ください。 まずはしっかりとお話を伺い、御社にぴったりのSEO対策やWebマーケティングを総合的にご提案いたします。 NERD株式会社｜お問い合わせNERDは自社でのSEO対策も応援します！おすすめ記事はこちら
「SEO対策会社について調べていたら、自社でSEO対策をやってみたくなった」という方は少なからずいるでしょう。 NERDでは自社でのSEO対策も応援しております。 下記のリンクに自社SEO対策の参考となる記事が集めてありますので、ぜひ参考にしてください。 NERD ZINE｜SEO
弊社は、東京都墨田区にあるWEBサイト制作会社です。「制作」「マーケティング」「プロダクト」の3つを強みに、これまでに培った「成功するノウハウ」を活かしたWEBサイト制作を得意としています。
以下から弊社のサービス資料・お役立ち資料をダウンロードできますので、皆様のWEBサイト運用に活用していただけますと幸いです。
