WebP（ウェッピー）で画像を軽量化！非対応ブラウザでも切り替える方法

どうもですよ、はやちですよ(´ʘ‿ʘ )✌

今回はGoogleが作った新しい画像フォーマットWebPの導入方法、そしてWebPが使えない他ブラウザへの対応方法をご紹介いたします。

WebPとは？

WebP（ウェッピー）は、米Googleが開発しているオープンな静止画フォーマット。ファイルの拡張子は「.webp」。 ウェブサイトのトラフィック量軽減と表示速度短縮を目的としており、インターネットのWebページで広く使われている非可逆圧縮のJPEGや可逆圧縮のGIF、PNGの置き換えを意図する規格である。JPEGとは異なり、非可逆圧縮でもアルファチャンネルを扱える。

参考:WebP – Wikipedia

さっそく使ってみた

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の対応も可能です。

振り分けもフロント側で簡単にできるのであれば、普段から使っていくのもありなんではと思った次第です( ˇωˇ )