July 7th,2020
＃
“imagesizes”属性について
“imagesizes”属性は“imagesrcset”属性で指定されて読み込まれる画像の表示サイズを指定します。
“img”要素や“picture”要素で埋め込むレスポンシブイメージを“rel”属性の値に“preload”を指定された“link”要素で先読みさせる時に使用することができます。
“imagesizes”属性は“imagesrcset”属性を幅記述子を使用して指定した場合にのみ指定できます。それ以外の場合“imagesizes”属性は無視されます。
＃
＃
サンプルコード
<!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="サンプル画像">
...
