アイキャッチは小サイズ画像を別に用意した方が親切

記事一覧やサイドバーなどのアイキャッチは、記事に使用している大サイズ画像を縮小して表示することがあります。 しかし大サイズの画像をCSSで制御して小さく表示した場合、画像の重さは大サイズのものそのままです。

記事の中であれば画像は数枚程度なので大サイズ画像であっても大した負荷にはなりませんが、アーカイブ表示やサイドバーなら場合によっては20枚ぐらいを一度に表示させることもあります。そうなるとページ表示時に重さを感じてしまいますね。

基準の大きさが縦横960pxの画像を投稿のアイキャッチとして使い、更にそれをナビに縮小表示させるケースを考えます。

lt;article>
<img src="https://sisin.net/wp-content/uploads/sites/3/hoge1.jpg" width="960px" height="720px">
</article>
・・・
<nav>
<img src="https://sisin.net/wp-content/uploads/sites/3/hoge1.jpg" width="160px" height="120px">
<img src="https://sisin.net/wp-content/uploads/sites/3/hoge2.jpg" width="160px" height="120px">
<img src="https://sisin.net/wp-content/uploads/sites/3/hoge3.jpg" width="160px" height="120px">
・・・
</nav>

仮に1枚300KBだとしても20枚あれば6Mです。 6Mぐらいならまあ許容範囲ですが、これが高画質の画像となると結構酷いことになります。 ナローバンド環境のユーザービリティを考える場合、どうにかしなければならないですね。

対策

一番スマートな解決方法として、大サイズ画像と同じものを圧縮した小さい画像データを別に用意しておくことが挙げられます。 このケースではアイキャッチは記事の1/6程度の大きさなので、サイズを1割以下にまで抑えることができるでしょう。

ちなみにWordPressなどにはこの機能がデフォルトで付いています。 メディアをアップロードした時に別に小さい画像ファイルを作ってくれるので、サイドバーやアーカイブなどには生成された小さい画像データを使うことができます。

ただしアイキャッチ画像を別に作る場合、画像管理が煩雑になります。 画像の差し替えを行った場合などにはアイキャッチも差し替えなければならないですし、引っ越しの時などには縮小画像も持っていかなくてはなりません。 画像が増えればごちゃごちゃしたりサーバ容量を圧迫する原因となりますし、そもそも（ほぼ）同じ画像が複数あること自体が問題と見ることもできます。

アイキャッチを別途用意せずとも、軽い画像のみで構成していれば縮小表示するなどで負荷を軽減させる手もあります。 あまりずらずらと画像を沢山並べないサイト構成であれば、重いサイズの画像を縮小表示させても問題にはならないでしょう。

この辺はコストとリターンを考えて最適な手法を選択しましょう。 ユーザーがブロードバンドであるのを前提として大容量の画像をずらずらと並べるのも、サイトの性質によってはありなんじゃないかとも思います。