はじめに
業務で、デザイナーから受け取った IllustratorファイルのアイコンをPNGに書き出したり、
PSDファイルのdpiを変更してPNGに変換したり といった作業を経験しました。
ただ、そのときに「この拡張子ってなんだ？」「そもそもJPEGとPNGの違いもわかってないな？」と基礎知識が曖昧だなと感じたので画像の拡張子や基礎知識についてまとめてみます。
画像の拡張子
1. JPEG
-
特徴
- 非可逆圧縮（保存時に画質が劣化するが容量は小さくできる）
- ラスター形式
- 圧縮率が高い(画像のサイズを小さくできる)
- 背景を透過にすることができない
-
用途
- 写真やリアルな画像を大量に扱うWebサイト
- 容量を抑えたい場面（ブログ記事やSNS投稿用など）
-
注意点
- 繰り返し保存するたびに劣化する
2. PNG
-
特徴
- 可逆圧縮（保存しても画質は劣化しない）
- ラスター形式
- 背景を透過にできる
- JPEGに比べると容量は大きめ
-
用途
- 透過が必要なアイコンやロゴ
- 品質を絶対に落としたくない画像
-
注意点
- jpegよりは容量が大きくなりやすい
3. SVG
-
特徴
- ベクター形式（数式で形を定義しているため拡大縮小しても劣化しない）
- テキストとして編集可能（XMLベース）
-
用途
- ロゴ、アイコン、イラスト
- レスポンシブ対応が必要なUIデザインなど特定の画像をサイズを変えて表示したい場合
-
注意点
- 古い環境では一部対応していない場合がある
4. AI
-
特徴
- Adobe Illustrator専用形式
- ベクター形式
- レイヤーや文字情報を保持できる
- 編集作業の元データとして扱うことが多い
- ラスタ形式に変換可能
-
用途
- ロゴやイラストの制作
- 印刷物の入稿データ
- Webやアプリに使う際はPNGやSVGに書き出して利用
-
注意点
- Illustratorがないと開けない
5. PSD
-
特徴
- Adobe Photoshop専用形式
- ラスター形式
- レイヤー、マスク、フィルター、透明度などを保持
- 可逆保存（品質劣化しない）
-
用途
- 写真加工やUIデザインの元データ
- WebやアプリではPNGやJPEGに書き出して利用
-
注意点
- Photoshop以外では開けない
圧縮形式について
圧縮形式には 「可逆圧縮」と「非可逆圧縮」 の２種類あります。
可逆圧縮
圧縮しても元のデータを完全に復元できる方式。
-
特徴
- 保存しても画質は劣化しない
- 文字やイラスト、スクリーンショットのように「正確さが重要な画像」に向いている
- ファイルサイズは大きくなりやすい
非可逆圧縮
圧縮時に一部の情報を捨てて、データを小さくする方式。
-
特徴
- 保存のたびに画質が劣化する
- 人間の目で気づきにくい部分を削って容量を削減している
- 写真やWeb用画像など「多少の劣化より容量の軽さが重要な画像」に向いている
画像形式について
画像形式には 「ラスター形式」と「ベクター形式」 の２種類あります。
ラスター形式
ピクセル（点）の集合として画像を表現する方式。
-
特徴
- 1つ1つの点に色情報を持つ
- 1枚の画像を無数のドットで表現しているもの
- 拡大すると「ぼやける／ギザギザになる」
- 写真のような複雑な表現に強い
-
拡張子
- .jpeg .png .PSDなど
ベクター形式
数式や座標で図形を表現する方式。
-
特徴
- 形を構成するデータ（曲線の曲がり具合・色・線）などを全て数値で定義している
- 拡大しても画質を維持できる
- ラスター形式に比べて軽量
-
拡張子
- .ai .svgなど
まとめ
最初はpngとjpeg何が違うんだろうくらいで調べ始めたのですが画像形式や圧縮形式など、画像の基礎知識がそもそも足りていなかったことがわかりました。
（業務でSVGなら画像のサイズ関係ないから1個で済むよと言われことがあるのですが、当時はよくわかっていませんでした。ベクター形式だから自由に大きさを変えても画質が落ちないのか！と調べたことで理解できました。。。)
画像データを取り扱うことが増えてきたので今後も理解を深めていきたいです。
参考