SEO(上位表示対策)

SEOに最適な画像の選び方!ファイル形式はこう選ぶ

SEOに最適な画像の選び方!ファイル形式はこう選ぶ

SEOに最も有効な画像はファイル形式で決まります。自然物はJPEG(ジェイペグ)人工物はPNG(ピング)のファイル形式を選ぶことが基本です。

サイトの軽量化がSEOに与える影響は大きく、Googleもサイトの表示速度アップを推奨しています。たくさんの小難しい技術を駆使してサイト内の情報を軽量化するよりも、最適な画像に差し替える方が何倍もサイトの表示速度をあげます。

SEO対策に大きく影響する画像の選び方をお伝えします。

SEOに最適な画像はファイル形式は2種類

ファイル形式の種類

SEOに最適な画像は、とにかく容量が軽く、適切な美しさを保っていることが条件です。画像ファイルに圧縮をかけずに保存すれば、美しい画像のまま保存できますが、その分、容量が大きくなりすぎてサイト内での画像の読み込みに時間が掛かってしまいます。

そこで、画像に圧縮を掛けてファイルサイズを小さくして使うことが、ウェブの世界では一般的です。中でも、JPEGとPNGは最もメジャーなファイル形式であり、ウェブに適した画像ファイル形式です。

JPEG、PNG以外にも、TIFF(ティフ)BMP(びーえむぴー)GIF(ジフ)といった物も有名ですが、JPEGとPNGに二択だけに絞って問題ありません。

その理由は、画像の美しさと軽さのバランスが他のファイル形式に比べて圧倒的に良いからです。他のファイル形式は画像の美しさに重きを置きすぎて、ファイルサイズが大きくなりすぎてしまい、サイトで使用するには不向きです。

雑誌や写真を現像するときなど、ファイルサイズは関係なく、とにかく美しい画像が必要なときに用いるべき形式です。

サイトの表示速度とSEOについて詳しくまとめた記事はこちら

【Google Speed Update】サイト表示速度を上げるために必要な施策サイトの表示速度を向上させる方法には多くの方法があります。しかし、全て対応するには膨大な時間と手間がかかります。まずは、この記事でお伝えすることから取り組みを始めてみましょう。...

多彩色はJPEGを使う

人物や風景、食べ物といった自然物の画像はJPEGが最適です。人の肌や服の色、植物や空などは単調な色の塗りつぶしではなく、同じ面であっても光の加減によって微妙に色が異なります。

JPEGは1600万色まで再現できるため、多彩な色の変化を再現することに向いています。

車や建物や道路などの人工物も、同じように色が連続的に変わっていくのでJPEGを用いましょう。

単調な色はPNGが最適

画面キャプチャなどの単調な色の画像はPNGファイル形式が最適です。同じ色の塗りつぶしや直線的な画像を、少ない色数で連続した色の情報を上手に圧縮できるのがPNGファイルの特徴です。

また、背景を透過することができるので、ウェブで画像を利用する様々なシーンで活用できます。

JPEGの弱点は赤色の再現性

赤色のJPEG再現性

JPEGには2つの弱点があり、その弱点を補えない場合はPNGファイルを使って代用することがあります。

1つ目の弱点は、赤色の再現性の低さ。きれいな赤色がくすんだ朱色のように、少し滲んだ赤色になってしまう傾向があります

赤色が重要なポイントとなる、花や洋服といった写真の場合は、JPEGではなくPNGを選んだ方が美しい表現を維持できます。

2つ目の弱点は、一度保存した画像を元に戻すことができない不可逆性です。JPEGには、0~100までの保存品質という項目があり、値が大きいほど画質が良くなる設定を行うことが出来ます。

保存品質50で保存された画像よりも、保存品質が80で保存された画像の方がキレイですが、その分ファイルサイズが大きくなります。

保存品質を50に設定して保存し、後で80に変えようとしても戻ることが出来ません、これが不可逆性です。もちろん、オリジナル画像を持っておけば、また設定を変更して保存することができます。

  • 赤色が汚くなる
  • 保存品質設定をすると後戻りできない

以上の点に注意が必要です。特に、保存品質はファイルサイズに大きな影響を及ぼす大切な設定ですから、必ずオリジナルの画像ファイルをあらかじめ予備で取っておくことを忘れないようにしましょう。

PNGは画像の色数に注意する

pngの写真例

PNGファイルには、8ビット、16ビット、24ビット、32、48ビット等の種類があります。これは、使える色の数を示したものです。

8ビットは256色、24ビットは約1678万色、48ビットは約280兆色もの色を再現できます。280兆色なんてあっても、ディスプレイが対応していなければ再現できませんし、そもそも人間の目にそこまでの色を見分けられる能力はありませんから、まず使うことはありません。

ほとんどの場合、ウェブ上でPNGを使う際は、8ビットのPNGを使います。前述したように、PNGは、同じ色の塗りつぶしや直線的な画像に用いるので、256色もあれば十分に色を再現できるからです。

しかし、中には、256色では微妙に色がつぶれてしまうような画像がありますので、その際は、16ビット(65536色)を選ぶかJPEGに切り替えるなどの判断が必要です。

  • 8bit(256色)で再現できるか、画像を見て判断する必要がある

まとめ

サイトの表示速度を早くすることがSEO対策に有効であることは、Googleも推奨していることから明らかです。

javaスクリプトやHTMLの軽量化の何倍もファイルサイズを縮小できる画像の最適化は、サイト軽量化に必須の作業です。画像にあったファイル形式を選択して、検索順位を上昇させましょう。

SEO対策って一体何なの?初心者でもわかるように解説します!
SEO対策って一体何なの?初心者でもわかるように解説します!SEO対策というと難しく聞こえますが、考え方はシンプルです。読者にとって役に立つ記事を作り、グーグルなどの検索エンジンで上位表示を目指す対策のことです。今回はSEO対策について初心者でもわかるように解説していきます。...
ABOUT ME
シン(webmarks編集長・Webディレクター)
シン(webmarks編集長・Webディレクター)
フリーランスのWebマーケッター。同志社大学を卒業後、合成繊維の設備メーカーで海外営業を4年半経験。独立後、スマホアプリ開発や、旅行・美容・SEOジャンルのWebメディアを制作。Google、Yahooの検索ワードで1~3位を量産した実績を生かし、大手企業3社のWebチームのディレクターとして活動中。
【おすすめ】個人事業主は加入必須の安心サービス!
フリーナンス

フリーナンスは、フリーランス・個人事業主のための「お金と保険のサービス」です。会員登録するだけで、業務遂行中の事故、仕事の結果の事故、受託物の事故などを最高5,000万円まで無料で保証。業務中の万が一の情報漏えい、著作権侵害、納品物の瑕疵、納期遅延に対しても守ってくれるため、個人事業主なら加入必須のサービスです。

評価(星5個中)
即日払い請求書をフリーナンスが買い取り(最高300万円まで)、その代金を即日払い。手数料は請求書額面の3.0%~
あんしん補償事故等の補償(最高5,000万円)、情報の漏洩や著作権侵害などによる事故の補償(最高500万円)
振込専用口座ご希望の口座名義で開設可能、口座維持費も振込手数料も無料

詳細ページ公式ページ

RELATED POST