WebP
2022年9月15日
みなさんこんにちは。
ケミストのWeb担当みやのです。
「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。
今回は「WebP」について調べました。
参考：デジタルマーケティングブログ｜WebP（ウェッピー）とは？フォーマットの違いや作成方法をご紹介！
参考：Web Design Trends｜そろそろWebPに切り替えよう。変換方法や対応ブラウザ、使い方を解説！
実はトップページが一番重かった
前回作ったローディングアニメーションをトップページにも設定してみたのですが、アニメーションが終わってもまだ画像の読み込みが終わりませんでした。
原因を調べてみたらハーバーブリッジの画像が1.78MBもあったせいでした。
画像はこちらです。
JPEG
やれやれだ.........ヘヴィすぎるぞ！
何とかしましょう。
WebPとは
WebP（ウェッピー）とは、Googleが開発した新世代の画像フォーマットです（拡張子は.webp）
2010年頃からあったみたいです。
JPEGと比較して25～34％、PNGと比較して26％、ファイルのサイズが軽くなるようです。
参考：Google Developers｜An image format for the Web
画像のフォーマットは、
・JPEG→高圧縮・非可逆
・PNG→透過・可逆
・GIF→アニメーション
だいたいこんな感じだと思いますが、WebPは「高圧縮・可逆/非可逆・透過・アニメーション」と、いいとこどりのようです。
現在は対応するOS、ブラウザも増えてきているようです。macOSはBig Sur以降、iOSは14以降、Firefoxは65以降、Safariは14以降だと対応しています。IE？知らんな
WebPに変換
オンライン上でWebPに変換する方法がいくつかあるようです。
サルワカ様のは50ファイルまで一括で変換できて、しかも元のファイル名＋.webpにしてくれるのでかなり助かりました。
早速さっきのハーバーブリッジの画像をWebPに変換してみましょう。
WebP
全然違いがわかりませんね。
サイズは1.78MB→275KBまで軽くなりました。なんと85％カットです。すご。
ただ、ウェブサイトにおいては画像1枚あたり100KBを切るのが望ましいらしいので、まだまだ重いです。
WebPを実装
普通の画像と同じく<img>タグで設置するだけです。
<img src="img/Harbour_bridge.webp">が、非対応の場合に代わりの画像を表示できるように<picture>タグを使って以下のように記述するのがよいそうです。
<picture>
<source srcset="img/Harbour_bridge.webp" type="image/webp">
<img src="img/Harbour_bridge.jpg">
</picture>でもIEは<picture>タグも非対応らしいです（え～）
Picturefillポリフィルという、IEに<picture>タグを対応させる方法が一応あるようです。
CDNで読み込みます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/picturefill/3.0.3/picturefill.min.js"></script>WebPを背景画像にする
背景画像（background-image）の場合は<picture>タグが使えないので、Modernizr（モデナイザー）を使います。
① Modernizrにアクセス→Add your detects
②Webpを選択→BUILD
③ Download→modernizr-custom.jsを</body>の上あたりに設置
<script src="js/modernizr-custom.js"></script>これで、WebPに対応している場合はwebp、対応していない場合はno-webpというクラスが<html>に対して付与されるようになります。
あとはCSSでWebPとJPEG（またはPNG）を設定すれば完了です。
.webp .example {
background-image: url(img/Harbour_bridge.webp);
}
.no-webp .example {
background-image: url(img/Harbour_bridge.jpg);
}参考：Qiita｜【IE11・Safariにも対応】WebPをPictureタグとCSSで使う方法
参考：ジャム！｜【CSS3】BackgroundプロパティでWebPを使う方法
まとめ
もう全部WebPでいいんじゃないかな。
トップページはちょっとだけ軽くなった気がします。ついでにブログ一覧ページも全部WebPにしました。
