Webの2種類の画像 JPEGとGIF
WEB上の画像には主に2種類あります。JPEGとGIFです。どちらの形式で保存するかはその画像の種類によります。このGIFアニメ講座ではもちろんGIF形式を使います。
JPEG形式
ジェイペグ・Joint Photographic Expert Group
1670万色のフルカラーが使える。圧縮すると画像が劣化し、にじんだような汚れが目立つ。単一色でべた塗りされた広い部分は、劣化によるにじみが目立つ。写真のような階調が多い画像に向いている。
GIF形式
ジフ・ギフ・Graphics Interchange Format
最大256色までしか使えない。べた塗りされた広い部分もにじみがなく、美しい。透明色が使える。アニメーションが作れる。圧縮による劣化が少ない。イラストレーションの保存に向いている。
さらに別のファイル形式を学びたい方は、フォトショップ道場7日目「画像ファイルの種類いろいろ」を見てみてくださいね☆
ところで「GIF」って何て読むの？
「ジフ」と読むか「ギフ」と読むかはどっちでもいいんですが、アメリカでは「ギフ」と発音することが多く、日本では「ジフ」が一般的です。
ギフと読んで誰かに「それジフだよ」と笑われたら、「あれ？ アメリカではみんなギフって発音してたけどなあ」と言ってみたりするのは……ちょっとイジワルかな。
追記：2019年03月03日
2013年05月22日GIFの生みの親スティーブ・ウィルハイト氏による発言で、ついに長年に渡るギフ・ジフ問題に終止符が打たれました。
GIFの読み方は「ジフ」だそうです。この発表によって「ギフ」と読んでいた海外勢に衝撃が走りました。Oh, my God!!!
同じ画像に見えても、重さは違う？
ウェブ用になるべく軽く作るという意味で、減色処理は非常に重要です。特にアニメでは減色しないと重い画像になってしまいます。
GIF画像
重さ：27キロバイト
256色で保存
GIF画像
重さ：12キロバイト
32色で保存
上の画像を見てください。2つの画像はほとんど同じように見えますが、重さが2倍以上も違います。それは使用している色の数が違うからなんです。ウェブサイトでは軽いページが好まれます。そこで画像を軽くする方法を学びましょう。
ImageReadyで減色処理をしてみよう！
最適化パレット
【ウィンドウ→最適化】で表示してください 。
1……「ファイル形式選択」のポップアップです。GIF形式、JPEG形式を選ぶことができます。
2……GIF画像のパレットを設定できます。「知覚的・特定・割付・WEB…・」と項目が並んでいます。以下の4種類が重要です。
・知覚的……人間の眼に自然に見えるようにした色のパレット
・特定……主にWEBで使われる色に重点を置いたパレット
・割付……画像で最も多く使われている色を元に作られたパレット
・Web……Webで使われる216色のパレット
画像を見ながら、どれか一つ適切なものを選びます。自分がいいと思ったものでOKです。
3……GIF画像のパレットを設定できます。「ディザなし・誤差拡散法・パターン・ノイズ」と項目が並んでいます。これも画像を見ながら、どれか一つ適切なものを選びます。
4……GIF画像で使用する色の数を選べます。
5……GIF画像で背景を透明にする場合選びます。
6……マットです。後に学ぶ「透過処理」で使用します。
カラーテーブル
【ウィンドウ→カラーテーブル】を表示します。このカラーテーブルを見ながら、最適化パレットの4の部分「カラー」という所で色数「2、4、8、16、32、64、120、256」を選びます。赤い□で囲まれた部分が色数です。
この数値を変化させてみると、カラーテーブルの色が増えたり減ったりしますね。
小さい数字を選ぶと画像が軽くなりますが、その分荒い画像になります。目で見てこの辺でギリギリというところまで色を減らしてください。
ImageReadyの画面は、最適化、2アップ、4アップがありますから、使いやすい画面にして、比べてみてください。画面についてはGIFアニメ講座1をご覧下さい。
色の中には丸い印がついたものがあります。上の図でいうと、白い色に白い丸がついています。これはWebセーフティーカラー（216色）です。Web上で画像を見る場合、セーフティーカラーを選んでおくと極端に違った色で表示されるのを防ぐことができます。
色をロックする方法
減色でなくしたくない色をロックする減色でなくしたくない色をロックする
またどうしても、この色だけははずせない！ という色があるのに、減色した段階で自動的に、その色が削除されてしまうことがありますね。
そんな場合はロックをします。まずはどうしても必要な色（この場合は黄色）をクリックします。その色の周りが白い線で縁取られました。
その状態で、赤い丸の部分の鍵のマークのアイコンをクリックします。黄色の四角の右下に小さな四角形がつきました。
この色はロックされている状態なので、最適化パレットの「カラー」で色を減らしても削除されなくなるのです。
Photoshopでも保存の段階で減色処理を行うことができます。やり方は同じなので、ぜひ覚えておいてください。
画像の周りのぎざぎざ「ハロー」とは
GIF画像は背景を透明化できるところが便利なのですが、やり方を間違えると素人っぽさ爆発の情けない画像になってしまいます。
その最たるものがハローです。ハローとは白または黒っぽい縁取りができてしまうGIF画像です。
これは透過処理をせずにそのまま背景を透明にしたGIF画像です。
わかりやすいようにピンク色の背景色のサイトに置きました。ライオンのたてがみの周りに細い黒ふちが出来ています。これがハローです。
|
ちなみにハローとは「後光」という意味です。画像の周りに白や黒のギザギザが出てしまうんですね（もちろんわざと目立つように縁取っている場合はこれでいいんですが）。これは画像の色とHTMLの色のわずかな差が生じて、画像の周りに枠が出来てしまうからです。
JPEG画像にするか、GIFで透過処理をするか
これを防ぐには2種類の方法があります。
【1】ぼかしが美しく見えるJPEGで保存すること。
【2】GIFで透過処理をすることです。
ただJPEGでは透過できませんし、背景にWebセーフティーカラーを選んでも、微妙に色がずれてしまうことがあります。
これは背景をピンク（#FF99CC）で塗って、JPEGで保存した画像です。
|
PEGの画像を背景色ピンク（#FF99CC）のテーブルに置きました。わずかに色の違いがあり、うっすらとした四角形が見えてしまっていますね。
透過処理の方法
ハローを防ぐにはマットという機能を使います。先ほどの最適化パレットを見てください。マットと書かれている部分をクリックします。
言うまでもないことですが、このパレットの「透明部分」というところにチェックが入ってないと、背景が透明化されませんよ。
すると、左のようなカラーピッカーが表示されます。この中から、ＨＰの背景色を選びます。直接色をクリックしてもいいですし、右下の□の部分に数値を入れてもOKです。
左下の「Webセーフカラーのみに制」にチェックを入れるのを忘れないでくださいね。
こんな感じに修正されました。ライオンの周りに、先ほど選択した色、ピンク（#FF99CC）で細い縁取りが出来ましたね。
|
背景色ピンク（#FF99CC）のテーブルの中に、マットで透過処理したGIF画像を置いてみました。背景に自然になじみましたね。こうやって自動的に縁取ってくれることによって、ウェブ上で見たときに美しい画像を表示できます。
減色と透過についてはもう大丈夫です。「早くGIFアニメ作らせろ！」という声が聞こえてきそうですから、次回からは実際にGIFアニメに挑戦しましょう。
このブログは2001年07月23日開設のサイト「幻想画廊」を2019年にWordpressで移築したものです。この記事は17年前の、2006年05月09日に書かれました。文章の内容を変えずにそのまま転載してあります。リンク切れなど不備もありますが、どうぞご了承くださいませ。
