- 公開日
- 更新日
ページが表示されるまでに時間がかかると、ユーザーの印象は悪くなり、伝えたい情報が届かなかったり、別のウェブサイトへ離れてしまったりします。
さらに、あまりに遅いと検索エンジンでの順位が下がり、訪問数も減ってしまいます。ページの表示が速いことはウェブサイトが営業ツールとして機能するために必要不可欠です。
ウェブサイトの表示を高速化するためによく行うのがページ内の画像ファイルの最適化です。今までの事例をいくつか挙げてみます。
画素数の調整（リサイズ）
まずは画像ファイルのサイズです。ウェブサイトの横幅がよくある1200画素程度だとしますと、それより大きな画素数の画像ファイルを使うことは無駄になります。
スマホで撮影した画像がそのままでも横が4000画素を超えることが珍しくありませんが、そのまま使われていた画像の画素数を落とす（リサイズする、といいます）ことでサイズを10分の1に落とせたケースがありました。
サムネイル画像の最適化
記事の一覧ページなどで表示されるサムネイル画像（アイキャッチ画像などともいわれます）が元の大きい画像をそのまま使っているケースがありました。見た目は小さく表示されているのですが、大きなサイズの画像を読み込んでいるため表示には時間がかかることなります。
サムネイル画像は元の画像とは別にサイズを小さくしたものを用意します。WordPress のようなシステムでは自動的にサイズを小さくしてくれますが適切な設定が必要です。
画像内の説明文をテキスト化
あるウェブサイトでは画像ファイルが30枚以上使われており、商品の細かい説明文も画像でした。画像１枚で数万文字分のサイズを使います。また、スマホのような小さい画面では画像も小さく表示され文字が読みづらくなるかもしれません。
画像を作成しなおし説明文を画像からテキストに切り替えることで表示を速くするだけでなくスマホでも大切な情報が読みやすくできました。なお、商品名や特に目を引きたいメッセージは画像のままにするほうがよい場合もあります。
jpeg 画像の圧縮率調整
画像が jpeg 形式の場合、画像処理ソフトウェアを使い圧縮率を高くすることでファイルサイズを小さくすることができます。ある程度でしたら圧縮率を高くしても画質の劣化はそれほど気にならないことが多いのですが、あまりにも圧縮率を高くすると画質が落ちてきますので画質とサイズのバランスをとる必要があります。また、後に紹介する webp 形式を使う方法もあります。
おすすめの画像形式 webp
画像ファイル形式には jpeg, png, gif などがあり画像の用途や内容によって最適なものを使い分けていたのですが、最近ではこれらのいいとこ取りでしかも画質を保ったままファイルサイズを小さくできる webp 形式をお勧めしています。
なお、スマホなどで撮影した画像は一般には jpeg 形式ですので webp 形式に変換する必要があります。
画像ファイルの変換方法
高機能な画像処理ソフトウェアに慣れている方なら画像の変換は難しくありませんが、最近ではオンラインで簡単に画像変換ができるサービスを紹介しています。
また、WordPress のプラグインで投稿時に自動的に画素数を落としたり webp 形式に変換できるものがあります。既に投稿済みの画像も一括して変換できるものもあります。
最初は一部の画像だけ読み込む（遅延ローディング）
商品紹介のランディングページのような縦に長く画像を多く使うページの場合、すべての画像を最初から読み込む必要はありません。最上部にある数枚の画像以外は最初は不要なので、下にスクロールしてから読み込んで表示させるテクニック（遅延ローディングといいます）を導入します。
まとめ
このようにページ表示を高速化するために画像ファイルの改善を行う方法はいろいろとあります。また、画像ファイルのまずは現状を分析し可能な対策を決める必要があります。
