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

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

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

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

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

完全未経験からフリーランスを目指す!

Webマーケターは、時間や場所に縛られない仕事。自宅やカフェはもちろん、旅行をしながら働くことだって可能です。

  • 「将来性・やりがいを感じられず、先が見えない」
  • 「仕事だけでなく、プライベートの時間も大事にしたい」
  • 「需要のあるスキルを身につけて、安定した収入を得たい」

公式LINEでは、Webマーケター適正診断5Days動画講座をプレゼントしています。

\最短90日で自由な働き方を手に入れる/

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

ファイル形式の種類

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

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

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

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

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

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

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

多彩色はJPEGを使う

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

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

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

単調な色はPNGが最適

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

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

\最短90日で自由な働き方を手に入れる/

JPEGの弱点は赤色の再現性

赤色のJPEG再現性

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

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

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

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

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

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

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

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

\最短90日で自由な働き方を手に入れる/

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色)で再現できるか、画像を見て判断する必要がある

\最短90日で自由な働き方を手に入れる/

まとめ

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

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

今の働き方に、疑問を感じているなら


  • 「将来性・やりがいを感じられず、先が見えない」
  • 「仕事だけでなく、プライベートの時間も大事にしたい」
  • 「需要のあるスキルを身につけて、安定した収入を得たい」

公式LINEでは、Webマーケター適正診断5Days動画講座をプレゼントしています。

Webマーケターは、時間や場所に縛られない仕事。自宅やカフェはもちろん、旅行をしながら働くことだって可能。

これまでの経験や趣味、関心のあることを活かしやすく、社会貢献にもつながるため、やりがいが大きいのが特徴です!

会社員から独立を成功させた、現役フリーランスWebマーケターが、ご相談に乗らせていただくことも可能です。

まずは、下記から公式LINEをチェックしてみてください。

\最短90日で自由な働き方を手に入れる/

この記事を書いた人
鈴木 晋介
フリーランスのWebマーケッター。同志社大学を卒業後、合成繊維の設備メーカーで海外営業を4年半経験。独立後、スマホアプリ開発や、旅行・美容・SEOジャンルのWebメディアを制作。Google、Yahooの検索ワードで1~3位を量産した実績を生かし、大手企業のWebマーケターとして活動中。
このライターの記事を見る
TOP
int(1606)
array(10) {
  [0]=>
  string(5) "12416"
  [1]=>
  string(5) "12445"
  [2]=>
  string(5) "12423"
  [3]=>
  string(5) "12457"
  [4]=>
  string(5) "12468"
  [5]=>
  string(5) "12484"
  [6]=>
  string(5) "12496"
  [7]=>
  string(5) "12508"
  [8]=>
  string(5) "12519"
  [9]=>
  string(5) "12532"
}