この記事では、画像表示をWebPに切り替えた動機とメリット、その結果Webサイトのパフォーマンスがどのように変化したかについてのみ記述しています。WebPの導入方法についての解説は含まれていませんので、ご注意ください。 by深尾
そろそろWebPを導入してみたい
IEことInternet Explorerのサポートが完全に終了したことで、フォールバック画像を設定せずにWebPを使用できるかCan I useで確認したところ、問題なく使えることが分かりました。ついにこの時が来たと、早速WebPの導入を決めました。
WebP導入のメリット
WebPを導入するメリットは多岐に渡りますが、わかりやすいのは以下の三つです。
- 画像容量をJPEG,PNG形式よりも20%〜30%削減しつつ同等の画質を保てる
- ロスレス圧縮だけでなくロッシー圧縮にも対応
- PNGのように背景の透過処理ができ、GIFのようなアニメーションにも対応
導入後のパフォーマンスは？
以下は、私のポートフォリオサイトの画像をWebPに切り替えた後のPage Speed Insightsの結果です。スマホ版に関してはお恥ずかしながら78点と決して良いスコアとは言えませんが、スマホ版とデスクトップ版のパフォーマンススコアは共に導入前より5ポイントずつ上昇しました。
まとめ
今回は「Webサイトの表示画像をWebPにするメリットとその効果」について書かせていただきましたが、ちょっと変換作業を行うだけで、パフォーマンスが5ポイント上昇するのならばやる価値があるのではないでしょうか？私のこの結果を1サンプルとしてWebP導入のご検討にご利用いただけますと幸いです。