ウェブ制作に関係する「色」と「画像」のおはなし

画像のいろんな拡張子：JPEG、PNG、GIF

	JPEG	PNG	GIF
色の数	約1677万色	約1677万色	256色
透明	不可	○	○
容量	比較的軽い	場合によってはだいぶ重い	軽い
劣化	非可逆圧縮（上書き保存の度に劣化する）	可逆圧縮	可逆圧縮
使いどころ	写真やグラデーションが入ったものに最適	写真やグラデーション、ベタ塗りなど両方OK、写真と透明を同時に実現したいときなど	単色・ベタ塗りのアイコンなど、アニメーション画像も可

Photoshopで新規作成する時のRGBとCMYK？解像度？

RGBとCMYK

ウェブで使う画像を作るためにPhotoshopを使うときには必ずカラーモードを「RGB」にします。
Photoshopでファイルを新規作成する際は、最初の画面で「カラーモード」が「RGBカラー」となっている状態で「作成」です。

ここではRGBカラーとCMYKカラーという２種類からカラーモードを選ぶのですが、このカラーモードとはなんでしょうか。

この２種類から選ぶ理由をおおざっぱに言うと「画面で見る色」と「印刷する色」とわけることができます。RGBカラーは画面で見る色、CMYKカラーは印刷する色、とおぼえましょう。

解像度とは

同じくPhotoshopでファイルを新規作成する際に出てくる解像度という欄がありますね。
これはWebのときは72、印刷のときには300〜350dpiです（解像度はdpi、1インチの中にドット(点)がどれだけあるか）

Web用の画像の場合にはdpiは72以上にしても画質が良くなることはありません、Web用の解像度というと単純にピクセルの数をさすと思っておいてください。（Retina対応の場合、解像度を２倍にするのではなくて、画像のサイズを倍にする）

実際に画像をこちらのページで比較してください

ビットマップ画像とベクトル画像について

拡大した時の差は下記の通り

ラスター画像

• ソフト：Adobe Photoshop、他
• 画像は拡大すると荒れる
• 写真やグラデーションなど美しい色合いが表現できる
• スマホなどで撮った画像はこのラスター画像である

ベクター画像

• ソフト：Adobe Illustrator、他
• 拡大縮小してもクオリティは変わらない
• ロゴを作るときはこっち（看板にしてもウェブにしても同じクオリティで見える）