Webの画像形式（JPEG,PNG,GIF,SVG）使い分け

Webでよく使われる画像には、JPEG,PNG,GIF,SVGと種類があります。 ファイルの特徴を理解して使いわけることで、高画質のまま、ファイルサイズも小さくおさめることができます。

Webで使う画像形式の種類

ざっくりまとめると、こんな風に使い分けます。

JPEG→写真、使われている色が多い画像 PNG→イラスト、背景透明の画像 GIF→色が少ないシンプルなアイコン、ロゴ、アニメーション SVG→色を変更する、拡大縮小して使うアイコン

JPEG（ジェイペグ）形式の特徴

• 高画質で容量が小さい
• 画像データを一部破棄して圧縮するので、繰り返し保存すると画質が劣化してしまう
• フルカラー（約1677万色）使えるので、色が多い画像にオススメ
• 色を多く使うイラスト、写真に向いている

GIF（ジフ）形式の特徴

• 256色まで使える
• 容量が小さくてすむ
• アニメーション、透過処理に使える
• 単色のロゴ、アイコン、ボタン、アニメーションに向いている

PNG（ピング）形式の特徴

• フルカラー（約1677万色）で高画質
• 圧縮しないのでファイルサイズが大きくなりがち
• 透明/半透明の画像に使える
• イラストやロゴ、アイコン、背景が透明の画像、グラデーション画像に向いている

SVG形式の特徴

• ベクター画像なので、拡大、縮小しても画質が劣化しない
• ファイルサイズが小さい
• アニメーション、透過画像に使える
• CSSを用いて、色やサイズを変えたりできる
• シンプルなロゴ、アイコンに向いている

SVGは、最近見かけるようになった形式。 Web上で配布されているWebアイコンとして使うことが多いかなと思います。

MacでWeb画像のファイルサイズを調整する

画像のファイルサイズが大きいと、ページの表示に時間がかかってしまいます。 かといって、あまりに小さくしてしまうと、画像が劣化して表示されてしまいます。 この画質とファイルサイズのバランスを決めていくのが大切。 ### 画像の縦横サイズを決める

Macでは「プレビュー」を使って画像を調整できます。 プレビューで使いたい画像を開いたら、 「ツール」＞「サイズを調整」から画像サイズと解像度を入れます。 PC用のウェブページに載せる画像は、 ページ上に表示するサイズで縦横サイズを決めます。 私のサイトだと、ブログに表示する画像は800pxくらいで用意しています。 ためしに測ってみると、私のHPのアイキャッチ画像はwidth(横)は684pxでしたね。 （見る人のブラウザによって、多少大きさは変わるでしょうが。）

画質とファイルサイズを選ぶ

ファイルサイズが大きいとページの表示に時間かかること、 画像を保存している場所の容量も圧迫してしまうことから、 ファイルサイズはなるべく小さめがいいです。

私の目安は、 背景、アイコンなど、色や形がシンプルな画像は数KB。

写真などサイズが大きくなりがちなファイルは、最大でも100KB程度を目安にしています。 ファイル形式や品質を変えて、 画質が劣化していないか ファイルサイズが大きすぎないか チェックして使ってみてくださいね。