6.1 srcsetとsizes属性の使用
AppleのRetinaディスプレイのような高密度のピクセルディスプレイは、多くの現代のデバイスの標準になっているね。 こうしたディスプレイは1インチあたりのピクセル数（PPI）が多く、よりクリアで詳細な画像を提供してくれる。 Web開発者にとって、ユーザーの体験を最高のものにするために、こうした画面に最適化されたグラフィックを提供することが重要なんだ。 やり方を一緒に見ていこう。
高密度ディスプレイの問題点
高密度ディスプレイでは、標準的なイメージがぼやけたり、ピクセル化されたりすることがあるのは、 イメージの1ピクセルが画面の複数のピクセルに拡大されるからなんだよね。この問題を解決するには、 より高解像度の画像を使う必要があって、ブラウザがそれを高密度画面で表示するためにスケールできるようにするんだ。
srcsetとsizes属性を使うと、異なるピクセル密度に対して様々なバージョンの画像を指定できるよ。
これによってブラウザが特定のデバイスに最も適した画像を選べるようになるんだ。
srcsetとsizesの使用例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retinaディスプレイ最適化</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Retinaディスプレイ用画像の例">
</body>
</html>
コードの説明:
srcset: さまざまなピクセル密度に対して3種類の画像を指定する (1x,2x,3x)-
sizes: 表示条件に応じた画像の幅を定義する:600pxまで - 画像がビューポートの100%の幅を占める1200pxまで - 画像がビューポートの50%の幅を占める- その他の場合 - 画像がビューポートの
33%の幅を占める
6.2 ベクターグラフィックス (SVG) の使用
ベクターグラフィックス (SVG) は高密度ディスプレイに最適な解決策だよね。SVGファイルはスケールしても品質が落ちないんだ。 ロゴやアイコン、それにインターフェースの他の要素にぴったりだよ。
SVGの使用例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retinaディスプレイ用SVGの使用</title>
</head>
<body>
<img src="images/logo.svg" alt="ロゴ">
</body>
</html>
コードの説明:
src="images/logo.svg": 任意のサイズにスケールできるSVGファイルのパスを指定する
6.3 CSSの使用
背景画像にはメディアクエリとCSSプロパティを使って、デバイスのピクセル密度に応じて異なるバージョンの画像をロードできるようにするんだ。
背景画像にCSSを使った例:
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
コードの説明:
.background: 基本の背景画像を定義する@media only screen and (min-resolution: 2dppx):2x密度の画面用に背景画像を変更する@media only screen and (min-resolution: 3dppx):3x密度の画面用に背景画像を変更する
6.4 picture要素
<picture>タグを使うと、表示条件が異なる複数の画像ソースを指定できるんだ。
これは画像の適応において、より複雑な場合に便利だよ。
<picture>の使用例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retinaディスプレイ用<picture>の使用</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="Retinaディスプレイ用画像の例">
</picture>
</body>
</html>
コードの説明:
<source>: 表示条件に応じた異なる画像ソースを指定する<img>:<picture>をサポートしていないデバイス向けのデフォルト画像を指定する
6.5 画像の最適化例
例1: 高解像度の適応的な画像
高密度ディスプレイに最適化された画像を、srcsetとsizes属性を使って示す例を作ろう:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retinaディスプレイ用適応画像</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Retinaディスプレイ用画像の例">
</body>
</html>
コードの説明:
srcset: さまざまなピクセル密度に対して3種類の画像を指定する (1x,2x,3x)-
sizes: 表示条件に応じた画像の幅を定義する:600pxまで - 画像がビューポートの100%の幅を占める1200pxまで - 画像がビューポートの50%の幅を占める- その他の場合 - 画像がビューポートの
33%の幅を占める
例2: SVGを使ったスケーラブル画像
様々なデバイスで高品質の表示を保証するために、SVGを使用する例を作ろう:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retinaディスプレイ用SVGの使用</title>
</head>
<body>
<img src="images/logo.svg" alt="ロゴ">
</body>
</html>
コードの説明:
src="images/logo.svg": 任意のサイズにスケールできるSVGファイルのパスを指定する
GO TO FULL VERSION