Lazyloadを使ってみる【上級編】

先回までの流れは以下のリンクから 【必読】

picture要素を利用したレスポンシブイメージ

レスポンシブイメージ というのは、多様なデバイス・大小様々な画面に置いて掲載する画像(img要素)をどう扱うかという方法論の総称だと思えば良いと思います。

FC2ブログではパソコン(PC)で見る記事とタブレット(TB)あるいはスマートフォン(SP)で見る記事、それぞれの内容を別で設けるといったことはできません。
ユーザーが書いた記事内容はPC, TB, SP 全デバイス共通となります。
そこで掲載される画像ですが、パソコンの画面は大きいので記事横幅いっぱいにしたければ600〜1000px程度の画像が必要となります。もちろんテンプレートのメインコンテンツの指定幅にもよります。
ところがスマホというのはどう頑張っても横400px程度しかありませんので、果たして1000pxもの画像が必要かどうか ですよね。
画像のサイズが大きくなれば比例して容量も大きくなります。
容量が大きくなればページローディングの負荷が大きくなり、結果表示スピードにも影響が出てきます。

ですが記事に関するhtml内容は繰り返しますがPC, TB, SP 全て共通(共有)です。
じゃあパソコンとスマホで掲載する画像を変えちゃおうよ というのがhtml5の新要素 によるレスポンシブイメージに対する一つの取り組みです。

html5新要素 ですよ。
もうhtml4では時勢に付いていけません。いまだにhtml4やxhtmlテンプレートを使っているという方はまずここをよく考えた方が良いですね。

これまでは画像の「掲載サイズ変更」は指定できても、「原寸の違う画像を切替える」ことはできませんでした。
画像というのは例えば横1000pxで100KBの画像を300pxに指定しても原寸の1000pxと容量100KBは変わりません。
つまり単純に表示を小さくしているだけです。
これからご紹介する picture要素 というのはその「原寸」を変更します。
パソコン用, スマホ用で別の画像を用意して切り替えます。
パソコンでは1000px, 100KBの画像を。スマホでは同じ画像の原寸500px, 30KBのものを、というわけです。

<picture>
  <source media="(max-width: 414px)" srcset="スマホ用画像アドレス">
  <source media="(max-width: 900px)" srcset="パソコン用画像アドレス">
  <img src="パソコン用画像アドレス" alt="">
</picture>

上記が基本コードですが、このままではLazyloadingは使えません。
Lazyloadingなし、html5テンプレートの場合は上記のまま利用できます。

大事な部位は <source> というタグと srcset という属性です。
この2つは見慣れないのではないかと思います。
sourceをimgと間違えたり、srcsetをsrcと間違えて記述すると機能しませんので注意。

htmlではなくCSSのスタイルシート内に media という文字列を発見することがあります。
CSSではいわゆる ブレイクポイント といって、画面幅の切り替えを示します。
それをhtml要素内に利用し、CSSのような感覚で画面幅に応じて 適用する画像アドレスの切り替えを行います。

<picture>
  <source media="(max-width: 414px)" srcset="" data-srcset="スマホ用画像アドレス">
  <source media="(max-width: 900px)" srcset="" data-srcset="パソコン用画像アドレス">
  <img src="" data-src="パソコン用画像アドレス" alt="" class="lazyload">
</picture>

Lazyloadingを利用する場合には上記の内容を おすすめ します。
あくまでも「おすすめ」であって、あるいは人によってはもう一つsourceを追加したい場合や、別のアプローチを選択したい場合もあるかもしれません(後述)

上記内容はひな形として辞書登録しておくとすぐに呼び出せて便利です。
で、これまでの記事に沿って「Lazyloadingのソースを書くにあたっての個人決定」となる部分が src属性をどうするか ですね。

• src属性は 書かない
• src属性の値に dataURI または 極小透過画像(便宜上「スペイサーgif」と称す)を代入

上記をどうするか決めて頂いていると思いますので、今回もその決定に沿った使い方をしてください。

1 を選択した方
picture要素内のsource要素内 srcset 属性とimg要素内 src 属性を 削除 してください。
削除にあたり属性間スペースの有無に注意。
また、既に説明済ですが今回もやはり構文エラーになるという点を念頭に。

2 を選択した方
picture要素内のsource要素内 srcset 属性とimg要素内 src 属性の値に dataURI または スペイサーgif を入れてください。
dataURIのおすすめは

data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==

です。この文字列を入れた状態ではとても辞書登録はできないと思いますので、「dataURLも個別で辞書登録しておいてください」というのはこういうときのためです。
上記ソース内容の場合には 3箇所 入れることにになりますので常に頭に置いてください。

srcset属性でできること

雛形として掲載した内容の説明をしますと以下の通り。

