メニューを開く 項目を開く 記事投稿時刻 コメント トラックバック カテゴリー ブログテーマ タグ URLリンク コメントの編集 コメントに返信する

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

2023/03/11  18:13
0
straw_manテンプレートにおけるlazyload設定について解説する記事です。



当記事の文章とコードはリラ様の著作物です


リラ様のサイト『まださなぎ』では、StrawMan Templateとlaymicの実践的な解説を公開していましたが、サイトが消えてしまいました。

このままでは、StrawMan Templateとlaymicの普及と利用に支障が出るためキャッシュよりサルベージし再構築したのが当記事になります。

共同開発者のリラさんに連絡がつかず無断で転載している状態ですが、これが許されるとすれば共同開発者の私以外いないと判断しこのような形での公開となりました（詳細な経緯はこちら）。


もくじに本来のサイトの姿を保存していたキャッシュサイトを併記してありますが、キャッシュの性質上完全な再現とはならずいつ消えてもおかしくないのでリンク切れの際はご容赦ください。



最後に、当サイト『ヤマノス』では、他者の引用がなされたもの以外のすべてをフリー素材として公開しています（当サイトの著作物について）。

ですが、当記事はリラ様の著作物ですのでフリー素材ではありません。
ご注意願います。



文責：秋田LV3





lazyloadとは


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

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


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

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




基本的な書き方



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

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


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




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


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


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

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

  1. <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

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!

tinypng.com
TinyPNG – Compress PNG images while preserving transparency
PNGイメージをオンラインで圧縮する


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

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

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

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

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


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

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




madasanagi_mini.png
まださなぎ © Proudly written by dettalant


StrawMan Template総合案内板へ戻る
関連記事

コメント

コメントの投稿