Webページで画像ファイルを使用するときに、「jpg」「png」「gif」といった拡張子を目にしたことはありませんか。
この3つのファイル形式にはそれぞれに特徴があり、違いを理解して使用しなければ、ページの表示速度が遅くなってしまうなどのトラブルが発生する恐れがあります。
「それぞれのファイル形式の違いって？」
「Webページの画像のファイル形式に問題があると指摘されたけど、何が問題なのかわからない」
「使い分け方法や、SEO対策に最適なファイル形式が知りたい！」
自社のWebページで複数の画像を使用している場合は、画像のファイル形式の使い分け方法や、SEO対策に有効なファイル形式を知りたいという方も多いのではないでしょうか。
この記事では、jpg・png・gifの違いや、SEO対策に適した画像のファイル形式について解説します。
さまざまなWEBサイト制作やSEO対策を手がけてきたNERD株式会社の視点から詳しく解説しますので、ぜひご覧ください。
目次
jpg、png、gifは何が違う？画像の形式は重要？
jpg・png・gifには、以下の3つの違いがあります。
- 扱える色の数の違い
- 透過の違い
- アニメーションの有無の違い
画像のファイル形式によって、できることやできないことが異なるので、それぞれの特徴を把握して適切に使用する必要があります。
そして、ファイル形式の違いを正しく理解して適切に使用することは、Webサイトを運営していくうえでもとても大切です。
画像ファイルをWebサイトで使用するときは、「ファイルサイズが小さくて高画質」なことが求められます。
ファイルサイズが大きいとWebページの読み込み速度が遅くなり、ユーザーにストレスを与えてしまうことも。
さらに、画像のファイル形式を適切に設定する大切さは、SEO対策にも大きく関わってきます。
Googleは、ユーザーがより快適に検索エンジンを利用できるように、2021年より『core web vitals（コアウェブバイタル）』という指標を検索ランキングへ適用し始めました。
core web vitalsとは、「Webページの読み込み速度」や「レイアウトの崩れ」といったWebサイトの健全性を示す指標のことです。
これにより、読み込み速度が早くレイアウトが安定しているサイトの検索順位が上がりやすくなりました。
そのため、画像のファイル形式を正しく設定することは、SEOの観点からも非常に重要です。
では、一体どのようにjpg・png・gifを使い分ければよいのでしょうか。
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点です。
- 綺麗でファイルサイズが軽い
- 透過やアニメーション処理も可能
ここからは、この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のプラグインを利用する
ブラウザ上でWebp形式に変換できるサービスはとても便利ですが、仕様上の理由で透過やアニメーション処理に対応していない場合があるので注意が必要です。
また、変換ソフトやPhotoshopを利用する場合には、専用のソフトが必要です。
ソフトの操作に慣れていない場合は、画像の変換が難しく感じることがあるでしょう。
大量の画像を一括で置き換えたい場合は、「Webp Express」などのWordPressのプラグインの利用がおすすめです。
既存の画像ファイルをWebp形式に置き換えるにはさまざまな方法がありますが、上記のようなサービスの利用に慣れていない方は、なかなか作業が進まない可能性があります。
そういった場合は、Web制作会社に既存画像の置き換えを依頼する方法がおすすめです。
Web制作会社には、専門の知識があり高い技術力を持ったプロが多数在籍しています。
Web制作のプロに依頼することでミスがなく、迅速に画像の置き換えが行えるでしょう。
画像の置き換えはSEOに本当に効果があるの？
ここまでご覧になって、「画像の置き換えは本当にSEOに効果があるの？」と思われる方もいらっしゃるかもしれません。
そこで、実際に画像ファイルをWebp形式に置き換えた弊社のお客様の例を以下にあげさせていただきます。
- 既存の画像のサイズダウンを行っただけで、検索ランキングが10位以下から4位まで上昇
- その一方で、core web vitals適用以降も既存の画像を利用し続けた結果、検索順位が20位以上下がったケースもあり
このように、Webp形式に置き換えた画像のサイズダウンによってWebページが軽量化することで、Webページの表示速度がGoogleに評価されて検索結果で上位に表示されるという結果が出ています。
一方で、既存の画像を利用し続けてWebページの表示速度が改善されない場合は、検索順位が大幅にダウンしてしまうことも。
なぜなら、ライバルであるほかのWebサイトがWebページの軽量化を行っているからです。
core web vitals適用以降は、Webページの表示速度も評価のひとつです。
ライバルのWebサイトが表示速度の向上を図るなかで、自社Webサイトの表示速度がこれまでと変わらなければ、次々に検索順位を抜かれてしまう恐れがあります。
そのため、既存の画像の置き換えはできるだけ早めに行うことをおすすめします。
画像の置き換えは自社で行っても大丈夫？
「画像の置き換えを自社で行っても大丈夫なら、できる限り自社で行いたい」と考えている方もいらっしゃると思います。
実際に、画像の置き換えは自社で行っていただくことももちろん可能です。
ただし、自社で作業を行う場合はいくつかの注意点があります。
ここからは、自社で画像の置き換えを行える条件をご紹介します。
下記の条件があれば、自社で対応可能です
画像の置き換えを行うにあたり、下記の条件が揃っている場合は自社で対応していただいても問題ございません。
- 画像点数が多くない
- 置き換えにあたり、バックアップなど必要な作業ができる
画像の変換に慣れていない場合は時間がかかるかもしれませんが、画像点数が多くなければ比較的簡単にWebp形式に置き換えることができるでしょう。
そして、画像の置き換えをする前には必ずデータのバックアップを行うようにしてください。
データのバックアップをとることで、何らかの問題が発生した場合に画像ファイルのデータを失ってしまうことを防ぎます。
データのバックアップはトラブルを防ぐための基本作業なので、定期的に行うようにしましょう。
ページの表示速度やSEO対策でお困りの方は、ぜひNERDにご相談ください
NERD株式会社はWeb制作やWebマーケティングに強い会社で、SEO対策も行っています。
SEO対策会社としてのNERDの強みは、下記の4つです。
- 様々な業界でWeb制作やSEO対策を行った実績がある
- サイトで成果を出すために最適な施策を提案できる
- SEO対策だけでなくWebマーケティング全般が得意
- 長期的に取引している会社が多い
NERDは2021年9月現在で512件のプロジェクトに対応しており、不動産・アパレル・ITなど担当した業界も多種多様です。
幅広い業界のサイトについて、成果を出すために最適な施策を常に提案してきました。
NERDは単なるSEO対策会社ではなく、Web制作・コンテンツマーケティング・SNS運用など様々な形のWebマーケティングを手掛けています。
短納期でのサイトリニューアルから半年以上の長期的な取引まで、クライアントである企業や店舗のニーズに合わせて対応いたします。
NERDにSEO対策の問い合わせをする
NERDではSEO対策やWeb制作、Webマーケティングなど幅広いご相談をお受けしております。
この記事ではSEO対策会社に問い合わせる前に押さえておきたいポイントなどもご紹介しましたが、NERDでは目標設定や現状把握から問題の洗い出し、施策の提案まですべておまかせにしていただくことも可能です。
「SEO対策はやっぱり難しそうだからおまかせにしたい」
「サイトの売上をアップさせたいけど何をすればいいかわからない」
「自社サイトの問題点がうまく把握できない」
そのようなお悩みを抱えている方は、ぜひお問い合わせフォームからNERDにご相談ください。
まずはしっかりとお話を伺い、御社にぴったりのSEO対策やWebマーケティングを総合的にご提案いたします。
NERDは自社でのSEO対策も応援します！おすすめ記事はこちら
「SEO対策会社について調べていたら、自社でSEO対策をやってみたくなった」という方は少なからずいるでしょう。
NERDでは自社でのSEO対策も応援しております。
下記のリンクに自社SEO対策の参考となる記事が集めてありますので、ぜひ参考にしてください。
こんな疑問、NERDに相談してみませんか？
