変わり続ける画像フォーマット対応の最適解とは

・Webで利用する画像のフォーマット
Webで利用される画像の主要な形式はJPEG・GIF・PNGとSVGです。

「JPEG（Joint Photographic Experts Group）」
圧縮率が高く、フルカラー1670万色まで扱うことができるため、写真のように微妙に
色が変化するような画像に適した形式です。ただし、「非可逆圧縮」のため、
一度保存してしまうと元の画質に戻すことができないので注意が必要です。

「GIF（Graphics Interchange Format）」
扱える色は256色と少ないですが、データ容量が小さく、文字やロゴ、色数の少ない
図形などに適した形式です。アニメーションに対応しているのが大きな特徴です。
画像を圧縮しても元に戻せる「可逆圧縮」で、透過を扱うこともできます。

「PNG（Portable Network Graphics）」
GIFの圧縮方法の特許問題によってGIFの代わりに開発された形式です。JPEGのように
フルカラー1670万色を扱うことができ、GIFのように「可逆圧縮」で、透過を扱うこともできます。

「SVG（Scalable Vector Graphics）」
SVGはベクター形式のファイルで、品質を損なわずに拡大縮小ができるため、
アイコンやロゴなどでよく利用されています。XMLコードで記述されているのが特徴です。

・次世代フォーマットの登場
WebPはGoogleが開発した画像フォーマットで、ファイルの拡張子は「.webp」。
JPEG・GIF・PNGすべてを置き換えることができる特徴を持っています。

特徴① 非可逆圧縮と可逆圧縮の両方をサポート
特徴② 透過、アニメーションに対応
特徴③ 高い圧縮率

非可逆圧縮ではPNG と比較して 26％軽量。22％の追加バイトでアルファチャネルをサポート。
可逆圧縮では同等の JPEG 画像よりも 25-34％軽量

とても優秀ですね！　画像の軽量化は表示速度の向上だけではなく、転送量の削減
にもつながるので、WebP対応をしない、という手はないでしょう。
https://ascii.jp/elem/000/004/095/4095616/