straw_manテンプレートlazyload設定解説記事
2023/03/11 18:13
0
straw_manテンプレートにおけるlazyload設定について解説する記事です。
もくじ
・lazyloadとは
・基本的な書き方
・画像読み込み時にガクッとズレる現象を抑えたい場合
・補足1: 画像圧縮のススメ
※元記事のキャッシュ
インターネットアーカイブ
googleキャッシュ
lazyloadを雑に説明すると、「ユーザーが真に必要とする画像 = 画面上に表示されうる画像のみを読み込ませるようにする」仕組みのこと。
ページ内に画像が多いページであればあるほど、ページ読み込みを早くさせる効果があります。
straw_manにはこの機能を実現するlazysizesというスクリプトを組み込んであるので、使用の上で何かしらを導入する必要はありません。
が、「lazyloadを有効化するには特有の記法を使用する」必要があります。
data-srcで画像URLを指定して、lazyloadというクラス名を追加するだけ！
基本はこれだけでオッケーです。
こうして画像が遅延読み込みされる際、
「画像が読み込まれた瞬間に表示がガクッとズレる」動きを見せることがあります。
これは「読み込み前は画像の大きさが0とみなされ、読み込み始めた瞬間に画像の大きさが定義される」仕様によるものなのですが……。
まあ細かいところはともかく。
上記のような指定方法にすればおそらく、ガクッとした動きは見せなくなることでしょう。
上サンプルにおける
src="data:image/gif;base64,R0lGODl...という部分は、
「縦横1*1pxの透明gif画像を仮置きしておく」という意味をもった記述です。
BASE64エンコードという手法なのですが、
「こうするとなんか上手く行くおまじない」程度に考えておくのでも問題ありません。
こうした機能を使って「ページの読み込みを早くする」ことを意識するならば、そもそもの画像自体も軽量化しておいたほうが良いでしょう。
tinypng.com
PNGイメージをオンラインで圧縮する
手軽に変換するならば、こうしたサイトが定番どころ。
PNG画像の場合は特に軽量化効果が高いのでオススメです。
これまた詳しい説明は省きますが、これらのサイトで変換すると
画像劣化するといっても、常人には見分けられない程度の劣化であることがほとんど。
一度試用した上で気にならなければ、積極的に活用していくと良いでしょう。
まださなぎ © Proudly written by dettalant
StrawMan Template総合案内板へ戻る
もくじ
・lazyloadとは
・基本的な書き方
・画像読み込み時にガクッとズレる現象を抑えたい場合
・補足1: 画像圧縮のススメ
※元記事のキャッシュ
インターネットアーカイブ
googleキャッシュ
当記事の文章とコードはリラ様の著作物です
リラ様のサイト『まださなぎ』では、StrawMan Templateとlaymicの実践的な解説を公開していましたが、サイトが消えてしまいました。
このままでは、StrawMan Templateとlaymicの普及と利用に支障が出るためキャッシュよりサルベージし再構築したのが当記事になります。
共同開発者のリラさんに連絡がつかず無断で転載している状態ですが、これが許されるとすれば共同開発者の私以外いないと判断しこのような形での公開となりました（詳細な経緯はこちら）。
もくじに本来のサイトの姿を保存していたキャッシュサイトを併記してありますが、キャッシュの性質上完全な再現とはならずいつ消えてもおかしくないのでリンク切れの際はご容赦ください。
最後に、当サイト『ヤマノス』では、他者の引用がなされたもの以外のすべてをフリー素材として公開しています（当サイトの著作物について）。
ですが、当記事はリラ様の著作物ですのでフリー素材ではありません。
ご注意願います。
文責：秋田LV3
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: 画像圧縮のススメ
こうした機能を使って「ページの読み込みを早くする」ことを意識するならば、そもそもの画像自体も軽量化しておいたほうが良いでしょう。
TinyPNG – Compress WebP, PNG and JPEG images intelligently
Make your website faster and save bandwidth. TinyPNG optimizes your WebP, PNG and JPEG images by 50-80% while preserving full transparency!
PNGイメージをオンラインで圧縮する
手軽に変換するならば、こうしたサイトが定番どころ。
PNG画像の場合は特に軽量化効果が高いのでオススメです。
これまた詳しい説明は省きますが、これらのサイトで変換すると
などの効果が得られます。・（画像によるが）おおむね半分以下のファイルサイズへと軽量化
・ ほんの少しの画像劣化
画像劣化するといっても、常人には見分けられない程度の劣化であることがほとんど。
一度試用した上で気にならなければ、積極的に活用していくと良いでしょう。
まださなぎ © Proudly written by dettalant
StrawMan Template総合案内板へ戻る
- 関連記事
-
- straw_manテンプレート初期導入設定解説記事
- Web漫画作家さん向けFC2テンプレート「straw_man」を作りました
- straw_manテンプレートlazyload設定解説記事
- straw_manテンプレートlaymicビューワー関連設定解説記事
- straw_manテンプレートコメントアバター設定解説記事