pictureタグの中にWebPとJPGをいれてLazy Loadを実行する:メモ

Cat WEBサイト構築 by cubismer

理解がぼんやりしていたので調べて試したのでメモとして。

実現したいこと

  • WebPを使う
  • picture要素でimgタグもいれる
  • Lazy Loadを使う

サンプル


<picture>
  <source type="image/webp" data-srcset="./images/example.webp">
  <img class="lazyestload" data-src="./images/example.jpg" src="./images/placeholder.png">
</picture>

<script src="./js/lazyestload.js"></script>

Lazy Loadの実装には「Lazyestload.js」を使う想定です。詳細は以下URLで。

WebPを一括変換する

WebPの変換にはいくつか方法がありますが以下のような懸念点がありました。

  • オンラインは一括でできるものがほとんどなく、あっても時間がかかる(有料版があるのでそのための制限かも)
  • ターミナルから実行できるcwebpなどはスクリプトを入力するのが多少手間

そこで以下の方法にしました。

  • PhotoshopにWebP用のプラグインを入れて、ドロップレット作って使用

準備さえできれば、あとはドロップレットトにまとめてドラッグするだけで変換できるので、設定後はかなり楽でした。

ただし、圧縮具合をあとで変更できないので、圧縮度合いごとにドロップレットを作成する必要があり、細かくやればやるほど準備は面倒になってきます。

Photoshop CC 2019のドロップレット用アクションの作り方

以前とは少し違ったように思うので、一応メモ的に。

  1. Psを起動し、適当な画像を開いておく(画像はなんでもよい)
  2. 「アクション」パネル下部から新規アクションを作成して、記録ボタンを押す
  3. 目的の画像をPsのアイコンにドラッグして開く
  4. 「別名で保存」を押し、WebPを選んで保存
  5. 目的の画像を閉じる
  6. 記録を終了する

ファイルの開閉まで含めることで一連の操作が楽にできるようになりますが、「開く」をアクションに含めるには上記の1の操作が必要になります。

1がないとPsの初期画面が開いてワークスペースが開かず、アクションパネルも開けず記録ボタンが押せません。

IEのpictureとWebP対応

IEはWebPに対応していませんし、pictureタグにも対応していません。

一見対応が面倒そうですが、pictureもsourceも無視されるだけのようなで、併記しているimgタグの方にLazy LoadをつければIEでも意図した形にできました。

Lazy LoadをLPに使う場合の留意点

主題とは少しずれますが、楽天型といいますかほぼ画像だけでLPを作成している場合、意図した動作になりにくい状態です。

ファーストビューのその下あたりの画像はLazy Loadなしで普通に表示させ、あとはLazy Loadを利用する形になると思いますが、それでも以下のような問題があります。　

  • Lazy Loadのトリガーとなる要素が団子状態で存在しやすく、一気に全ての画像が読み込まれてしまう
  • トリガー密集状態で発火すると、最下部の画像が一番最初に読み込まれる模様

「Lazyestload.js」の場合は参考URLに書いたコリスさんの記事のように仮画像を設定してという方法もあるのですが、それでも「多少段階的に表示される」という状態が精一杯に思います。

なにせ画像しかないので、トリガーとなる要素の下には同じくトリガーとなる要素が連続しているためです。
スクロール速度によっては複数のトリガーがほぼ同時に発火することを防げません。

表示ずれの可能性も考えると、一気に表示されてしまった方がまだ安全ではと考えています。
Lazy Loadというより単なるスクロールをトリガーにした一括遅延表示という状態ですが。

結び

WebPは便利だと思いますが、圧縮を強めるとjpgのようにテキスト周辺の劣化が目立ちましたので、相変わらず軽量化と劣化はトレードオフだという印象がぬぐえません。
同じ劣化具合でも軽量になるだけWebPの方が良いですが。

ただしWebPはiOS(iPhoneやiPadなどなど)やSafariには未だにサポートされていないようで、結局それらのOSやブラウザでは使えず、iPhoneの比率が高い日本においては微妙な状況です。

IEに関してはもう対応されることもないでしょうし、IEを気にするのであれば今後もWebPを使う際の一手間は消せません。

参考

4人がこの記事を評価

役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。

連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。

コメント欄