今の時代、WEBエンジニアやプログラマーでなくても会社やお店のサイトを制作したり運用したりすることも多くなりました。
当然ながらよりアクセスを見込めるWEBサイトを作る必要がありますが、そこで大事になるのがページに掲載する画像ファイル。
実は画像ファイルの載せ方ひとつで、WEBサイトのアクセス流入の効果を高めることができるんです。
今回はWEBサイトの効果を高められる画像の載せ方について解説いたします。
WEB画像をどう載せるかはSEOの改善にもつながる
Googleなどの検索エンジンがWEBサイトを評価して検索順位に反映させるとき、そのページに掲載されている画像の載せ方も判断基準となります。
検索エンジンがクローラと呼ばれるプログラムでサイト情報を取得する際、画像の内容や掲載されている位置などもページ全体の利便性を判断する基準としてチェックしているためです。
WEBサイトを閲覧しにきたユーザーはもちろん、クローラもリンクなど埋め込まれた設定内容や前後のテキストから画像の情報を読み取るため、画像を適切な数だけ適切な場所に置くことはSEOの観点からも重要なのです。
また画像を置くことでユーザーの平均ページ滞在時間が長くなりやすく、サイトやページに記載された内容に対し関心を持ちやすくなります。
そのほかにも検索結果画面に掲載された画像のサムネイルが表示されることがあり、スマートフォンの小さめの画面でも目立ちやすいことからよりユーザーの目をひきやすいです。
また画像検索においてもサムネイルが表示されるようになれば、画像リンクからアクセスできるようサイトへの流入経路を増やすこともできます。
SEOで大事な読み込み速度とWEB画像の「重さ」
素早く情報を取得できるWEBサイトにおいて、読み込みに時間がかかってしまうことはページを離脱されてしまう大きな要因となります。
Googleの報告ではページの読み込み時間が6秒以上になると離脱率が100%を超えてしまうというように、スムーズなページ読み込みの重要性が明示されています。
一般的に1つのWEBページの容量は、掲載されている画像などのファイルも含めて1.6MB以内におさえるよう推奨されています。
ページを構成する要素の中でもWEB画像は容量が重たくなりやすく、高画質なものをそのまま掲載すると1MBを超えてしまうことも少なくありません。
一見シンプルな構図で重たくなさそうに見えるイラストファイルでも、実寸のサイズがかなり大きいため読み込みに時間がかかってしまうこともよくあります。
少しでもサイトの使いやすさを改善してユーザーの離脱率を下げるには、より軽量化された画像ファイルを貼ってページの読み込み負担をおさえることが重要です。
ちなみに自社のWEBコンテンツの読み込み時間はGoogleのPage Speed Insightsなどの無料ツールで簡単に調べられるので、試しにいろいろ調べてみるのもおすすめです。
画像ファイルの容量は拡張子によって大きく変わる
同じ内容・同じ縦横幅の画像ファイルでも、拡張子というファイル形式によって画像の圧縮率が異なるため、容量も大幅に変わってきます。
WEBサイトで主に用いられている画像ファイルの拡張子には、JPG、GIF、PNGなどがあります。
同じ寸法の同じ画像をJPG、GIF、PNGとしてそれぞれ保存して、容量を比較してみました。
| 拡張子 | 容量 |
| JPGファイル | 826KB |
| GIFファイル | 1.33MB |
| PNGファイル | 4.72MB |
より高い画質を保持できる分、GIFやPNGはどうしてもJPGよりもかなり容量が重たくなってしまいます。
この三つの拡張子だけだと見栄えを劣らせずに画像ファイルを軽量化するのは難しそうに見えますが、実は後述する「WEBP」というファイル形式で掲載すれば両者をバランスよく実現することができます。
そのため、写真やイラストは基本的にWEBP形式で掲載するのがおすすめです。
ちなみに画像ファイル1つあたりの容量の目安として、Googleでは接続状況に関係なく安定して表示できる200KB以内におさえるべきだとしています。
画像ファイルの容量を軽量化する方法
余分な実寸サイズを必要な大きさにリサイズする
WEB画像はより大きい寸法に引き伸ばして保存すると、画素数が増えて拡大した倍率以上に容量が重たくなってしまいます。
実際に先ほどのJPG画像を2倍の大きさにすると、容量は2.5倍にも増えていました。
| 倍率 | 容量 |
| 100%（1964 × 1942px） | 約0.83MB |
| 150%（2946 × 2913px） | 約1.31MB |
| 200%（3928 × 3884px） | 約1.92MB |
ワードプレスなどでは、寸法が必要以上に大きい画像はページレイアウトにあわせてサイズを自動で調節したものが表示されます。
ただし画像ファイル自体は同じもののため、寸法はリサイズされても容量は変わらず読み込み速度への負荷も同じ分だけかかってしまいます。
そのため例えば横1200pxの画像を800pxに自動調整して表示される場合、最初から横800pxの画像にリサイズしたものに置き換えて表示させるほうが表示負担が軽減されるのです。
拡大して細部まではっきり見せたい画像などでない限り、実際に表示される横幅にあわせて小さくリサイズした画像を掲載するのがおすすめです。
既存の画像ファイルをWEBP形式のものに差し替える
どうしても画質を落とせない、なるべく大きめに見せたい画像ファイルがある場合、JPGやPNGよりも圧縮性に優れたWEBP形式の画像ファイルを掲載するのもおすすめです。
WEBP形式は画質の劣化を防ぎながら大幅に容量を圧縮できるため、既存の画像ファイルの差し替えなどに適しています。
実際に先ほどのJPG画像をWEBP形式で保存しなおしてみると、容量が826KBから227KBと4分の1近くまで圧縮されました。
Photoshopなどの画像制作ファイルやWEB上の無料ツールなどで、すでにあるPNGやJPGなどの画像ファイルを簡単にWEBP形式に保存できるため、新しく画像を作り直す必要がないのも大きなメリットです。
WEB画像の効果を高める容量以外のポイント
レスポンシブ対応による表示サイズの自動調節化
レスポンシブ対応はパソコンやスマートフォンといったデバイスの画面サイズにあわせて、コンテンツの表示レイアウトを自動で調節する機能です。
WEB画像をレスポンシブ対応のものにすることで、デバイスによって画像が見切れてしまったりレイアウトが崩れたりすることが防げます。
ただしレスポンシブ対応にはHTMLやCSSのコーディングが必要となるため、WEB制作の経験がなければ誰か社内の人間に頼んでみるのも手です。
自分でコーディングを行う場合、大まかな画面の横幅としてPCは1200pxほど、タブレットは800pxほど、スマホは400pxほどと覚えておきましょう。
ALTタグで画像を説明する代替テキストの設定
代替テキストとはWEB画像の内容を説明するために画像に埋め込まれるテキストです。
画像が読み込めない場合に代わりに表示されたり、音声読み上げ機能を使ってページを見たときに画像を説明したりするのに使われます。
また検索エンジンがWEB画像の内容がどのようなものか把握するために取得する情報でもあります。
そのためWEB画像への代替テキストは、「01」「02」と適当なものではなく画像の内容を正しく表すフレーズにすることが重要です。
特にページのトップ画像やリンクが埋め込まれている画像は、クローラが重視しやすいので代替テキストは必ず入れましょう。
一方で検索に引っ掛かりやすくするよう、不自然にワードを代替テキストに詰め込みすぎるとクローラに不正行為を疑われやすくなります。
不正な行為と認識されれば、ページ評価が低下して検索順位に悪影響が出る原因にもなってしまいます。
可能であれば検索画面用のサムネイルも設定しておこう
Googleの検索結果ページに表示されるディスクリプションでは、縦横100pxのサムネイル画像を右側に表示させることができます。
検索画面に文章だけ表示される場合と比べてユーザーの目を引きやすく、できればサムネイルも設定したほうがよいでしょう。
ただしサムネイル画像の設定にはHTMLやPHPのコーディングスキルが必要です。
自分一人で設定できるか不安な場合は、誰かWEB制作の知見がある方にお願いしてみてもいいかもしれません。
ちょっとしたことがアクセス効果アップの可能性につながる
WEBサイトに掲載される画像、実はどう載せるかによってサイト全体の評価が変わることも少なくありません。
例えば画像ファイルはJPGやPNGといった形式が標準的だと思いますが、これをWEBP形式のものに変えるだけで容量が大幅に圧縮されてページの読み取り速度向上につなげられます。
ほかにもレスポンシブ対応のWEB画像にしたり、ALTタグを入れてWEB画像の説明文を入れたり様々な方法でWEB画像はページのSEO向上に良い影響を及ぼせるようになります。
ただし載せる際の工夫にはコーディングなどのスキルが必要なものもあるので、WEB関連のことが苦手な方は無理せず得意な人の手を借りるのもおすすめです。
