デザインで使用する画像形式あれこれ

専門用語の説明はしないので、わからない言葉は調べてください。

Illustrator、Photoshopなどのアプリケーションで使用する、または作成して書き出す画像形式にはいくつか種類があります。

形式ごとに得手不得手があるので、注意が必要です。

JPG/JPEG（Joint Photographic Experts Group）

フルカラー（1,677万色）をサポートしているので、細かい色の表現ができる。写真・グラデーションに向いているファイル形式。圧縮率が高いのでデータを軽くすることができるが、非可逆圧縮はできないので圧縮を繰り返すと劣化する。透過はできない。

PNG（Portable Network Graphics）

イラストなど、色数が多くないものに向いている。圧縮による画質の劣化のない可逆圧縮の画像形式。データによっては非常に重くなるので、JPGとうまく使い分けることが必要。透過対応。

GIF（Graphics Interchange Format）

現在はあまり使われなくなった形式。データが軽い、透過対応、アニメーションが作れる、可逆圧縮の画像形式などの利点も多いが、色数に制限があるため複雑な色の表現はできない。

SVG（Scalable Vector Graphics）

ベクター形式の画像、アニメーションも作れる。ベクター画像なので、レスポンシブデザインやレティナディスプレイなどディスプレイサイズ・解像度が異なっても画像が荒れることがない。ロゴやアイコンなどに使用されている。おもにwebで使用。

WebP

JPGやPNGと比べると、画質をほぼ損なわずファイルサイズを大幅に圧縮できる。可逆圧縮・非可逆圧縮を選択可、アニメーション、フルカラー対応。おもにwebで使用。

webでは画面の表示速度にかかわるので「画像の軽量化」は、ずっと問題となっていることです。新しい技術が出てきて、選択肢が増えることは良いことですね。