画面幅の変化(レスポンシブ対応)による画像ファイルの切り替え方法は、複数ありますので、それぞれの特徴を理解して適切な方法で画像切り替えを実施しましょう。
画面幅に合わせて複数の img タグを用意しておいて CSS のメディアクエリ(@media)を用いて切り替える方法です。本方法は、画面幅の変更に確実に追従できるというメリットがありますが、CSS の記述が多くなったしまうと同時にネットワーク負荷が大くなってしまうというデメリットがあります。
HTML
<div class="resize">
<img class="min" src="images/img-800x600.jpg" alt="小さな画像">
<img class="big" src="images/img-1600x1200.jpg" alt="大きな画像">
</div>
CSS
div.resize img.min {
display: none; /* 初期状態は、小さな画像を非表示に設定 */
}
div.resize img.big {
display: block; /* 初期状態は、大きな画像を表示に設定 */
}
@media screen and (max-width: 800px) {
div.resize img.min {
display: block; /* 800pxより小さい時は、小さな画像を表示に設定 */
}
div.resize img.big {
display: none; /* 800pxより小さい時は、大きな画像を非表示に設定 */
}
}
画面幅の変化を確認するために別ウィンドウで表示してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(メディアクエリ(@media)を使用した切り替え)</title>
<style>
body {
margin: 0;
}
.container {
border: #ccc 1px solid;
}
img {
width: 100%;
}
div.resize img.min {
display: none; /* 初期状態は、小さな画像を非表示に設定 */
}
div.resize img.big {
display: block; /* 初期状態は、大きな画像を表示に設定 */
}
@media screen and (max-width: 800px) {
div.resize img.min {
display: block; /* 800pxより小さい時は、小さな画像を表示に設定 */
}
div.resize img.big {
display: none; /* 800pxより小さい時は、大きな画像を非表示に設定 */
}
}
</style>
</head>
<body>
<div class="container">
<div class="resize">
<img class="min" src="images/img-800x600.jpg" alt="小さな画像">
<img class="big" src="images/img-1600x1200.jpg" alt="大きな画像">
</div>
</div>
</body>
</html>
img タグの srcset 属性を用いて複数の画像を用意しておきブラウザに適切な画像を選択してもらう方法です。本方法は、記述が簡単というメリットがありますが、環境に応じた最適な画像選択はブラウザによって異なると同時に画面幅の変更があっても条件に合致した画像の再読み込みが行われない場合がある(キャッシュデータが使用される)というデメリットがあります。このため、用意する画像が同一画像で解像度が異なるだけの場合は、デメリットの影響が少ないですが、画面幅の変化によって異なる画像を表示させたい場合には適しません。
HTML
<img src="images/img-1600x1200.jpg"
srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w"
alt="画像">
画面幅の変化を確認するために別ウィンドウで表示してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(srcset属性を使用した切り替え-1)</title>
<style>
body {
margin: 0;
}
.container {
border: #ccc 1px solid;
}
img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="container">
<img src="images/img-1600x1200.jpg"
srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w"
alt="画像">
</div>
</body>
</html>
img タグの srcset 属性を用いて複数の画像を用意しておき、さらに sizes 属性を用いて画像を選択する条件を指定する方法です。本方法は、記述が簡単というメリットがありますが、画面幅の変更があっても条件に合致した画像の再読み込みが行われない場合がある(キャッシュデータが使用される)というデメリットがあります。このため、用意する画像が同一画像で解像度が異なるだけの場合は、デメリットの影響が少ないですが、画面幅の変化によって異なる画像を表示させたい場合には適しません。
HTML
<img src="images/img-1600x1200.jpg"
srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w"
sizes ="(max-width: 700px) 800px, (min-width: 701px) 1600px"
alt="画像">
画面幅の変化を確認するために別ウィンドウで表示してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(srcset属性を使用した切り替え-2)</title>
<style>
body {
margin: 0;
}
.container {
border: #ccc 1px solid;
}
img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="container">
<img src="images/img-1600x1200.jpg"
srcset="images/img-800x600.jpg 800w, images/img-1600x1200.jpg 1600w"
sizes ="(max-width: 700px) 800px, (min-width: 701px) 1600px"
alt="画像">
</div>
</body>
</html>
picture タグ、source タグを用いて複数の画像を用意しておき、指定された条件によって表示する画像を選択する方法です。本方法は、記述が簡単であり画面の横幅の変化に対して思い通りの表示ができます。
HTML
<picture>
<source media="(min-width: 801px)" srcset="images/img-1600x1200.jpg 1600w">
<source media="(max-width: 800px)" srcset="images/img-800x600.jpg 800w">
<img src="images/img-1600x1200.jpg" alt="画像">
</picture>
画面幅の変化を確認するために別ウィンドウで表示してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(picture/source タグを使用した切り替え)</title>
<style>
body {
margin: 0;
}
.container {
border: #ccc 1px solid;
}
img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="container">
<picture>
<source media="(min-width: 801px)" srcset="images/img-1600x1200.jpg 1600w">
<source media="(max-width: 800px)" srcset="images/img-800x600.jpg 800w">
<img src="images/img-1600x1200.jpg" alt="画像">
</picture>
</div>
</body>
</html>
論理解像度と物理解像度が異なる Retina ディスプレイで表示する時に高解像度の画像に切り替える方法です。本方法を使用することで Retina ディスプレイの性能を最大限に引き出すことが可能になります。
【注意事項】
通常は、同じ画像で解像度が違う画像を用いて切り替えを行いますが、本サンプルでは、表示している画像の違いをわかりやすくするための別の画像を使用しています。
HTML
<img src="images/img-800x600.jpg"
srcset="images/img-800x600.jpg 1x, images/img-800x800@2x.jpg 2x"
alt="画像">
画面幅の変化を確認するために別ウィンドウで表示してください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル(Retina ディスプレイ用の切り替え)</title>
<style>
body {
margin: 0;
}
.container {
border: #ccc 1px solid;
}
img {
width: 100%;
display: block;
}
</style>
</head>
<body>
<div class="container">
<img src="images/img-800x600.jpg"
srcset="images/img-800x600.jpg 1x, images/img-800x600@2x.jpg 2x"
alt="画像">
</div>
</body>
</html>