これが参考になります。
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は避けたほうがいい模様。
むしろこのくらいだった。まあ結局透過の有無と動きの有無、画像の大きさ、とかによるのかなあ。