画像のファイル形式とそれぞれの特徴【JPEG・GIF・PNG・SVG】

Photoshop講座
この記事は約 2 分で読むことができます。

Webサイトなどで表示されている画像には、4つのフォーマット(ファイル形式)があることをご存じでしょうか?

Webで表示できる画像形式

  • JPEG
  • GIF
  • PNG
  • SVG

Webデザイナーを目指すのであれば、全ての特徴を把握し、状況に応じて使い分ける必要があります。

そこで今回は、Webで使われる画像形式『JPEG・GIF・PNG・SVG』の4種類について詳しく解説していきます。

すでに知っている方も復習だと思ってもう一度確認しておきましょう!

スポンサーリンク

JPEG

JPEGのイメージ

JPEGはフルカラー(約1670万色)の表示に対応したファイル形式で、「.jpg」という拡張子が最後に付きます。

色の表現に優れており、写真やグラデーションを使ったグラフィックなどに適した形式です。

また、圧縮率を変えることで画質を調整することができます。

圧縮率を高くすればファイルサイズが小さくなりますが、画質は悪くなります。

逆に圧縮率を低くすればファイルサイズは大きくなり、画質が良くなります。

メモ拡張子とは?

ファイルの最後にドット(.)に続けて文字列がついています。これを拡張子と呼びます。

拡張子は簡単に言うと、ファイルの種類を区別するためのもので、2~4種類のアルファベットで構成されています。

GIF

GIFのイメージ

JPEGの約1670万色と比べてGIFは256色しか使用することができません。

その代わりファイルサイズを小さくすることができる形式です。

色数が少なく、べた塗りが多いグラフィックに適しています。

また、パラパラ漫画のようなアニメーションを作ることができるのも特徴の1つです。

後述するPNG形式が登場したことで、画像としてはあまり使われず、アニメーションとして使われることが多くなりました。

そのため「GIF=簡単なアニメーション」と思っている方も多いと思います。

ですが、GIFとは元々画像のファイル形式であることを覚えておくといいでしょう。拡張子は「.gif」です。

PNG

PNGのイメージ

GIFの代替フォーマットとして開発された形式で、JPEGのように色数の多い画像にも対応できるのがPNG形式です。

JPEGとの大きな違いは透過画像が作れるということ。

また、PNGの中にも、256色に限定されて簡易的な透過しかできないPNG8形式と、フルカラーで高品質な透過ができるPNG24形式があります。

ファイルサイズはPNG8が小さく、PNG24は大きいです。特にPNG24はJPEGよりも格段にファイルサイズが大きくなります。

むやみやたらに大きなPNG24を使いすぎると、Webサイトの表示速度が低下する恐れがあるので気を付けましょう。

拡張子はどちらも同じ「.png」です。

背景を透過させたり、人物の切り抜きをおこなった画像はこのPNG形式で保存しましょう。

参考Photoshopで簡単に画像を切り抜く3つの方法!用途によって切り抜き方を使い分けよう!

参考Photoshopで髪の毛をたった30秒で簡単に切り抜く方法!これであなたも切り抜きマスター!

SVG

HTML5から表示できるようになった形式で、後述するベクター形式と呼ばれる画像です。

他の形式(JPEG・GIF・PNG)と違い、HTMLのような書式で書かれたテキストデータで構成されています。

SVGデータはJPEGなどと同じように<img>タグで表示できますし、<svg>タグを使って直接HTMLに埋め込むこともできます。

拡張子は「.svg」です。

ビットマップ形式とベクター形式

ビットマップ形式とベクター形式のイメージ

画像には、「ビットマップ形式」と「ベクター形式」の2種類が存在します。

ビットマップ形式

JPEG・GIF・PNG

ベクター形式

SVG

ビットマップ形式は簡単に言うとドットの集合体で、全てのドットが色の情報をもっています。

そのため色の細かい表現が得意ですが、情報量が多くファイルサイズが大きくなってしまいます。

また、拡大すると画質が悪くなるのも特徴です。

一方、ベクター形式は直線、曲線、塗りなどを数式で表現しています。一般的にはビットマップ形式よりファイルサイズが小さくなり、拡大しても画質が悪くなりません。

ですが、描写のたびに数式を計算する必要があり、表示に時間がかかってしまいます。

また、色の細かい表現が苦手です。

このようにそれぞれ特徴があるので、状況に応じて使い分けましょう!

Photoshopで画像をWeb用に保存する方法

Webで使用する画像をPhotoshopで作成する場合、Web用に保存を利用しましょう。

ショートカットは『command + Shift + alt + S』です。

Photoshopで画像をWeb用に保存する方法

するとこのような画面が開き、右上のタブで保存する形式を選ぶことができます。

JPEGを選ぶと画質や大きさを変更して、ファイルサイズを調整することができるので上手に活用してみてください。

Webで使用する場合、ページ表示速度を落とさないように100KB以内に抑えると良いでしょう。

まとめ

画像のファイル形式

最後に4つの画像形式の比較を掲載しておきます。

それぞれの特徴をしっかり把握し、使い分けられるWebデザイナーを目指しましょう!

ここまでご覧いただきありがとうございました!

デザイナーを目指すならスクールに通おう

当サイトでは、
本気でWebデザイナーになりたいならデザインスクールに通うことをおすすめしています。

なぜかというと、デザインの勉強は独学では難しいからです。

独学が難しい理由

  • モチベーション維持が難しい
  • 自分のデザインの良し悪しを判断できない
  • 無意識のうちに、好きなデザインばかりを作ってしまう
  • いくら勉強しても就職できるかは別問題

デザインというものは勉強すればするほど上達できるわけではありません。

プロに見てもらいながら、正しく勉強して初めて、デザインは上達するんです。

独学で無駄な時間を費やすくらいなら、多少お金はかかってもWebデザインスクールに通って最速でデザイナーになるべきです!

当サイトおすすめのWebデザインスクールについては下記リンクよりご覧ください!

おすすめWedデザインスクール17選!現役デザイナーが解説します!
Photoshop講座 デザインノウハウ
スポンサーリンク

応援クリックをポチッとお願いします!
ブログランキング・にほんブログ村へ   

ハジデザ | 初めてのWebデザイナー転職

コメント