• パソコン用とスマホ用の2種設定のみ(タブレットはパソコン用と共有)
• デバイス(またはブラウズ)画面サイズに応じた切り替え

これが FC2ブログ上での個人的推奨内容 です。
「FC2ブログ上での」という点が大事。後述します。

picture要素での画像切替はいくつかの視点に基づきます。以下の通り。

• 画面サイズによる切り替え
• 使用デバイスが高解像度ディスプレイ(便宜上 retina(レテイナ)と総称)か否かで切り替え

概ねこの2つ。切り替えについては「pictureでできること」ではなく「srcsetでできること」です。
雛形は前者の「画面サイズ」を目安にする内容です。
後者の「retinaかどうか見分ける」についてですが、これまで何度も記事にしてきたように retinaでは掲載寸の2倍の実寸が無いと画像がぼやける という問題があるわけなんですよね。
なのでretinaでない場合には掲載寸と実寸をほぼ同等にし、retinaだけは倍を想定した実寸画像を用意する、という考え方です。

ところが現在ではもうretinaでないスマートフォンを探すほうが難しいような状況です。
ですからスマホ閲覧の場合に非retinaが適用されることはほとんど無いと考えるとやるだけ無駄な気がしますよね (´・ω・｀)
したがって「画面サイズ」を基準とする内容をおすすめしている次第。
参考までに画面解像度で分ける書き方は以下の通りです。

<img src="通常画面用"
     srcset="通常画面用 1x,
             retina画面用 2x"
     alt="">

picture要素でできること

推奨はpicture要素としてまとめていますが、画像の切り替えだけならば前述した通り img要素の srcset属性 だけで可能です。
その場合には必然的に source要素 も不要となります。
picture要素の定義は 画像リソースの読み込み宣言 と捉えれば良いと思います。
「画像」の「リソース」が記されていますよ、という明示ですね。
htmlは装飾のために利用するのではありませんから、ちゃんと定義について知っておく。

定義は上記の通りとして、見た目の面ではpicture要素のdisplay値は inline ですので、文章や他の画像などが横並びになる点もお伝えしておきます。
ということは センタリング を行いたい場合には以下のような書き方になります。

<div style="text-align: center;">
ここにpicture要素
</div>

掲載サイズの調整についてはpicture終了タグの直前にある img要素 に対しstyle属性をあててください。
例)

<picture>
  <source 省略>
  <source 省略>
  <img src="" data-src="パソコン用画像アドレス" alt="" class="lazyload" style="width: 300px;">
</picture>

またpicture要素では同種画像の実寸違いの他、別種画像の指定も可能です。
パソコンではA画像、スマホではB画像、といった具合です。
以下がサンプルです。デバイス変更またはブラウザサイズ変更で画像が変わりますので確認してみましょう。
パソコンでの確認を想定し、サンプルでは画面幅が600px以下になると変更されるように設定してあります。

注意
スマホで閲覧されている場合はランドスケープモード(横倒し)でご確認ください。
画面が広い時は黄色背景のフォーク画像、狭い時はハンバーガーの画像が表示されるはずです。

こういったことも可能ですが、原則として同じ画像にしておくべきです。
例えばスクリーンショットで、パソコンでは全体を写したもの、スマホでは部分抽出したものを掲載するなどが使い所かと思います。

FC2ブログでのpicture要素使い方推奨

同種画像のサイズ違いを2つ以上準備する ことになるわけですから、途中で息切れしてしまうことも。
毎回自分で編集ソフトなどを利用していたのでは面倒になって放り出したくなることもあります。
いやこの可能性はかなり高いですよ。私なら嫌です(笑)

そこでFC2ブログの サムネイル同時作成機能 を利用するのはどうでしょう。

上記は私の設定ですが、サムネイルサイズを常に 横640px に指定しています。
この数値はスマホ最小機種の 320pxの倍 です。
ホントは最大機種 414px の倍であるところの 828px が適切なのでしょうが、800pxってアータそれもうサムネイルじゃなくね？みたいな (´・ω・｀)
まぁ仕方無いですよね。スマホは高解像度が当たり前になってますのでどこかで折り合いをつけないと…。
というわけで私の折り合いはこの640pxという数値です。

で、横長 の画像のみを想定しています。縦長は度外視。
というのはFC2ブログのこのサムネイル作成機能、縦幅指定のマックスは 999px です。
それを超えたらもうサムネイルは作れません。

サムネイルの機能を利用した場合、原画の拡張子直前に小文字の s をつけるだけです。
アップロード画面から本アドレスをコピー、貼り付けた後にsを加えるだけ。
例)
sample123.jpg --- 原画
sample123s.jpg --- サムネイル
これなら最小限の手間で済みませんか？どうでしょうか (´・ω・｀)
ここを上手に利用すれば記事を書く際にもメンタル殺られるほどの大仕事にはなりません。たぶん。

