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日に廃止されているらしい。全然知らなかったので非常に驚いた。
関連記事
-
-
PHPで画像アップロード、リサイズ、形式変換(jpg->webp等)はclass.upload.phpが便利
今までPHPで画像関連の処理を行う場合、リサイズの時のみsmart_resize ...
-
-
Lightboxで文字をクリックしたら画像を表示させる方法
Lightboxを使用する際、一般的に使われているのはサムネイル画像をクリックす ...
-
-
PHPでダミー画像(プレースホルダー画像)を表示する「PHP-Dummy-Image-Generator」の利用方法
先日JavaScriptでダミー画像(プレースホルダー画像)を表示する「Hold ...
-
-
WordPressのMedia Library Organizerでダイアログ初回表示時のカテゴリを指定する方法
Media Library Organizerを使用中のWPサイトで画像をカテゴ ...
-
-
PHPでjpg / png画像をWebP画像に変換し保存する方法
PHPでjpg / png画像を圧縮したかった。ただjpg / pngのままだと ...