Lazy loadingにLQIP画像を利用してユーザービリティを高める

投稿 2018年07月20日
8
カスタマイズ
LazyloadingLazysizesHTMLResponsiveTips高速化上級者向け

FC2ブログLazysizesを利用していることを前提とした記事です。

画像のLazyloadingではオリジナル画像が出てくるまで閲覧者が画像の存在に気づかない場合があります。
初期表示にLQIP(Low Quality Image Placeholder, ロー クオリティ イメージ プレイスホルダー)を設定しておくと、その問題点を緩和することができます。

使用前提

以下のリンク先の内容に沿った形での掲載方法を記します。
今回はユーザビリティ改善のための記事なので、組み合わせることをおすすめします。

Lazyloadingでページ内スクロールの到達位置がずれる件を解消する方法 - カスタマイズ

正直あんまりおすすめではない (´・ω・`) すすめない理由は 要素が増える めんどくさい 記事内でstyle属性あるいはstyle要素を必ず使う必要がある pタグ内の画像はどうする(セマンティクス面) ...

LQIP lazy loading サンプル

LQIP + Lazysizes サンプル

効果がわかりづらい場合は リロード を行ってください。
画像がぼやけた状態(blur)からオリジナル画像がゆっくり表示されるはずです。

LQIPというのは「解像度の低い画像」を敢えて用いますので、そのまま表示していたのでは見苦しいだけです。
そのためにCSSでblur(ぼかし)を利用します。
lazysizesのis.blurプラグインはオリジナル画像の前にLQIPをblurのかかった状態で表示させ、オリジナル画像へ切り替えるという段階をサポートする機能です。

ただしLQIP画像の「作成」まではできませんので、画像についてはご自身で準備する必要があります。is.blurプラグインはあくまでも画像切替とblur適用を担うだけです。

導入方法

スクリプトファイル追加

Lazysizesの作者様から便利なプラグインが提供されており、せっかくなのでそちらを利用します。

CDNを利用する場合
以下のリンク先からURL末尾に ls.blur-up.min.js の付くものを取得。
CDNJS

ダウンロードする場合
以下のリンク先から ls.blur-up.min.js をダウンロード。
Lazysizes/ plunins

ダウンロードする場合はLazysizes本体ファイルや別途プラグインなどを一つのファイルにまとめると良いですね。
asyncの指定をお忘れなく。

<script async src="ここにファイルアドレス"></script>

CSS追加

.ls-blur-up-img {
  filter: blur(10px);
  opacity: 1;
  transition: opacity 1s, filter 1.5s;
}

.ls-blur-up-img.ls-inview.ls-original-loaded {
  opacity: 0;
  filter: blur(5px);
}

html

lazyloading画像をimg要素のみで表示させる場合、picture要素を用いてビューポートに合わせたアートディレクションを行う場合、などパターンは様々ですが、基本は共通です。

img要素内 data-src属性 の前に data-lowsrc="ここにLQIPアドレス"追加 します。
picture要素の場合はsource要素などを含んでいますが、source要素ではなくimg要素のみでOKです。

picture要素の例(src及びsrcset属性の値は省略しています)

<picture>
  <source media="(max-width: 414px)" srcset="" data-srcset="小画像サイズアドレス">
  <source media="(max-width: 900px)" srcset="" data-srcset="大画像アドレス">
  <img src="" data-lowsrc="ここにLQIPアドレス" data-src="大画像アドレス" alt="" class="lazyload">
</picture>

LQIPの作成

ここが今回の一番の肝になる部分です。
自分で画像を準備する必要がありますので、作業工程が多すぎると息切れしてしまいます。
加えて、なるべくFC2内に滞在する ことも目指す(笑)
結局いろんなサービス・いろんなタブを行き来するのってものすごくめんどくさいんですよ。
拠点を定めた作業ができると労力を減らすことに繋がります。

ソフトなりオンラインツールなりで画像のサイズを変更する環境を自分で既に持っているという方は、短辺10〜30px程度 で別画像を作成してください。
長辺ではなく短辺の方です。横長画像ならば「高さ」の方ですね。
短辺10pxがもうぎりぎりかなぁと思います。
出来上がりの画像は圧縮をしてください。どのみちぼかしますのでギリギリまで容量も削減します。
400B前後が目安になると思います。
そのLQIPをアップロードするかは今は保留(後述)

ソフトを持っていない場合にはオンラインツールのみで済ませるようにします。
ここからは提案です。

サムネイル同時作成機能を利用する

私なりに作業効率の流れを考えてみました。
FC2ブログアップローダーの機能 サムネイル同時作成 を利用するのが最も手っ取り早いのですが、picture要素を利用しているという方についてはスマホ用小サイズ画像の割当で既に使っている可能性がありますのでこの方法は潰れています。
picture要素なんて使ってないよ、という方はこの機能で作ってください。これが一番簡単で一番効率的な方法です。

アップロード画面のサムネイルをドラッグ&ドロップで取得、FC2画像縮小 を利用する

FC2画像縮小
注意点は 縦横比を保って縮小する場合は「横サイズ」の指定が必要 な点です。
横長画像の場合は縦の方が「短辺」になりますが、横を指定しないといけない。
大体横50〜60pxぐらいにしておけば良いかなぁ、と思います。厳密にやるとそれこそ疲れてしまいますので。

出来上がり画像はやはり圧縮を行ってください。

LQIPをアップロードするかテキストデータ(dataURI)に変換するかを選択

「LQIPを作成したら圧縮する」というのはこの作業を前提にしています。
dataURI化する場合、圧縮前・圧縮後では文字数が全然違います。

圧縮前 横15px 縦10px 4KB 5343文字

data:image/jpeg;base64,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

圧縮後 横15px 縦10px 427B 595文字

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCIfIiEmKzcvJik0KSEiMEExNDk7Pj4+JS5ESUM8SDc9Pjv/2wBDAQoLCw4NDhwQEBw7KCIoOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozv/wgARCAAKAA8DAREAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAABQQG/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwT/2gAMAwEAAhADEAAAAGprL0PUKAJp/8QAIxAAAQIFAwUAAAAAAAAAAAAAAwECAAQFERIhImEGFDE1wv/aAAgBAQABPwCmBnhGbUBUh5EE7GzGI0mS+VS9tObRL9lNASn1kaiKivI9DP2ru0x15gfykdaesGsf/8QAGREAAgMBAAAAAAAAAAAAAAAAAAIBAxAR/9oACAECAQE/AEr4TjH/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIDEBH/2gAIAQMBAT8AvL0T1J//2Q==

htmlで5000文字ものURLを扱いたくないですよね (´・ω・`)

