画像の扱い初歩の初歩！色の仕組みと画像の形式

ホームページ、Webサイトをつくっていく上で、どうしても知っておきたい画像や色の知識をまとめます。

色の仕組み、RGB、HSV、CMYK
- RGB
- 覚えておくとベター：CMYK
画像の形式
大きさ・ピクセル数
解像度
ビットマップとベクター
まとめ

色の仕組み、RGB、HSV、CMYK

RGB

色の調整で一番よく出てくるのは、「RGB」です。

R=Red（赤）
G=Green（緑）
B=Blue（青）

３つともフルパワーにすると「白」になり、３つとも最小にすると「黒」になります。

数字アレルギーの方は、画像を扱うソフトの色指定の画面を見ると、直感的に理解しやすいです。たとえば、GIMPの画面はこんな感じです。

グリグリ動かしながら色の変化を見ると、何がしたいのか直感的に理解できると思います。

HTML・CSSで出てくる色指定は基本RGBなので、まずはこれに慣れていきましょう。数字指定などする場合も、いまはGIMPのような直感的に色を確認できるツールがありますので、これらのソフトを使って色を決めるとよいです。

ディスプレイは、RGBを1個ずつ含んだものすごく小さい点を、たくさん並べて作られています。

覚えておくとベター：CMYK

これに対して、紙の印刷は、「CMYK」という色の仕組みで構成されています。

C=Cyan（シアン）
M＝Magenta（マゼンタ）
Y=Yellow（イエロー）
K=Kuro（黒）（※実際には、Key Plateの頭文字ですがこちらのほうが覚えやすいです笑）

ディスプレイと同じように、印刷は、CMYKの度合いを1個1個調整したものすごく小さい点でできています。ものすごく拡大すると、CMYKの4つの点が見えてきます。

印刷用のデータからWebページに持ってくるときには、色をCMYKからRGBに変換するようにしましょう。

画像の形式

以前は画像の形式はたくさんあったのですが、いまは次の2つに集約されつつあります。

PNG（迷ったらコレ）
JPEG（写真だったらコレ）

迷わずに済むよい時代になりました。

最近では、「SVG」の利用が増えているようです。「PNG」や「JPEG」は、「ビットマップ形式」と呼ばれ点々の集合でできています。それに対して「SVG」は「ベクター形式」と呼ばれる形式で、「ビットマップ」に比べるとファイルサイズが小さくなることが多いのですが、描画するときに計算がたくさん必要で時間がかかるデメリットもあります。

以前は「ビットマップ」と「ベクター」の違いはとても重要でしたが、現在は、通信がものすごく速くなって、表示する機械（パソコンやスマホ）が高性能になったために、両者をきっちり使い分けることがそれほど重要ではなくなってきてます。

また、WordPressで利用するとき、「SVG」は、PNGやJPEGと同じようにアップロードできません。これは、「SVG」にセキュリティ上の難点があるからだそうです。

大きさ・ピクセル数

画像の大きさは、ピクセル数で表されます。前述の、RGBやCMYKでできている点の数を、縦横で数えるだけです。

解像度

画像の形式がとてもシンプルになったことに対して、解像度は年々複雑になってきています。

解像度とは、前述の「点々」の細かさのことです。

以前は、２つを覚えればOKでした。

72dpi＝画面表示用、
Web用350dpi＝印刷用

「dpi＝dots per inch」とは、1インチ当たりの点々の数です。数字が大きいほどきめ細かくなる、と覚えておけば、とりあえず大丈夫です。

解像度が複雑になった理由は、「高解像度」と呼ばれるディスプレイがたくさん登場したからです。Apple社から「Retinaディスプレイ」が登場し、通常の２倍ぐらい細かいのでキレイ、ということで、MacやiPhone、iPadに取り入れられました。他のスマホメーカーも追随し、いろいろな解像度の画面が出て、つくり手としてはどうしたらよいのかが難しくなりました。

また、Webページの作成技術として「レスポンシブ・デザイン」という手法が広がりました。これは、画面の大きさに応じて表示のしかたを変える、という技術の総称です。多くの場合、その中に含まれる画像の大きさも拡大・縮小するように調整します。

よって、高解像度の画面にも対応するように、表示する大きさよりもかなり大きい画像を用意して、表示するときに縮小する、というWebページが増えてきました。

これが、ベクター形式である「SVG」の利用が増える背景になっています。