remove
powerd by nog twitter

軽い画像の作り方

ウェブサイト構築のヒント集 > 「軽い画像の作り方」

昨今の色事情

使用されている色数が少ない画像ほど、容量が小さくて済みます。 ちなみに、CSS で色の指定を行うとき、 #000000 から #ffffff までのパターンがあり、その組み合わせは膨大な数に達します。

ディスプレイにおける発色は RGB(赤・緑・青)の3要素の組み合わせよって表示されますが、 赤の光の強さは2桁の16進数で求められる為、16の2乗で256通りあります。 同様に緑と青の発光強度も256通りあるので、色のパターンは256の3乗で16777216通りあるワケです。1677万色もあるんですね。

1677万色というシステムは24bitらしいんですが、最近のディスプレイでは42億9496万色の32bitが主流です。 CSS で指定可能な1677万色という色数は現状のディスプレイの対応具合を考えると、十分に活用してよい色数だといえます。 ただし全く同じ色指定であっても、Windows と Macintosh では微妙に違いますし、ディスプレイにも CRT と 液晶 と PDP が ありますし、ひとえに液晶といってもメーカーとグレードによって見え方は全然違います。

ウェブサイトを作るとき、配色のバランスをあれやこれやと考慮して微調整するものですが、 あまり最先端の高機能ディスプレイは使わない方が良いかもしれません。 高機能ディスプレイでは明暗や発色の具合がいい具合に再現されるのですが、 だからといって淡い色使いでウェブページのアクセントを作ってしまうと(濃淡が)微妙なものになってしまいます。 安物ディスプレイを使っているビジターだと、この微妙な濃淡の見分けがつかないかもしれません。 色のアクセントは割と大雑把に変化を付けた方が良いでしょう。


文字を含んだイメージ画像

写真は jpg で表示させるべきですが、文字を含む画像や概略図は gif(あるいは png)で扱った方が 綺麗に表示できます。

多色 jpg
↑ 多色 jpg 変換(12.7 KB)
色数の少ない画像を jpg 形式で保存すると、色と色の境目がにじんだ感じになります。 なので、文字の周囲などは若干汚くなってしまいます。 これは、 jpg が極度な圧縮を行う過程で、グラデショーン的に色をにじませる処理を行っているからだと思われます。 太陽の周りの空気が赤みを帯びるように、自然な色調を考えると色は周囲と溶け合っていくものです。 だから、 jpg のにじみ具合は写真の色調だとマッチします。

多色 gif
↑ 多色 gif 変換(7.70 KB)
gif は256色しかないので、対応していない色が当然あるワケです。 ブツブツ(点々)を作って、似た色を再現しようとします。

256色 jpg
↑ 256色 jpg 変換(12.9 KB)
一旦、256色に落としてから jpg で保存しています。 ピンク色の文字周辺が際立ってにじんでいます。

256色 gif
↑ 256色 gif 変換(5.15 KB)
一旦、256色に落としてから gif で保存しています。容量も少なく、スッキリとした画像になります。 あるいは逆に、最初から256色パレットで画像を作って gif 保存するのも有効な手段です。


gif で壁紙を作る

gif は256色しか持っていないので、対応していない色を含んだ画像を gif に変換すると近似色を表現しようとして 模様を作るコトがあります。この性質を利用して壁紙を作るコトもできます。

素材
まず適当な写真(jpg)を用意します。同系色でまとまるように、適度にトリトミング(切り抜き)してやってください。

作成手順2
次に先ほど用意した画像よりも大き目の台紙(jpg)を作ります (今回は数種類に色分けしてみました)。 そして、台紙の上に先ほど用意した画像を乗せて合成、保存(jpg)します。

作成手順2
最後に jpg から gif に変換してやると、台紙の部分に色ムラができます。 この色ムラの部分を切り取って(20px 四方とかでよい)、背景画像に指定してやると壁紙として機能します。 また、中央の写真部分を切り取って利用するのもアリです。

落ち着いた草色。

シックなライト・グレー。

目を引くパープル壁紙。

ナイロン光沢でビビッドに。



©2004 webman60kg / リンクはご自由にどうぞ
E-mail : webman60kg@infoseek.jp