dataURI スキーム変換 Tiny PNG

dataURIに変換する場合にはアップロード不要になりますのでストレージを消費しませんし、10〜50px前後の画像であればhttpリクエストが発生しない点も合わせると利点と言えると思います(ただし画像と違いキャッシュは効きません)

まとめ

最後にhtmlソースコードをまとめておきます。
条件は lazysizes + 事前の縦横比指定(スクロールずれ解消) + LQIP
注!) LuminousとLQIPの併用は見た目にほとんどわからないのでおすすめしません(無駄になるから)

サンプル情報

略名 正規の値
縦原寸
オリジナル画像縦幅
666
横原寸
オリジナル画像横幅
1000
パソコン用アドレス
PC用オリジナル画像
https://blog-imgs-115.fc2.com/v/a/n/vanillaice000/san-francisco-cable-car-on-sunny-california-street-picjumbo-comth.jpg
スマホ用アドレス
SP用オリジナル画像
https://blog-imgs-115.fc2.com/v/a/n/vanillaice000/san-francisco-cable-car-on-sunny-california-street-picjumbo-comths.jpg
dataURI
(バリデートエラー避け)
data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
LQIP
(dataURI)
data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wgARCAAKAA4DAREAAhEBAxEB/8QAFAABAAAAAAAAAAAAAAAAAAAABv/EABYBAQEBAAAAAAAAAAAAAAAAAAMEAv/aAAwDAQACEAMQAAAAWw0g007LQiov/8QAKBAAAQIEAwgDAAAAAAAAAAAAAwECAAQGExIVIgUHERQhJTEyQmKS/9oACAEBAAE/AKF2+fkRZyCyYttlxnzcvrpjefUHd9EsLB9zdfykUkcx2S18pCefdyrFcysvmZn2BY1KvF2BI//EABcRAAMBAAAAAAAAAAAAAAAAAAABAhH/2gAIAQIBAT8AhjnSBH//xAAXEQEBAQEAAAAAAAAAAAAAAAAAAhEB/9oACAEDAQE/ALlucWp//9k=