source要素を「パソコン用」「スマホ用」の2種に限定しているのはこのためです。
タブレットの場合はパソコン用に含めても問題ないと思いますし。
ただdataURIを利用する方はソースの見た目がぐっちゃぐちゃになって泣きそうになるかも。まぁそれも慣れですが。
あとはスマホ最大機種は今のところ 414px だと思うのですが、将来的にはわかりません。
ですから余裕を持って 420px とかにしておいても良いかもです。
その場合はサムネイル作成サイズももう少し大きめで。
しかし厄介だよなぁretina画像問題。新拡張子heicの推進はよ。
といってもめっちゃ効果アリってわけでも無いように思いますが。

picture要素のまとめ

FC2ブログ内での使いこなし提案など交え説明しました。
htmlレベルでのレスポンシブイメージというのはかなり画期的ではあるんですよね。
htmlというのはそこに書かれていれば必ずローディングが行われるというのが常識です。その点でCSSとは違う(後述)
でもこのsrcset属性の登場によって、条件に合致していないものは読み込まない というのが可能になりました。
うーん。すごいね (´・ω・｀)

できそうだな、と思った方は積極的に利用していくと良いと思います。自分のキャパや牛乳に相談。
だって現在のOGPの推奨は横1200pxじゃないですか。OGP対象でなくても1000とか1200あたりにしていないとパソコンの4Kや5Kについていけない。
でもなんぼなんでもスマホで1200pxも要らんやろ。スピードにも影響するし。
と、そんなときに有効な手法です。
Lazyloading入れてたらあんま関係ないっちゃ関係ないかもしれんけどねぇ (´・ω・｀)

Lazyloading用ブックマークレット

以降のブックマークレット2種については dataURI入力の手間を省く ことを目的としています。
目的が合致する場合にのみご利用ください。

以前から配布しているものと全く同じ内容ですが、jQueryのバージョンを上げてあるのと dataURIを代入してあるlazyloading用html になってます。
dataURIは文字列が長く、最初から入ってたほうが便利かと思いますので切り替えをおすすめします。
記事内でLazyloadingを利用していない方は変えないでくださいね。機能しなくなってしまいますので。

通常版(自身のサイト内での利用など)
ブログカード

引用版(第三者のサイトからの引用)
引用ブログカード

Lazyloading記事作成手助けブックマークレット

記事の編集時、画像の記載がある場合に一括でLazyloading用記述に変換します。
こちらは FC2ブログエディターのツールバーを利用した画像の掲載を行っている 方限定です。

2020.8.5
ブックマークレットのコード内容を一部変更しました。機能しなくなった、という方は再取得をお願いします。

Lazy変換

Lazy用ブログカードブックマークレットとの併用不可

上記のLazyloading変換ブックマークレットで作成したブログカード内にある画像も反応し、二重記載になってしまいます。
当該ブックマークレットとブログカードブックマークレットを併用したい方は旧タイプのブログカードブックマークレットの方をご利用ください。

border属性は自動で取り除きます。

既に廃止された属性ですので不要と判断し自動削除するようになってます。
末尾のスラッシュも本来は不要ですが、xhtmlの場合には逆に必須ですので、無理に取らずに温存してあります。
といっても配布対象は私のテンプレートを利用されている方が主ですのでxhtmlなわけがないのですが(笑)
汎用的に使えないわけでもないので一応こういった処理にしておきます。

元に戻すためのブックマークレットは作成していません。

元に戻せませんので、記事の最終チェックを済ませてから思い切ってクリックしてくださいね。
心配な方は画像を入れるたびにクリックしても良いかと思います。そこはお好きにどうぞ。
くれぐれもブログカードブックマークレットの組み合わせには注意。

クラス名の重複に注意

元の内容にクラス名が含まれている場合、ブックマークレットクリックによってクラス名重複が起こります。
追加クラスはブックマークレット利用後に行うようにしてください。

画像掲載が多く、全てをエディターツールに頼っている方にとってはかなり作業が楽になるかと思います。
記述の難易度でLazyloadingを敬遠しているのならば是非ご利用ください。

再度スムーススクロールと相性の悪い件について

スムーススクロールと相性が悪い 点について再度触れておこうと思います。

なんとかならんもんか、どうにかできんもんか、と色々探す方も居るのではないでしょうか。
どうにもなりません。
このどうにもならないという結論をお伝えしておかないことには時間を浪費させることになってしまいます。

