straw_manテンプレートlazyload設定解説記事

straw_manテンプレートにおけるlazyload設定について解説する記事です。

スポンサーリンク

lazyloadとは

lazyloadを雑に説明すると、「ユーザーが真に必要とする画像 = 画面上に表示されうる画像のみを読み込ませるようにする」仕組みのこと。

ページ内に画像が多いページであればあるほど、ページ読み込みを早くさせる効果があります。

 

straw_manにはこの機能を実現するlazysizesというスクリプトを組み込んであるので、使用の上で何かしらを導入する必要はありません

が、「lazyloadを有効化するには特有の記法を使用する」必要があります。

基本的な書き方

<img data-src="表示したい画像のURL" class="lazyload">

data-srcで画像URLを指定して、lazyloadというクラス名を追加するだけ!

 

基本はこれだけでオッケーです。

画像読み込み時にガクッとズレる現象を抑えたい場合

こうして画像が遅延読み込みされる際、
「画像が読み込まれた瞬間に表示がガクッとズレる」動きを見せることがあります。

 

これは「読み込み前は画像の大きさが0とみなされ、読み込み始めた瞬間に画像の大きさが定義される」仕様によるものなのですが……。

まあ細かいところはともかく。

 

<img data-src="表示したい画像のURL" class="lazyload" width="画像の横幅" height="画像の縦幅" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">

上記のような指定方法にすればおそらく、ガクッとした動きは見せなくなることでしょう。

 

上サンプルにおける
src="data:image/gif;base64,R0lGODl...という部分は、
縦横1*1pxの透明gif画像を仮置きしておく」という意味をもった記述です。

BASE64エンコードという手法なのですが、
「こうするとなんか上手く行くおまじない」程度に考えておくのでも問題ありません。

補足1: 画像圧縮のススメ

こうした機能を使って「ページの読み込みを早くする」ことを意識するならば、そもそもの画像自体も軽量化しておいたほうが良いでしょう。

 

手軽に変換するならば、こうしたサイトが定番どころ。

PNG画像の場合は特に軽量化効果が高いのでオススメです。

 

これまた詳しい説明は省きますが、これらのサイトで変換すると

  • (画像によるが)おおむね半分以下のファイルサイズへと軽量化
  • ほんの少しの画像劣化

などの効果が得られます。

 

画像劣化するといっても、常人には見分けられない程度の劣化であることがほとんど。

一度試用した上で気にならなければ、積極的に活用していくと良いでしょう。