上記については正規の値の記載を省いています。
正規の値さえ判ればあとはコピペで掲載できます。

Lazyloadingでページ内スクロールの到達位置がずれる件を解消する方法 - カスタマイズ

正直あんまりおすすめではない (´・ω・`) すすめない理由は 要素が増える めんどくさい 記事内でstyle属性あるいはstyle要素を必ず使う必要がある pタグ内の画像はどうする(セマンティクス面) こんなところでしょうか。 ...

画像をp要素にするかfigure要素にするか - webのあれこれ

画像のマークアップ についてです。 マークアップ = htmlなどによる文書構造の意味付け・定義付け 「日記を書いています」「日々の出来事を楽しく更新しています」という方は無理する必要はありません(と個人的に思う) 無理したら楽しいことが楽しくなくなる (´・ω・`) ...

基本コード(img要素掲載)

<div style="max-width: 表示横幅最大値px;">
<div class="aspect-box" style="padding-top: calc(縦原寸 / 横原寸 * 100%);">
<img src="dataURI" data-lowsrc="LQIP" data-src="パソコン用アドレス" class="lazyload" alt="">
</div>
</div>

アートディレクション(picture要素掲載)

<div style="max-width: 表示横幅最大値px;">
<div class="aspect-box" style="padding-top: calc(縦原寸 / 横原寸 * 100%);">
<picture>
<source media="(max-width: 414px)" srcset="dataURI" data-srcset="スマホ用アドレス">
<source media="(max-width: 900px)" srcset="dataURI" data-srcset="パソコン用アドレス">
<img src="dataURI" data-lowsrc="LQIP" data-src="パソコン用アドレス" class="lazyload" alt="">
</picture>
</div>
</div>

アートディレクション(picture要素掲載) + 画像タイル

<div class="imgBox">
<div class="box">
<picture>
<source media="(max-width: 414px)" srcset="dataURI" data-srcset="スマホ用アドレス">
<source media="(max-width: 900px)" srcset="dataURI" data-srcset="パソコン用アドレス">
<img src="dataURI" data-lowsrc="LQIP" data-src="パソコン用アドレス" alt="" class="lazyload">
</picture>
<picture>
<source media="(max-width: 414px)" srcset="dataURI" data-srcset="スマホ用アドレス2">
<source media="(max-width: 900px)" srcset="dataURI" data-srcset="パソコン用アドレス2">
<img src="dataURI" data-lowsrc="LQIP2" data-src="パソコン用アドレス2" alt="" class="lazyload">
</picture>
<picture>
<source media="(max-width: 414px)" srcset="dataURI" data-srcset="スマホ用アドレス3">
<source media="(max-width: 900px)" srcset="dataURI" data-srcset="パソコン用アドレス3">
<img src="dataURI" data-lowsrc="LQIP3" data-src="パソコン用アドレス3" alt="" class="lazyload">
</picture>
</div>
</div>

はてなブログの【写真をタイル状に並べる】をFC2でやってみよう - カスタマイズ