スムーススクロールは簡単に言うと「出発点から到達点までの距離を計算する」ことが主体となります。
つまり「縦幅」ですよね。
ところがLazyloading画像がある場合、縦幅は未定です。
スクロールしてようやく画像が出てくるわけですからスムーススクロール起動時に正しい計算ができません。

では元画像のwidth, height属性を明示しておくのはどうか。
レスポンシブデザインの場合は画面幅の変更に対処しなければいけませんので、画像の幅はCSSで max-width: 100% が指定されています。
そうしないと記事から画像がはみ出してしまいます。
例えば元画像が width="1000" height="500" だった場合。
記事幅が500pxになった場合、width属性の1000pxを打ち消して横幅は500pxになります。
このときの縦サイズですが、横幅に調整が入った際には height: auto を指定しておかないと元の指定である height="500" が居残って画像は歪んでしまいます。
伸縮が起こっても画像の縦横比を正しく表示するためには上記CSS内容が必須です。

ところがLazyloadingの場合、DOM構築時の対象画像は元の画像ではなく代替となるdataURIあるいはスペイサーgifですよね。
そしてそのサイズは 1×1 です。
width="1000" height="500" が打ち消されて max-width: 100%; height: auto; がかかったらどうなるでしょうか。
正方形 になりますよね。
元画像の参照なのですから、元画像であるdataURI, スペイサーgifが正方形ならば当然正方形での計算になります。
スクロールが行われ、本来の画像が表示される際には正方形ではありませんので、またそこで再計算され横長画像ならば縦が短く、縦長であれば縦が長く変更されるわけです。
こういう仕組みによってスムーススクロールでの到達位置がずれる、と。

これをどうにかしようと思えばきっぱりLazyloadingかスムーススクロールのいずれかをやめるか、リンクをクリックしたら時間を少しずらしてheightの再計算を行うか。
Lazyloadingは負荷を下げるために行うのですから、JSを増やしたのでは本末転倒です。従って現実的ではないという結論。

他にはimgをdivなどで囲い、そのdivで縦横比を決定してしまう。
imgはその中に object-fit: cover でもって入れ込むという方法もあります。
がこれも現実的ではないですよね。だってそんなのいちいちやりたくないでしょう？(笑)

というわけでこの両者は犬猿であるという結論をこれといった対策もなくお伝えしておきます。

htmlのimg要素とCSSのbackgroundプロパティの違い

画像を「表示」するには必ず通信リクエストが発生します。
Lazyloadingというのは画像の通信リクエストを分散させることを目的としています。
それが結果的にページスピードの向上に繋がるというわけですね。

では

<img src="https://xxx.jpg">

と記されたhtmlのimg要素としての画像と

.yyy {
  background-image: url(https://xxx.jpg);
}

との違い。この場合はいずれも通信リクエストが発生しますので大差はありません。
では以下の比較ではどうでしょう。

<img src="https://xxx.jpg">

@media screen and (max-width: 700px) {
  .yyy {
    background-image: url(https://xxx.jpg);
  }
}

CSSの方は 画面が700px以内ならば という条件がついています。
この内容で画面幅が1000pxだった場合、CSSの方は通信リクエストが発生しません。
条件に合致した場合のみリクエストが行われるんですね。
CSSのこの特徴を知っておくとまたいろいろ改善できるかもしれません。
このCSS特性を擬えているのが今回ご紹介した picture要素 による画像掲載です。
ただし「この画面サイズでは画像なし」という条件分岐はできません。CSSはそれもできます。

FC2ブログには元画像のURLを取得する変数はあるのですが、サムネイルのURL「だけ」を取得する変数がありません。
300×200 と 72×72 のサムネイルがあるにはありますが、いずれもimg要素 の出来上がりで返って来てしまうんですね。
この要素への属性追加や操作などはできませんのでLazyloadingも使えません。そしてalt属性がついていませんので構文エラーです。
このサムネイル2種を要素で出力するのではなくURLのみ返してくれるともっと良い結果が出せるのですが。
あと72四方は はっきり言って使えない。スマホ版のトップはこの72pxサムネがほとんどですが、ぼっけぼけで不明瞭なので最低でも150pxぐらいに変更したほうが良いと思います(笑)
現にはてなブログはサムネイルサイズの見直しがありましたよ？

というわけで長くなりましたが、Lazyloadingに関する記事は最終となります。
あとはFC2ブログでのページスピードに関する考察を後日まとめようかな、と。
最後までお読み頂いた方、お疲れ様でした (o'ω')ﾉ

追記 2018.7.10

スムーススクロール(ページ内スクロール)とlazyloadingの共存を目指す方は以下の記事をお読みください。

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

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

vanillaice000.blog.fc2.com

Instruction Lazyloading Lazysizes VanillaJS 高速化 上級者向け