Design

Webの画像形式(JPEG,PNG,GIF,SVG)使い分け

Published: 2018/06/21

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程度を目安にしています。 ファイル形式や品質を変えて、 画質が劣化していないか ファイルサイズが大きすぎないか チェックして使ってみてくださいね。