2021.04.20
200
どうもですよ、はやちですよ(´ʘ‿ʘ )✌
今回はGoogleが作った新しい画像フォーマットWebPの導入方法、そしてWebPが使えない他ブラウザへの対応方法をご紹介いたします。
img要素に.webp
を設定するだけ!
<img src="http://hayachi.github.io/images/hayachi.webp" alt="はやちwebp">
pingと比較をしても大差はありませんが、使用できるブラウザがかなり限られているためそのままの使用は厳しいところです。
WebPが対応できないブラウザに対しては、pngを表示するようHTMLで振り分けをします。
<picture>
<source type="image/webp" srcset="http://hayachi.github.io/images/hayachi.webp"></source>
<img src="http://hayachi.github.io/images/hayachi.png" alt="はやちwebp">
</picture>
IEではpictureは使用できないので「picturefill.js」で対応させます。
対応したものがこちらになります。他のブラウザでも確認してみてくださいまし( ˇωˇ )
WebPのブラウザ対応をしつつrazyloadの対応も可能です。
振り分けもフロント側で簡単にできるのであれば、普段から使っていくのもありなんではと思った次第です( ˇωˇ )