0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

image_tagを使って画像遅延読み込み

Last updated at Posted at 2024-02-26

image_tagとは?

画像ファイルのリンクを作成できる。

画像遅延読み込みとは?

jsなどのライブラリを用いて画像を非同期読み込みすること。
遅延読み込み用のjsは検索すれば出てくると思うのでダウンロードしておいてください。
ここでは遅延読み込みについて詳しくは触れないので各自調べていただければと思います。
https://technical-seo.jp/lazy-load-javascript-library/

画像遅延読み込みをimage_tagを使って実装する

第一引数に画像ファイルへのパスを指定し、第二引数以降にオプションやHTML属性を指定できる。
第一引数に遅延読み込み用のファイルパスを指定し、第二引数のdate-srcで実際の読み込む画像のファイルパスを記載する。

<=% "遅延読み込み用の画像ファイルパス","date-src"=>"表示させたい画像のファイルパス",altなど... %>

第二引数にはハッシュの形でファイルパスを渡してあげてください。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?