code_note

レスポンシブデザインのWebサイトでは、モバイルサイズ時とPCサイズ時で、別々の画像を表示したいときがあります。pictureタグを使えば、CSSやJavaScriptを使わずに画面幅に応じて画像を切り替えられます。

そのほかにもpictureタグを使うことで、ブラウザごとに拡張子を変更することもできます。webp拡張子に対応しているブラウザならWebP画像を、そうでないブラウザならpng, jpg, svgなどの画像を表示する、というように切り替えることで、ユーザビリティの向上が図れます。また、画像の切り替えにJavaScriptやCSSが不要なため表示スピード向上にもつながります。

<picture>
  <source srcset="画像のパス">
  <img src="画像のパス" alt=”代替テキスト”>
</picture>

sourceタグには下記の属性を記述できます。

srcset：条件に一致したときに表示する画像のパス（URL）
media：ブラウザ幅（min-width, max-width）に応じて表示するものを切り替える
type：jpg, png, svg, webpなど画像形式を記述
width：画像の横幅を記述
height：画像の高さを記述

<div class="imgbox">
  <picture>
    <source srcset="images/sample.png"><!-- 優先度1-->
    <source srcset="images/sample3.jpg"><!-- 優先度2-->
    <img src="images/sample2.png" alt=”代替テキスト” >
  </picture>
</div>

<div class="imgbox">
  <picture>
    <source srcset="images/sample3.webp" media="(min-width: 1024px)" type="image/webp">
    <source srcset="images/sample.png" media="(min-width: 768px)" type="image/png">
    <img src="images/sample2.png" alt=”代替テキスト”>
   </picture>
</div>

sourceタグはimgタグに対してパスを置換させるためのコードを保持するためのタグです。そのため、CSSはimgタグに対して記述します。

<div class="imgbox">
  <picture>
    <!-- sourceに画像のパスを記述 画面に表示されるのはsrcsetの画像-->
    <source srcset="images/sample.png">
    <!-- imgに画像のパスを記述 -->
    <img src="images/sample2.png" alt="代替テキスト">
  </picture>
</div>

.imgbox {
  position: relative;
  width: 100%;
  max-width: 300px;
}


.imgbox::before {
  padding-top: 56.25%;
  display: block;
  content: '';
}


.imgbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: center;
}

＜picture＞