July 7th,2020
＃
“imagesrcset”属性について
“imagesrcset”属性は使用可能な画像ファイルのセットを示すための属性です。レスポンシブな画像を埋め込むのに使用します。
“img”要素や“picture”要素、“image-set()”関数で埋め込むレスポンシブイメージを“rel”属性の値に“preload”を指定された“link”要素で先読みさせる時に使用することができます。
“imagesrcset”属性と“href”属性の少なくともどちらかを指定する必要があります。“imagesrcset”属性と“href”属性をどちらも指定していない“link”要素はリンクを表さず、無意味なものになります。
＃
指定できる値
| 属性値 | 説明 |
|---|---|
| URL 画像の横幅w,URL 画像の横幅w,... | ビューポートの横幅ごとの表示する画像のURL |
| URL デバイスピクセル比x,URL デバイスピクセル比x,... | デバイスピクセル比ごとの表示する画像のURL |
値は“img”要素や“picture”要素の子要素となる“source”要素の“srcset”属性の値と同じです。
＃
サンプルコード
幅記述子で指定
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="preload" as="image" href="sample-640.png" imagesrcset="sample-320.png 320w, sample-640.png 640w, sample-1280.png 1280w" imagesizes="50vw">
<link rel="stylesheet" href="css/stylesheet.css">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
<img src="sample-640.png" srcset="sample-320.png 320w, sample-640.png 640w, sample-1280.png 1280w" sizes="50vw" alt="サンプル画像">
...
画素密度記述子で指定
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="icon" href="image/favicon.ico">
<meta name="robots" content="index,follow">
<meta name="keywords" content="バナナ,栄養素,産地">
<meta name="description" content="黄色くて栄養満点な果物であるバナナについて解説します。">
<link rel="preload" as="image" href="sample-640.png" imagesrcset="sample-320.png 1x, sample-640.png 2x, sample-1280.png 3x">
<link rel="stylesheet" href="css/stylesheet.css">
<title>黄色いフルーツバナナ - 果物を食べる</title>
</head>
<body>
...
<img src="sample-640.png" srcset="sample-320.png 1x, sample-640.png 2x, sample-1280.png 3x" alt="サンプル画像">
...
