デザインするなら知っておいて損はないよ！
同じ内容のYouTube動画はこちらから！
サムネイルやバナー広告など、Web系のデザインは画像として書き出して使用するのが一般的です。
しかし画像と言ってもJPGやPNGなど様々な形式があり、どれを選べば良いのか分からない方も多いと思います。
そこで、今回はデザイン目線での画像形式の違いについて解説します。
JPG（ジェイペグ）
JPG画像はデータが軽くて、色情報が多いので特に写真に適した形式です。
注意点としては非可逆圧縮という一度圧縮してしまうと元のサイズに戻しても画質が戻らない点です。
サムネイルやWebサイト上の画像など最後に使用する画像としてなら安心の形式、誰かに渡したりデザインの素材にするなど中間のデータとして使用するなら画質が心配といった感じです。
80や100などの種類がありますが、80はデータが軽くなる一方圧縮されて画質が落ちるのでJPG100を推奨します。
PNG（ピング）
PNG画像は背景を透過できる形式で、種類にもよりますが色情報がJPG同様に多く、JPGと反対に可逆圧縮で圧縮しても元の画質に戻ります。
総合的に優秀な形式ですがファイルサイズが重いというデメリットもあります。
背景が透明にできるという点が優秀で、ロゴやアイコンなど四角形ではないデザインにとって必須の形式です。
JPG同様8や24など種類がありますが8は色情報が減り画質も劣化してしまうのでPNG24を推奨します。
GIF（ギフ・ジフ）
GIF画像はアニメーション対応している形式です。
SNSなどでよく見る短いループ動画を想像してもらうと分かりやすいと思います。
画像としてはPNGの色情報を少なくしてデータを軽くした感じで1色のアイコンなどに向いています。
ただ最近は一色のアイコンならCSSで実装できるので、アニメーション専用の形式といった印象です。
SVG（エスブイジー）
SVG画像はベクター形式という少し特殊な画像です。
拡大縮小しても画質やデータサイズが変わりませんが代わりに写真などの複雑な画像は苦手。
書き出した後でも編集できるのでフリーイラスト素材やアイコンなどで利用することが多いです。
WebP（ウェッピー）
WebP画像はJPEGとPNGの良いとこ取りをしたような画像形式です。
色情報は多く、背景透過やアニメーションも可能、非可逆圧縮と可逆圧縮は選択可能という優秀さですが比較的新しい画像形式のため使える場所が限られます。
YouTubeのサムネイルなどではもちろん使えませんし、Webサイトでも非対応ブラウザでは表示できません。
将来的に主流の形式になるかもしれませんが、今のところオススメしない形式です。
まとめ
今回は画像形式の違いについて解説しました。
それぞれ利用シーンに合わせて最適な形式がありますが、僕は基本的にPNG一択でデータが重すぎてアップロードできないときにJPGを使っています。
理想を言うと毎回どの形式にするか考えた方が良いので、考えるのが面倒じゃない方は今回の動画を参考に上手く使い分けてみてください！
