【初心者向け】pngやjpeg、拡張子の正解

こんにちは、Timersデザイナーのみふねです。

今回は、Timersが開催しているママwebデザイナーコースで、よくいただく質問にお答えします。

Q. GIFと JPEGとPNGの違いや、素材をダウンロードする際のファイル形式の違いが知りたい

データの名前の最後に付いている「.png」や「.jpeg」など、「.」のあとを拡張子と言います。今回はこの拡張子の使い分けをご紹介します。

書き出しする時

拡張子ごとの特徴を以下表にまとめました！

画像形式は png, jpg, gif が一般的で、Adobe Illustratorでも「web用に保存」の場合はこの3つの書き出し形式が選べます。

端的にかくと、実際に使い分ける基準は

グラデーションなど色数がたくさん必要な画像はPNG、画像の容量を小さくしたい場合はJPG

というように選んでいます。

もう少し詳しく

PNG
滑らかな透過を実現したい時向きです。イラストやアイコンと写真を共存させたい時などにも使えて、最近の主流となっています。
しかし容量が大きくなりやすいというデメリットもあります。Illustratorで保存する時は、pngの後ろについている数字（png-8, png24のような）が大きければ大きいほど、表現できる色数が増えます。

JPG
サイズが大きい写真など沢山の色を利用しながら容量を抑えたい時に利用するのがオススメです。透過はできないので、白や黒の背景が付いてしまいます。圧縮率を変えることで容量のコントロールが可能です。
イラストやアイコンに利用するとボケる事があるので、これらを書き出す場合はPNGが◉。

GIF
GIFはアニメーションを表現できるという特徴があります。アイコンやドット絵など少ない色で容量を減らす場合にも使用されます。透過も可能です。
グラデーションや写真などたくさんの色が必要な物には不向きです。

ダウンロードする時

背景が透過されている素材を使用したい場合はpngをダウンロードしてください。

他にも、aiやpsd、espやsvgなどはベクターデータなので、Adobe Illustratorなどで編集することができるファイルです。

ベクターデータってなに！？という時はこちらのサイトがおすすめです。

ビットマップとは？ベクターとは？画像形式の意味と違いを図解

まとめ

いかがでしたでしょうか。拡張子をうまく使い分けてデザインしてみてくださいね！