画像のイロハ

今回はWEBサイトを彩る画像について説明していきます。画像は上手く使えば非常に効果的ですが、 使い方を間違えればカッコよく見せるどころか逆に汚くなってしまったり、閲覧者に負担を与えてしまいます。 そういうことの無いように注意しましょう。

---

WEBで使われる画像の種類

WEBサイトで使われる画像の拡張子は、jpg、gif、pngの3種類です。まずはそれぞれの特徴から。

jpg

ジェイペグと読みます。ほぼフルカラーが使え、グラデーションが上手に表現できます。 写真とか、グラデーションを多用した画像に向いています。画質を落としすぎるとノイズがでたり、 文字がぼやけてしまいます。

gif

ジフ（ギフ）と読みます。256色しか使えませんが、背景を透過させたり、簡単なアニメーションが 作れます。使用している色数が少ないイラスト画像などに向いています。背景を透過させるときは ハロー現象に注意する必要があります。 特許問題がありますが、日本でも2004年の6月に特許が切れたので、 フリーソフトでも使えるようになったと思われます。

png

ピングと読みます。特許の絡むgifに対抗するために開発されました。jpgのようにフルカラー表現も できるし、gifより高度な透過機能も備えています。ただ、IEなどではまだ上手く透過ができません。 使うときには注意が必要です。

画像サンプル
jpgサンプル1kb	pngサンプル3.7kb	gifサンプル4.8kb
pngやgifだとファイルが大きくなり、グラデーションが上手く表現できないのが分かると思います。
jpgサンプル2.5kb	pngサンプル2.1kb	gifサンプル1.7kb
色数の少ない画像の場合、jpgだとノイズ（変なつぶつぶ）が出ているのが分かると思います。

＊違いが分かりやすいように画像は拡大してあります。＊

WEB用の画像を作るときに注意したいこと

画像を作るときには次のようなことに注意すると、よりクオリティーの高い素材を制作することができます。

ファイルサイズと減色

ファイルサイズは小さいほうがいいので、ギリギリまで画質を落としたり、減色して使用する色数を減らしましょう。 ただし、限度を考えないと汚くなったりするので、納得できるまで繰り返し調整する必要があります。 イラストや、写真がメインのコンテンツならば、画質を落とす必要はないと思います。

透過とハロー

gifで背景を透過させるときはハロー現象に気をつける必要があります。

画像サンプル
背景を透過していない場合	ハロー現象が出てしまった場合	ハローが目立たないように処理した場合
ハロー現象は、マットカラー（画像の背景色）をページの背景と同じような色にして保存すれば、 ある程度防ぐことができます。 ＊画像の透過方法は画像を制作したソフトによって違うので各自で確認してください。

大きな画像を使うとき

大きな画像を使うときは、極力ファイルサイズを小さくして、何枚かに分割（スライス）したり、 プログレッシブやインターレース機能（画像を徐々に表示させていく機能で、保存時に選択できることが多い） をつかって、閲覧者にストレスを与えないように気をつけたいですね。

---

画像を自分で処理したり、作成するのは非常に難しいです。なので普段は素材屋さんから借りてきたものを利用すればいいと思います。 でも自分のサイトのロゴや、自分で撮った写真を載せるには自分で作成したり、修正しなければなりません。 今回はそういう時に気をつけたいことを紹介しました。
画像の修正や作成に使えるソフトは山ほどあるので、自分でお気に入りのを探してみてください。 私はGIMPとイラストレーターをメインで使っています。 その他にもありますが、別の機会に紹介したいと思います。

---