青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

画像ってJPGとPNGとGIFとSVG、結局どれを使えばいいの。

uxdesign.cc

これが参考になります。

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は避けたほうがいい模様。

むしろこのくらいだった。まあ結局透過の有無と動きの有無、画像の大きさ、とかによるのかなあ。