様々な拡張子がある中どの拡張子で画像を保存すればいいかを考えることがあると思います。
それぞれの拡張子について書いてあることはあっても用途別で書いてるところがなかったのでこちらでまとめてみようと思います。
#写真などの色彩豊かな画像
####最適な拡張子 : JPG or WebP
こちらは今まではJPG一択だったのですが、近年新しくWebPが出てきました。
WebPはios14から対応となりましたので、これで全てのosとブラウザが対応することとなりました。
圧縮率が高くサイズを軽くできるというのと、透過もできるというのが強みになります。
ただ、最新のブラウザのみでしか対応できておりませんので注意が必要です。
よってJPG or WebPとなります。
もしさらに透過も加えたい場合はPNGを次点として上がってくるとは思いますが、
ファイルサイズが大きくなるので透過自体をおすすめはしません。
#アイコンや色数の少ない画像
####最適な拡張子 : SVG > PNG > GIF
こちらはSVGが一番いいと思います。
ベクターデータのSVGは拡大縮小してしても画質が落ちないという点やファイルサイズも少なくすむという点で１番です。
次はPNGです。
ファイルサイズは少し大きくはなりますが、GIFとは違い画像の質を落とすことがなく表現することができます。
ちなみにあげた三つの拡張子は全て透過可能です。
#アニメーションを加えた画像
###最適な拡張子 : SVG > GIF
こちらはSVGがいいと思います。
GIFもアニメーションを加えて作成できますが、ファイルサイズが大きくなってしまいます。
そのためSVGの方が最適といえます。
#まとめ
正直私はこのように思っていますが、
いろいろな環境や状況によってはこれに当てはまらないことがあると思います。
だからみなさん書いてないのかもしれません。
もしこの拡張子はこれに当てはまるなどの情報がありましたら教えていただけますと幸いです！