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でしたね。
（見る人のブラウザによって、多少大きさは変わるでしょうが。）
Page RulerというChromeの拡張機能を使っています。
画質とファイルサイズを見極めて選んでね
「ファイル」＞「書き出し」で、画像の形式と画質を設定します。
ファイルサイズが大きいとページの表示に時間かかること、
画像を保存している場所の容量も圧迫してしまうことから、
ファイルサイズはなるべく小さめがいいです。
私の目安は、
背景、アイコンなど、色や形がシンプルな画像は数KB。
写真などサイズが大きくなりがちなファイルは、最大でも100KB程度を目安にしています。
ファイル形式や品質を変えて、
画質が劣化していないか
ファイルサイズが大きすぎないか
チェックして使ってみてくださいね。