最近担当したLPで、画像が大きすぎて重くスマホの実機プレビューができない！
という問題が発生しました。
その経験をもとに、webpを利用する際にどのような実装をするのが適しているのか、
調べつつ覚書として記しておきます。
pictureタグとは
私としては、
・画像を全部webpにしたいけど一応対応していないブラウザもあるしwebpと従来の画像を振り分けねば
・iPhoneなどの高画質スマホで画像の大きさ振り分けできる
の両者を叶えてくれる素敵なタグだと思っております。
基本的な構成が下記。
<picture>
<source
srcset="img.webp 1x,img@2x.webp 2x,img@3x.webp 3x /"
type="image/webp"
/>
<img
class="hoge"
src="img@3x.png"
alt="hogehoge"
/>
</picture>
pictureタグ
何も意味を持たないという認識をしています。挟むだけのやつ。
sourceタグ
こちらのタグには新しい拡張子のwebpやavirを格納します。
基本的には３サイズ用意するのが良さそう。
- srcset属性
- 画像へのパスと、半角スペースを開けて表示サイズの何倍であるかを記載する。(呪文) 1x,2x,3x
- type属性
- srcsetに記載した画像の拡張子を記載する。
imgタグ
従来のjpgやpngのソースを記載し、webpやavirに対応していないブラウザを救う役割をしています。
classはこちらに記載し、スタイリングしていきます。
元あるimgタグを単純にpictureタグに置き換えていくと、スタイリングが崩れてしまったのでそこは注意していきたいですね。
もはやほとんどのブラウザが最新verにてwebpに対応している中、あまり気にするところではなくなってきたかもしれませんが、やはり掬い上げなければいけないインターネットリテラシーの低めな層。。
できればIE(R.I.P)さんのことは忘れたい
番外編 - cssのbackground-imageにもwebpを使いたい！
結論としては、このように@supportsを利用すればOKです！🙆
@supports (background-image: url('image.webp')) {
.background {
background-image: url('image.webp');
}
}
webpに加えてavif拡張子も出てきているというところですが、現状弊社のwebデザインチームではwebpに対応するところから始めていきたいと思っています！
また、pictureタグではメディアクエリを使わずにウィンドウサイズでの画像の切り替えも叶います。
そちらでの実装はまだチャレンジしてませんので、いずれ実装することになったらまた追記します。