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

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

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はやち
はやち フロントエンドエンジニア / 林 佳代子

フロントエンドエンジニアのはやちです( ˘ω˘)☝ 以前までは顔隠しておりましたが思い切ることにしました…。 相変わらず顔文字乱舞ですがブログもコーディングも楽しくやっていこうと思います✌(´ʘ‿ʘ`)✌ 今までに作ったDemoたちはGithubにて公開しております!よろしければ是非( ˘ω˘)☞三☞シュッシュッ

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL