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

2019 1/30

2019.01.30

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

RGBとCMYK

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

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

解像度とは

同じくPhotoshopでファイルを新規作成する際に出てくる解像度という欄があります。
これはWebのときは72と設定します。解像度は画面上にあるピクセルの数となります。

Web用の画像の場合にはdpiは72以上にしても画質が良くなることはありません、Web用の解像度というと単純にピクセルの数をさすと思っておいてください。（Retina対応の場合解像度を2倍にするのではなくて、画像のサイズを2倍にして、CSSでサイズのコントロールをしましょう）実際に画像をこちらのページで比較してください

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

画像はそれぞれの用途に応じて適切な種類をえらぶ必要があります。
Photoshopなどで画像を作成したときに、いったいどの形式で画像を書き出せばよいのでしょうか。

	JPEG	PNG	GIF	SVG
	写真やグラデーションの表現に適している	CMYK不可印刷には適さない	アニメーションが可能 CMYK不可、印刷には適さない	ベクター画像ウェブに適している
透明	不可	◯	◯	◯
容量	比較的軽い	場合によってはだいぶ重い	軽い	軽い
劣化	非可逆圧縮	可逆圧縮	可逆圧縮