画像の最適化でページ表示スピード改善

2018年8月5日

テキストばかりのページは読みにくく、伝わりにくい為、画像とテキストをバランスよく配置したページ作成を行いましょう。




画像(imgタグ)

画像(imgタグ)の具体的な記述

下記はimgの記述例です。ユーザビリティー向上の為、altは必ず入れておきましょう。

alt 記述例

<img src=”seomastericon.gif” alt=”seo” width=”200″ height=”200″ />


alt属性の重要性は、「alt属性に含めるテキスト・文言とSEO効果 HTMLのimgタグ」をご参照ください。




画像はページ表示スピードに影響あり

画像をウェブページに張り付ける際は、ページ表示スピードを考慮しておきましょう。
2012年のGoogleのWebmaster Central Blogの記事、「1000 Words About Images」によると、Googleがインデックスする画像のファイルサイズには特に制限が無いと記述されています。
つまり高画質の画像をそのまま公開してしまってもGoogleはインデックスしてしまうようです。
訪問者はPCだけでなく、スマートフォンユーザーもいますので、あまりファイルサイズが大きな画像はユーザービリティを下げます。
ページ表示スピードは検索順位を決定する指標の一つでもあります。
Using site speed in web search ranking




高速表示の為の画像最適化

Googleはページ表示スピードを改善する為に、PageSpeed Insightsというチェックツールを無料で公開しています。
この中で画像に関する最適化項目がありますのでご確認ください。


変更後のサイズで画像を提供する

画像サイズを予めウェブページに張り付けるサイズ(縦横)に縮小し、imgタグでheight、widthを画像のサイズと同じ値に設定します。


画像のサイズを指定する

上記と似たような意味合いですが、width、heightともにきちんとサイズを指定しておきましょう。


画像を適切に圧縮する

画像ファイルのサイズをウェブページに用に圧縮する事でページ表示スピードが改善します。
ページの読み込み・表示速度の改善方法について詳しくは、「ウェブサイト高速化方法」で解説しています。



このエントリーをはてなブックマークに追加


野澤洋介

この記事を書いた人

アレグロマーケティング代表取締役 野澤洋介

SEOは考え方はシンプルですが、いざ実践するとなかなか思うようにいきません。
当ブログでは、読者の方に成功も失敗も合わせて情報を共有し、同じような悩みを解決できればという思いで運営しています。


著書:「最強の効果を生みだす 新しいSEOの教科書」(技術評論社)



関連記事




ページ上部