BLOG

HOME ブログ Web制作 WebP(ウェッピー)を使う!サイト表示速度改善方法

WebP(ウェッピー)を使う!サイト表示速度改善方法

2019.4.5
矢ケ崎しげあき
矢ケ崎しげあき

どうも矢ケ崎です。

案件にもよりますが、GooglePSIで警告が出されるようになってきてから、WebP(ウェッピー)の導入をぼちぼちはじめました。

ウェッピーって、なんかそんな名前の人いたようないなかったような。。

WebP(ウェッピー)とは

WebPは、Googleが作った新しい画像フォーマットになります。
これまでWebでは、JPEGやPNG、GIF等が主でしたが、WebPはこれらのものより圧縮率が高くサイズが軽いです。

WebPの存在は知っている人多いと思いますが、対応されているブラウザが少ない等の理由でこれまで導入はしてこなかったのではないでしょうか?

でも最近ではほとんどのブラウザでサポートされています。

ブラウザのWebPの対応状況

2019年5月現在のブラウザの対応状況
https://caniuse.com/#search=webp

WebPブラウザ対応状況

これを見ると、だいたいのブラウザでサポートされてきました。
Safariが未対応です。

WebP(ウェッピー)の作成方法

Photoshopでプラグインを使って書き出せるようです。

弊社ではタスクランナーでGulpをよく使っているので、gulp-webpで書き出します。

cwebpコマンドで作成

cwebpコマンドで作成もできます。

brew install cwebp
cwebp test.png -o test.webp

実際のWebPの使い方

もちろん未対応環境のことを考えなければいけません。
そのため、pictureタグを使って書きます。

<picture>
    <source srcset="/img.webp" type="image/webp">
    <img class="image" src="/img.jpg">
</picture>

上記のように記述することで、webpに対応ブラウザではWebPが表示されます。

background-imageをWebPにする場合

背景画像でWebPを使いたい場合は、modernizr.jsを使います。

Modernizr

modernizr.jsでWebP対応ブラウザかどうかを判別、htmlにクラスが付与されるようにします。

あとは以下のようにしてbackgroundでWebPを使います。

See the Pen pmoRwe by SHIGE (@GONPACHI) on CodePen.

簡単ですが、こんな感じです。

SHARE !
PREV

新規の電話対応・紙での契約書・お知らせの一切を辞めました

NEXT

ホームページをフルリニューアルしました。