はてなブログさんの機能パクりというか。 まぁ、パクリ…(笑) つってもweb上では当たり前にあるレイアウトですが、やろうと思った(紹介しようと思った)のははてなさんの機能紹介を見たからなのである意味パクりかもしれんな (´・ω・`)...

画像タイルの場合には性質上、事前に縦横比が決まります(原寸依存ではなく全て同一に揃えます)ので .aspct-box などのラッパーは不要です。

YOU MAY ALSO LIKE
もっと見る
vanillaice (Akira)
vanillaice (Akira)

8 COMMENTS

There are no comments yet.

ロビンソン  

お世話になります。

>画像のLazyloadingではオリジナル画像が出てくるまで閲覧者が画像の存在に気づかない場合があります。

これは少し気になっていたので、今回の記事も大変参考になります。

記事内のサンプルにもある画像をタイル風に並べる場合ですが、縦横比はcssに依存するため、元画像の縦横比とは異なる場合が多くなります。
単純に元画像を縮小するかタイル風に並べた状態の縦横比を計算して縮小するのとで、見た目などに違いが出てくることはあるのでしょうか?

利用方法と目的から考えると、個人的にはそれほど気にする必要はないように思いますが、お聞きしないとやっぱり心配なので(笑)

テンプレートはClassicaです。

2018/07/22 (Sun) 18:03
vanillaice (Akira)

Akira  

To ロビンソンさん

こんばんは (o'д`o)ゝ

> 単純に元画像を縮小するかタイル風に並べた状態の縦横比を計算して縮小するのとで〜

えと。ちょっとよくわからないんですが、何と何の比較でしょう。

単純に元画像を縮小 = 縦横比は勝手にオリジナルを踏襲

タイル風 = オリジナルの縦横比は踏襲しない

スクロールズレ解消掲載 = オリジナル縦横比を自動計算 = オリジナルを踏襲

と、それぞれ用途が異なります。
タイルは明らかに見た目は違いますよね。
極端な話、縦長画像も横長で表示されるわけなので。

タイルはオリジナルの縦横比は守りません。他の画像と全く同じ形で表示することを目的にしているのでそれぞれの画像が自己主張してしまえば揃わなくなりますよね。

結局何をやっているかというと、予め縦横比を指定するというのはつまり画像の占有面積が決まる、ということです。
占有面積が決まっていればスクロールでズレることがありません。
タイルの場合は個々の画像の持っている本来の縦横比を無視して、他の画像と同じに揃えているってことですね。
なので明らかに見た目は違います。

こういう回答で合ってるのかしら (´・ω・`)

2018/07/23 (Mon) 02:27

ロビンソン  

To Akiraさん

すいません、伝わりにくい書き方をしました。

タイル画像のLQIPを生成する時に、縮小するサイズの指定で
①元画像の縦横比のままで縮小してもいいか
②タイル風に並べた状態の縦横比で縮小するか

この違いについての質問でしたが、実際に試したところ①でもOKみたいでした。

2018/07/23 (Mon) 10:26
vanillaice (Akira)

Akira  

To ロビンソンさん

LQIP作成のことでしたか。
元画像で作ってください。

> ②タイル風に並べた状態の縦横比で縮小するか〜

これですが、タイル状での縦横比ということは必然的に「スクリーンショット」ということになりますよね。
(右クリック保存及びドラッグ&ドロップでの保存は元画像のDLと同じです)
FC2アップローダーにアップロードしているということはオリジナル画像を所有しているということですから、それを元に作成するのが一番早いと思います。スクリーンショットを撮る作業などは無駄というか (´・ω・`)

それから、私が作ったタイル並べのCSSはデフォルトだと画像のオブジェクトを中央に合わせています。
場合によっては上や下に合わせたい場面も出てくると思いますのでそういったケースを考えてもオリジナルで作成しておくのがベストです。

もしかしてこのお返事もずれてますかね(笑)
画像編集の縮小は通常は縦横比指定ではなく横・縦のいずれかのサイズ(px)を指定して「縦横比を維持する」にチェック、とかそんな感じだと思いますので、縮小画像作成時に縦横の比率を求められることは稀だと思います。
ロビンソンさんがお使いのツールがわかりませんのではっきりとは言えませんが (´・ェ・`)

2018/07/23 (Mon) 16:26

ロビンソン  

To Akiraさん

ご回答ありがとうございます。
元画像で作ります・・・と言うか、作り終えました(笑)

タイル画像の縦横比について補足です。
例)元画像が横640pxで縦480pxだと縦横比は75%ですが、タイル風に並べてcssで縦横比を65%にしていた場合、スクリーンショットでなく元画像を上下それぞれ5%ずつトリミングしてから縮小するのか迷いました。
縦横比を保持して元画像を縮小すると20✕15で、トリミングしてから縮小すると20✕13のような違いを知りたくての質問でした。

>タイル並べのCSSはデフォルトだと画像のオブジェクトを中央に合わせています。

これも重要なポイントで、だからこそ私が迷ったような事は必要以上に気にする意味はないですね。

でも、もしタイル画像の縦横比に合わせるほうが良いと言われていたら、全部やろうと思っていました(爆)

2018/07/23 (Mon) 17:54
vanillaice (Akira)

Akira  

To ロビンソンさん

タイルの方法というのは額縁に絵をはめるようなものだと思ってください。
額縁と絵の横幅・縦幅が全く同じならばすっぽりと収まりますが、そうでない場合に額縁をどう選ぶかです。

額縁が絵よりも大きい場合は絵をはめた時にどこかに足りない部分ができますよね。すると額縁の裏パネルが見えてしまいます。
額縁が絵よりも小さい場合は絵のどこかを折るなり切り取るなりしなければ入りません。ですが額縁の裏パネルが見えてしまうようなことはなくなります。

タイルは後者の方法です。
ですが画像を逐一トリミングしていたのでは作業効率はものすごく悪いわけです。
それを良きに計らってくれるのが
object-fit
というプロパティです。
CSSというのは画像などの要素を直接編集せずに上手いことやるのがお仕事です。
object-fitもそうですし、blurもそうです。
もしこれらのCSSが無かったならば、画像を掲載寸に「加工」し、さらにぼかしを入れる「加工」もすることに。
それが大変なのでCSSを使うわけです。
画像の加工はソフトが必要ですが、CSSのコードは文字さえ打てれば誰でも使うことができます(能力の有無は別として)
CSSがある限り「トリミング」という画像加工の概念はほとんど無視できます。というかどうにでもなります。

ただこの記事の主旨は「高速化」です。Lazyloading関連ですからそうですよね。
なんぼCSSでも「画像の容量を小さくする」といったことはできませんので、その点については画像加工が必要になります。

こういう疑問は良いですよね。
疑問や疑念があると本質理解の手助けになります。
考えずに言われた通りにしているだけでは単なる流れ作業になってしまいます。コピペだけで終わる、とか(笑)

2018/07/23 (Mon) 18:28

ロビンソン  

To Akiraさん

分かりやすく解説いただき、ありがとうございます。

>CSSがある限り「トリミング」という画像加工の概念はほとんど無視できます。というかどうにでもなります。

アイキャッチ画像の角丸も、こちらでアドバイスいただいてから画像ソフトでの加工は不要になりました。
また画像をdataURIに変換するという手法も、今回の記事で初めて知りました。
今後も更新を楽しみにしています。

2018/07/23 (Mon) 20:02
vanillaice (Akira)

Akira  

To ロビンソンさん

はい。こちらこそいつもありがとうございます

2018/07/26 (Thu) 01:28

LEAVE A REPLY

テンプレートに関するご質問・不具合のご報告の際はご自身のブログアドレス記載必須です
ご質問の前に 必ずお読みください
テンプレートに関するご質問時のお願い
必ず該当テンプレートの専用記事にお願いします。無関係な記事・別のテンプレート専用記事でのコメントはお控えください。
テンプレートカテゴリ
テンプレート一覧(表示タイプ別)