lazyload.js等のライブラリを使わずHTMLのみで画像の遅延読み込みを行う方法
2024/01/16
画像を遅延読み込みさせるとなるとだいぶ前に書いたlazyload.jsを用いる方法が第一候補に出てきそうだけど、JSやCSSは使わずにHTMLのみで実装できるらしい。以下に対応方法をメモ。
リファレンス
https://web.dev/articles/browser-level-image-lazy-loading?hl=ja
サンプル
https://taitan916.info/sample/img_loading/
ページ上部が赤背景になっているのは後述の「ビューポートから2500pxより下側の画像に対して遅延読み込みが効く」に関係している。
ソースコード
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>loading属性のテスト</title>
</head>
<body>
<div style="background: #f00; height: 3000px;"></div>
<div><img src="001.jpg" loading="lazy"></div>
<div><img src="002.jpg" loading="lazy"></div>
<div><img src="003.jpg" loading="lazy"></div>
</body>
</html>
注意点
ビューポートにある画像は遅延読み込みさせない方が良い
リファレンスにも書かれているがビューポートにある画像は遅延読み込みさせ内容が良いとのこと。なのでヘッダー画像等は通常読み込みとし、記事内にあるような画像を遅延読み込みさせるのが良さそう。
遅延読み込みされるのはビューポートから2500pxより下側
サンプルページで色々試したものの遅延読み込みされていないように見受けられ、色々調べてみるとビューポートから2500pxより下側の画像に対して遅延読み込みが効くみたい。
所感
本件で調べているうちに知ったんだけどHTML5は2021年1月28日に廃止されているらしい。全然知らなかったので非常に驚いた。
関連記事
-
-
WordPressのMedia Library Organizerでダイアログ初回表示時のカテゴリを指定する方法
Media Library Organizerを使用中のWPサイトで画像をカテゴ ...
-
-
PHPで画像のフォーマット(拡張子)の変換
画像のアップロードでjpg/png/gif形式を受け付けつつ、 最終的にjpgで ...
-
-
PHPにて「ImageHash」ライブラリを使用し画像の類似度を算出する方法
以前にPHPの「image-comparator」ライブラリで画像の類似度を算出 ...
-
-
PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法
ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...
-
-
smart_resize_imageで縦横の比率関係なく、固定リサイズ
PHPで縦横どちらかが指定の長さを超えた場合、比率を保ったままリサイズで使ったs ...