スマホとパソコンで違う画像を出し分けるようなレスポンシブ対応は今では当たり前になりました。
方法は色々あってCSSでのメディアクエリやJavaScriptの条件分岐での方法が主流かと思いますが、初学者の方には少し難しいのではないでしょうか？
今回はHTMLだけで画像のレスポンシブ対応をする方法を紹介していきますので、初学者の方でも安心して実装できます。
また動画もあるので必要に応じて活用してください。
HTMLで画像のレスポンシブ対応をする方法
結論、pictureタグを使うと画像のレスポンシブ対応をすることができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<picture>
<source srcset="../pc.jpg" media="(min-width: 1025px)" />
<img src="../sp.jpg" alt="" />
</picture>
</div>
</body>
</html>.container {
width: 800px;
max-width: 100%;
}
.container img {
width: 100%;
}pictureタグは画像の切り替えを行うためのタグで、実際の画像の表示はsourceタグとimgタグを使って書きます。
pictureタグのルールとしては3点です。
①sourceタグの下にimgタグを書く
②上から順番に条件に合う画像を表示する
③条件に合う画像がないときはimgタグの画像を表示する
〜省略〜
<!-- 上から試す -->
<picture>
<!-- 1025px以上の画面ではpc.jpgを表示する -->
<source srcset="../pc.jpg" media="(min-width: 1025px)" />
<!-- それ以外の画面ではsp.jpgを表示する -->
<img src="../sp.jpg" alt="" />
</picture>
〜省略〜sourceタグには3種類の属性があります。
srcset : 画像のパスを記載する（imgタグと同じルール）
media : ブレークポイントを記載する
type : 画像の拡張子を記載する（png, jpg, jpegであれば省略OK）
ブラウザをリロードして検証ツールでそれぞれの画面サイズで表示される画像を確認してみましょう。
画像のレスポンシブ対応が実行されていますね。
CSSやJavaScriptで制御するレスポンシブ対応より簡単かつシンプルになったかと思います。
さらにsourceタグについては複数書くことができるので、ブレークポイントを増やすことも可能です。
3パターンのブレークポイントを設定してみましょう。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<picture>
<source srcset="../pc.jpg" media="(min-width: 1025px)" />
<!-- ここを追記 -->
<source srcset="../tab.jpg" media="(min-width: 768px)" />
<img src="../sp.jpg" alt="" />
</picture>
</div>
</body>
</html>最近では色んなサイズのデバイスが登場したことにより、同じ画像でも縦横比が違うことで中身のレイアウトや文字サイズを作り替えて用意することが当たり前になっています。
画像のレスポンシブ対応は初学者の方でも必須の作業になりますので覚えておきましょう。
レティーナ対応について
pictureタグを使うと画像のレスポンシブ対応ができることが分かりました。
このpictureタグの特性を利用すると、別の使い道で利用されることがあります。
代表例としては「レティーナ対応」というものがあり、テクノロジーの進化でレティーナディスプレイという画面を持つデバイスが登場しました。
簡単にいうと高画質なデバイスでは一定レベルの画質の画像を用意しないと、画面で見た時に荒く見えてしまうことが問題になりました。
現状のトレンドとしては「レティーナディスプレイ用の画像」「それ以外の画像」といった具合に、同じ画像でも2パターン用意しておく方法です。
このレティーナ対応にもpictureタグを活用することができます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<picture>
<source
srcset="../pc.jpg 1x, ../pc@2x.jpg 2x"
media="(min-width: 1025px)"
/>
<source
srcset="../tab.jpg 1x, ../tab@2x.jpg 2x"
media="(min-width: 768px)"
/>
<img src="../sp.jpg" alt="" />
</picture>
</div>
</body>
</html>書き方はレスポンシブ対応の時と大きく変わらないのですが、sourceタグのsrcset属性の書き方が工夫があります。
srcsetは画像のパスを書くのですが、「,」で区切って画質ごとのパスを書くことができるルールになっています。
プログラムの世界では通常の画質を「1x」、高解像度を「2x」という表現をします。
〜省略〜
<picture>
<source
<!-- 通常時はpc.jpgを表示して、レティーナディスプレイではpc@2x.jpgを表示する -->
srcset="../pc.jpg 1x, ../pc@2x.jpg 2x"
media="(min-width: 1025px)"
/>
<source
<!-- 通常時はtab.jpgを表示して、レティーナディスプレイではtab@2x.jpgを表示する -->
srcset="../tab.jpg 1x, ../tab@2x.jpg 2x"
media="(min-width: 768px)"
/>
<img src="../sp.jpg" alt="" />
</picture>
〜省略〜詳しくはレティーナ対応でググってもらえると色んなナレッジがあります。
ちなみにレティーナディスプレイは主にApple製品に使われています。
webp対応について
pictureタグの活用方法について代表的なものに「webp対応」というものもあります。
画像ファイルには「.png」「.jpg」など拡張子がついていて、新しい拡張子で「.webp」というものが登場しました。
従来のものとの違いは「ファイルサイズが非常に軽量」である点です。
それによってユーザーとしても読み込みが早くなり、事業主としてもSEOに少しばかり加点されるというメリットが出ました。
しかしIEなどマイナーなブラウザではwebp画像を読み込むことができないという問題があります。
こちらもレティーナ対応同様にpictureタグを活用することで解決できます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<div class="container">
<picture>
<source srcset="../pc.webp" type="image/webp" />
<img src="../pc.jpg" alt="" />
</picture>
</div>
</body>
</html>sourceタグにtype属性というものがあり、こちらで画像の拡張子を記載するルールになっています。
とはいえpngやjpgなど従来の拡張子については省略できる仕組みのため、webpの時だけに書くことが多いです。
あとはsrcsetでこれまで同様にwebp画像があるパスを指定するだけです。
webp画像が読み込めない場合にはimgタグでpngやjpgなどの拡張子で画像を用意しておくのを忘れないようにしましょう。