Help us understand the problem. What is going on with this article?

webpでページの読込時間を短縮する

はじめに

Webサイトの読込時間の長さが気になる時、どのような対処を検討しますか?
・ファイルを並行して読み込む
・キャッシュを利用する
・DOMツリーの階層を減らす
・etc...

比較的簡単な対処方法としてはjpegやpngといった画像をwebpに置き換える方法があります。

webpとは?

webp(ウェッピー)とはGoogleが開発した次世代の静止画フォーマットです。
拡張子は「.webp」、ライセンスは「BSD」。
jpegやpngと比較するとファイルサイズが約30%前後、減少します。

1つ注意点として、IEはサポートされていません。

公式サイト

https://developers.google.com/speed/webp/

webpの仕組み

隣接するピクセルブロックの値(色)から次のピクセルブロックの値(色)を予測し、その差分をエンコードすることで全体のファイルサイズの縮小を実現しています。

jpegとwebpの比較

jpegとwebpの画像を比較してみます。
(画像は、ぱくたそ様より拝借させていただきました。)

画質

image47.png

左がjpeg、右がwebpです。
パッと見、画質に違いがありません。

image49.png

画像を拡大してみても劣化はほとんどありません。

ファイルサイズ

image50.png

jpegが372KB、webpが118KB
今回の検証だと約1/3のサイズダウンとなりました。

まとめ

webpを利用することでファイルサイズが小さくなり、
結果として読込速度の改善、LCPの改善が見込めます。

IEをサポートしないページであればwebpを使用してみてはいかがでしょうか?

RYO_nami
現在は主にフロントエンドエンジニアとして仕事しています。 社会人歴が長くなるにつれ仕事では徐々に管理系の業務が増え、 プライベートでは子育てに追われ、 最近はプログラミングしてないなぁ…技術から離れてるなぁ… としみじみ思ったので、2020年はQiitaにアップする習慣を身に付けることにしました。
https://ryocv.online/univers/index.html
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away