ホームページで画像が使用されていないサイトはありません。画像を表示させるのであれば、imgタグでも問題ないように思いますが、pictureタグがあるということは、何か使い分けがあるのでしょう。
と、いうことでpictureタグの使い方を調べながら、imgタグとの違いを調べてきましたので、私の備忘録もかねて、記録しておきます。
ちなみに私は、この記事を書くまでpictureタグを使用して画像の切り替えくらいしかやったことがありませんでした！
本記事を読んで、ぜひpictureタグを使いこなし、適切な処理で画像を表示させてあげてください。
本記事は、以下のことを中心に記述していきます。
- pictureタグとは。
- imgタグとの関連性。
- pictureタグの使い方。
- pictureタグでできること。
pictureタグとは。
pictureタグとは、簡単に言うと画像の表示を切り替えるためにあるHTMLタグです。
切り替えるための条件を指定して、その条件にあった画像を表示させます。
imgタグとの関連。
pictureは、画像を切り替えたいときに、imgタグとわせて使用することで、よりレスポンシブに対応した記述が可能になるタグです。
<picture>
<srcset="/img/foge-01.jpg" media="(max-width: 767px)">
<img src="/img/foge-02.jpg">
</picture>こうすることで、767pxを起点に表示する画像を切り替えることが可能です。
imgでは、画像を切り替えることができないので、ウインドウ幅によって画像を切り替えたい場合は、pictureタグを使用する必要があります。
imgタグ単体でも画像の切り替えはできるがお勧めできない。
前述したように、pictureタグを使用すれば、画像を切り替えることができますが、厳密にはimgタグだけでも切り替えることはできます。
<div>
<img src="/img/foge-01.jpg" class="pc-only">
<img src="/img/foge-02.jpg" class="sp-only">
</div>上記のようにhtmlを組み、以下のようにCSSを適用させます。
@media (min-width: 800px) {
.sp-only {
display: none !important;
}
}
@media (max-width: 799px) {
.pc-only {
display: none !important;
}
}こうすることで、pcとspの表示を切り替えることが可能です。
ですが、上記の記述は推奨されません。
理由は、サイトの読み込み速度が下がるからです。
pictureタグの場合は、指定した条件が適用された画像だけを読み込むのに対して、imgタグはサイトが読み込まれたとき、すべての画像を読み込みます。
その上で、CSSが適用され画像が非表示になるため、サイトの読み込み速度が低下します。
画像を切り替えて表示させる場合は、pictureタグを使用するようにしましょう。
pictureタグの使い方。
基本的な使い方は、以下の通りです。
<picture>
<srcset="/img/foge-01.jpg" media="(max-width: 767px)">
<img src="/img/foge-02.jpg">
</picture>冒頭でも記述したコードです。
必ず、１つはimgタグがないと機能しませんので注意してください。
その上で、srcsetで切り替える画像を設定します。
後述しますが、imgタグの前にsrcsetを記述してください。逆にすると、画像が適切に表示されません。
srcsetは複数設定することも可能。
srcsetは、複数設定することも可能です。
<picture>
<srcset="/img/foge-01.jpg" media="(max-width: 767px)">
<srcset="/img/foge-02.jpg" media="(max-width: 1100px)">
<img src="/img/foge-03.jpg">
</picture>上記のようにすることで、media=”(max-width: 767px)”で記述した条件にわせて画像をきりかせます。
このとき、以下のことに注意して記述してください。
- max-widthなら数字が小さい順。
- min-widthなら数字が大きい順
- imgタグはsrcsetの後に記述する。
上記になるように記述してください。HTMLは、上から読み込まれます。
そのため、先に条件を指定したsrcsetを読み込ませないと、imgタグが適用されてしまい、srcsetが適用されません。max-width,min-widthも同様です。
srcsetに適用できる属性
ここまでは、media属性を使ったレスポンシブに画像を切り替える方法を書きましたが、srcsetにはmedia以外にも属性があります。
- type属性（画像フォーマットの指定）
type属性は、画像タイプを指定してブラウザごとに表示を切り替えることができます。
ブラウザが指定した画像に対応していない場合は、imgタグの画像を表示します。
<picture>
<source srcset="foge.webp" type="image/webp">
<img src="foge.jpg" alt="fogefoge">
</picture>webpは、今でこそ対応しているブラウザが多くなりましたが、前までは対応していないことが多く、上記のように画像を切り替えていました。
pictureタグを適切に利用して画像を表示させよう。
pictureタグを使用することで、画像を切り替えたり、条件を指定して表示環境にあった画像を表示することができます。imgタグでなんとなく表示させていた人は、これを機会にpictureタグを使用して適切に処理してあげましょう。
特に、画像の切り替えについてはpictureタグを使うことで、不要な読み込みをなくし、サイトの読み込み速度が向上します。画像が多く使用されているサイトになればなるほど、効果は大きくなるでしょう。グーグルの評価も上がる大切なことなので、実施して適切な処理を心がけましょう。