はじめに

業務で、デザイナーから受け取った IllustratorファイルのアイコンをPNGに書き出したり、
PSDファイルのdpiを変更してPNGに変換したりといった作業を経験しました。
ただ、そのときに「この拡張子ってなんだ？」「そもそもJPEGとPNGの違いもわかってないな？」と基礎知識が曖昧だなと感じたので画像の拡張子や基礎知識についてまとめてみます。

画像の拡張子

1. JPEG

特徴
- 非可逆圧縮（保存時に画質が劣化するが容量は小さくできる）
- ラスター形式
- 圧縮率が高い(画像のサイズを小さくできる)
- 背景を透過にすることができない
用途
- 写真やリアルな画像を大量に扱うWebサイト
- 容量を抑えたい場面（ブログ記事やSNS投稿用など）
注意点
- 繰り返し保存するたびに劣化する

2. PNG

特徴
- 可逆圧縮（保存しても画質は劣化しない）
- ラスター形式
- 背景を透過にできる
- JPEGに比べると容量は大きめ
用途
- 透過が必要なアイコンやロゴ
- 品質を絶対に落としたくない画像
注意点
- jpegよりは容量が大きくなりやすい

3. SVG

特徴
- ベクター形式（数式で形を定義しているため拡大縮小しても劣化しない）
- テキストとして編集可能（XMLベース）
用途
- ロゴ、アイコン、イラスト
- レスポンシブ対応が必要なUIデザインなど特定の画像をサイズを変えて表示したい場合
注意点
- 古い環境では一部対応していない場合がある

4. AI

特徴
用途
注意点
- Illustratorがないと開けない

5. PSD

特徴
用途
- 写真加工やUIデザインの元データ
- WebやアプリではPNGやJPEGに書き出して利用
注意点
- Photoshop以外では開けない

圧縮形式について

圧縮形式には 「可逆圧縮」と「非可逆圧縮」 の２種類あります。

可逆圧縮

圧縮しても元のデータを完全に復元できる方式。

特徴
- 保存しても画質は劣化しない
- 文字やイラスト、スクリーンショットのように「正確さが重要な画像」に向いている
- ファイルサイズは大きくなりやすい

非可逆圧縮

圧縮時に一部の情報を捨てて、データを小さくする方式。

特徴
- 保存のたびに画質が劣化する
- 人間の目で気づきにくい部分を削って容量を削減している
- 写真やWeb用画像など「多少の劣化より容量の軽さが重要な画像」に向いている

画像形式について

画像形式には 「ラスター形式」と「ベクター形式」 の２種類あります。

ラスター形式

ピクセル（点）の集合として画像を表現する方式。

特徴
- 1つ1つの点に色情報を持つ
- 1枚の画像を無数のドットで表現しているもの
- 拡大すると「ぼやける／ギザギザになる」
- 写真のような複雑な表現に強い
拡張子
- .jpeg .png .PSDなど

ベクター形式

数式や座標で図形を表現する方式。

特徴
- 形を構成するデータ（曲線の曲がり具合・色・線）などを全て数値で定義している
- 拡大しても画質を維持できる
- ラスター形式に比べて軽量
拡張子
- .ai　.svgなど

まとめ

最初はpngとjpeg何が違うんだろうくらいで調べ始めたのですが画像形式や圧縮形式など、画像の基礎知識がそもそも足りていなかったことがわかりました。
（業務でSVGなら画像のサイズ関係ないから1個で済むよと言われことがあるのですが、当時はよくわかっていませんでした。ベクター形式だから自由に大きさを変えても画質が落ちないのか！と調べたことで理解できました。。。)

画像データを取り扱うことが増えてきたので今後も理解を深めていきたいです。

参考