透明ディザは何してるんだろう?「あり」に設定している方がギザギザがひどくなっているみたいですけど。この例では透明ディザはうまく機能していないようだね。ディザはGIFやPNG-8にはなくてはならない機能なんだよ。下の図はこのページの最初で、人間がなだらかに変化する色に鈍感なことを説明するために使ったカラースケールだけど、ディザありのGIFで保存しなおしてみたよ。ディザというのは少ない色で疑似的に多階調を表現する技術なんだ。この図のカラースケール部分は赤、緑、青、そして黒の4色しか使っていないけど、ちゃんと多階調になっているだろう。要するに点の密度を変えてグラデーションっぽく見せているんだね。目の錯覚を利用して少ない色で多くの色を表現することができるので、256色しか使えないGIFやPNG-8にとって、なくてはならない機能なんだ。!だからGIFとPNG-8にしか設定項目がないのか。1677万色が自由に使えるJPEGとPNG-24は、ディザを使って疑似的に多階調を表現する必要がないからね。いえばファイル形式によって色数が違いますね。色数が少ないとファイルサイズが小さくなるのは分かるけど、JPEGとPNG-24で使える1677万色とGIFとPNG-8で使える256色って、どうやって決めているんですか?とてもいい質問だね!GIFとPNG-8が256色までしか表現できないことを知っておくことはとても大事なことだよ。ないとせっかく作った画像が思ったとおりに表示されないことがあるからね。color)というので覚えておいてね。トゥルーカラーは赤緑青(Red・Green・Blue)の三色がそれぞれ256階調(2の8乗)を持ち、それらが組み合わさって約1677万色(2の8乗×3=2の24乗)を表現するRGBカラーのことだよ。別名24bitカラーともいうよ。それに対して、インデックスカラーはトゥルーカラーの中から任意で抜き出した256色のことだよ。別名8bitカラーともいうよ。GIFとPNG-8はピクセル毎に色情報を持つ代わりに、インデックスカラーを入れたカラーテーブルの何番目の色という情報を持っているんだ。することでデータ量を少なくしているんだね。インデックスカラーに好きな色を選べるということは、保存しようとしている画像が256色より少なければ、GIFやPNG-8で保存しても元の画像の色を忠実に表現できるということですね。使っている色が256色以内であれば、GIFやPNG-8で保存することを考えてもいいね。あっ、でも保存しようとしている画像の色数ってどうやって調べればいいんだろう?画像で使われている色数が256色までだったら、次の方法で調べることができるよ。残念ながら、それより多くの色を使っている場合はフォトショップだけでは色数を調べることができないんだ。メニューから「イメージ(I)」>「モード(M)」>「インデックスカラー(I)」を選択して「インデックスカラー」ダイアログを表示させよう。「パレット」ドロップダウンメニューの「使用中の色を全て割り付ける」が選択できれば、その画像で使われている色数は256色以内ということが分かるよ。正確な色数が知りたければ、Shift+Ctrl+Sを押して、「Web用に保存」画面を開こう。カラーテーブルエリアに色数が表示されているはずだよ。保存しようとしている画像が256色より多くの色を使っている場合、GIFとPNG-8で保存したらどうなるんですか?一部の色が近似色に置き換えられてしまうよ。透明も1色にカウントされて、透明を使っている場合は透明1色+255色になるので気をつけてね。GIFとPNG-8は特徴や保存する時の設定項目が似ているけど何が違うんですか?圧縮方式が違うよ。GIFは「LZW」、PNGは「Deflate」という圧縮方式を採用している。GIFよりPNGが後に開発されたからといって、PNGの方が圧縮効率がいいというわけではないので勘違いしないでね。画像によってGIFの圧縮方式の方がファイルサイズが小さくなる場合もあれば、その逆もあるよ。保存する時はそれぞれのファイルサイズや見た目を比較してベストな方を選ばないとダメだよ。それとGIFは4つのファイル形式の中で唯一、画像をアニメーションさせることができるんだ。「GIFアニメ」や「アニメーションGIF」なんて呼ばれているよ。画像を重ねて順番に表示させているだけなんだけど、プログラムを使わずにイラストなどを動かせるのでとても便利な機能だよ。詳しい説明や作り方は以下のページで紹介されているので興味があったら見てみるといいよ。動くアイコンを作ろう!フォトショップを使ったGIFアニメーションの作り方GIFアニメとは複数の写真やイラストを重ねて一定の間隔で順番に表示する動画のことです。フォトショップの「タイムライン」パネルを使って、ドット絵のGIFアニメを作る方法を紹介します。04:31Webサイトでよく見る動くイラストはGIFだったのかぁ。面白そう、私も作ってみよう。GIFやPNGで保存する時にファイルサイズを小さくする方法ってありますか?そうだな。GIFとPNGは横に同じ色が連続しているほど圧縮率が高くなるというのは覚えておくといいよ。GIFとPNGは画像を横1ピクセルの列毎に圧縮処理をしていて、同じ色のピクセルが連続する箇所を記号化してファイルサイズを小さくしているんだ。”と色情報を持っているところ、GIFやPNGは”赤10”と読み替えて色情報を持つんだ。横ストライプの方が縦ストライプよりも圧縮率が高くなってファイルサイズを小さくできるんだよ。確かに横ストライプのJPEG画像をGIFとPNGに保存した方が圧縮率が高いですね。デザインする時に頭の片隅に入れておくといいよ。他にGIFやPNGで保存した方がいい場合はありますか?GIFやPNG-8は、一般的にはJPEGに向いていない画像。イラストなど、色の境目がはっきりしている画像が向いているよ。256色までなら元の画像で使われている色をちゃんと再現してくれるし、ファイルサイズが小さくなる可能性があるしね。GIFやPNG-8に向いていない画像はJPEGに向いている画像ですね?そうだね。風景写真のような多彩な色がなだらかに広がる画像は256色までという色数制限があるので、どうしても再現性に乏しくなってしまうので向いてないね。アンチエイリアスがりんかく部分に使われている画像以外でPNG-24で保存した方がいい画像はありますか?トゥルーカラーと可逆圧縮というPNG-24の特性を活かせる画像だね。GIFとPNG-8が苦手な風景写真のような多彩な色がなだらかに広がる画像を劣化させたくない場合はPNG-24で保存するしかないよ。あとはスクリーンショット画像はたくさん色を使っていて、色の境目がはっきりしているのでPNG-24での保存に向いているよ。スクリーンショットかぁ、確かにPNG-24で保存したほうが良さそうですね。色も文字もいっぱい使われているし。iPhoneでも写真はJPEG、スクリーンショットはPNGで保存されているよ。iPhoneがそうなら、それにならった方が良さそうですね。きつね師匠、最後にGIFとPNGの正式名称というか、元になった名称を教えてください。Group」でしたよね。Graphics」だよ。他に何か聞いておきたいことはあるかい?保存する時にオプションで選べるJPEGのプログレッシブ、GIFとPNGのインターレースとは何ですか?両方ともデータを分割送信して順次画像を表示する技術だよ。Webサイトでこれを設定した画像を表示すると、最初にぼやけた画像が表示されて、次第に鮮明になっていくよ。カメラのピントが徐々に合うような感じかな。データ転送によるネットワーク負荷を軽減することが出来るし、見ている人にはダウンロード時間を短く感じさせることができるんだ。すばらしい技術なんだけど、ネットワークの整備が進んだ今では効果を体感することがほとんどないね。ファイルサイズが大きく変わることがあるので無理に設定することはないよ。きつね師匠、どうもありがとうございました。教えてもらったことを活かして、きれいで速いWebサイトを作ってみます。コメントをキャンセルメールアドレスが公開されることはありません。