これが参考になります。
png
背景に透明処理が必要なもの
例として、シャドウが付いている、テキストのみの書き出し、角が丸い
jpg
四角くて背景があるもの
例、メインイメージ、シャドウが付いていないボタンなど
gif
色数が少ない画像。
（ディスプレイの解像度が上がってきた昨今、個人的にはあまり推奨できない）
と、先輩には伝えられていました。まあつまり透過の有無の差が一番大きい。
と言いつつ、それ以上のことを実はあまり知らなかったんですよね。
SVGはパスを描くから画像っていうより描画させてるイメージ。なので画質とか関係ない。デバイスに描画させてるので。一番綺麗。
というわけで上述のMediumのやつを参考に。
それは写真？（はい）
→大きい？（はい）
→JPG
これどういうことなんですかね、サイズの問題？PNGのほうがJPGよりサイズが大きくなるから画像自体サイズが大きくなるならJPG、ってことなのかな。
それは写真？（はい）
→大きい？（いいえ）
→それはバスルームのセルフィー？
→（はい）燃やせ（いいえ）PNG
これなんの洒落なのか全然わかんない。バスルームのセルフィーがなんなんだ。
それは写真？（いいえ）
→それはベクター？（はい）
→それはウェブサイト用？（はい）
→SVG
まあこれはそう。ベクターとして表現できるのSVGだけだし。
それは写真？（いいえ）
→それはベクター？（？？）
→グラデーションある？（いいえ）
→GIF
なるほどGIFってグラデーションには弱いのね。
それは写真？（いいえ）
→それはベクター？（？？）
→グラデーションある？（はい）
→それはロゴ？（はい）
→燃やせ
ロゴでグラデーションあるのたしかに見ないけど！！燃やせは言いすぎやろ！！笑
それは写真？（いいえ）
→それはベクター？（？？）
→グラデーションある？（はい）
→それはロゴ？（いいえ）
→透過ある？（いいえ）
→JPG or PNG
これはorなんや。JPG一択ではないのね…透過ないならJPGのほうがファイルサイズ少なくなりそうなんだけどな
それは写真？（いいえ）
→それはベクター？（？？）
→グラデーションある？（はい）
→それはロゴ？（いいえ）
→透過ある？（はい）
→動く？
→（はい）GIF （いいえ）PNG
まあこれはそうね。透過で動くならGIFしかないし動かないならPNGしかないし。
ほう。つまりまとめると…ていうか勉強になった部分は…
グラデーションの有無
これは知らなかった。あるならGIFは避けたほうがいい模様。
むしろこのくらいだった。まあ結局透過の有無と動きの有無、画像の大きさ、とかによるのかなあ。
