ウェブ制作で利用する「色」と「画像」の設定について

画像を作るためにPhotoshopを使うときに「Web用の画像を作るか・印刷用の画像を作るか」によって設定すべきことがあります。

カラーモード・解像度

カラーモードにはRGBカラーとCMYKカラーの２種類があります。
おおざっぱに説明すると「画面で見る色（RGB）」と「印刷する色（CMYK）」となります。

これを間違えて設定すると画面で思っていたピンク色にならない、印刷したときに思っていた緑ではない、などといった相違が起こります。

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

解像度とは画面上の 1インチの中にあるピクセルの数（画像の密度）となります。

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

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

画像はそれぞれの用途に応じて適切な種類をえらぶ必要があります。
Photoshopなどで画像を作成したときに、そのまま保存するとPhotoshopのファイル（.psd）となります。

編集用ファイルとしてpsdファイルは保存しておく必要がありますが、お客様に提出したり、Webサイトに読み込む画像は別途必要です。いったいどの形式で画像を書き出せばよいのでしょうか。

拡張子	特徴
.psd	Photoshopを作成したときに保存すると生成されるファイル。 レイヤー情報を保持しており編集・修正が可能（つまりこの拡張子のファイルを保存しておかないと、文字や位置の調整は不可能）
.jpg	写真やグラデーションの表現に適している 非可逆圧縮（保存の度に画質は劣化） 透過部分がない写真画像はJPGを選ぶのがおすすめ
.png	透明背景の画像に適している 可逆圧縮（画質が劣化しない） 容量が大きくなりがち
.gif	容量が小さいが256色しか表現できない
.svg	ベクター画像 Webに適している
.webp	画像容量が軽い 透明背景が可能 非対応ブラウザがあるため、使用は注意が必要 WebPはウェッピーと読む

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

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

ビットマップ（ラスター）画像

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

ベクター画像

• ソフト：Adobe Illustrator、他
• 拡大縮小してもクオリティは変わらない（ベクターデータは数値データをもとにして演算によって画像を表現するため）
• ロゴを作るときはこっち（看板にしてもウェブにしても同じクオリティ）