・できるだけファイルサイズを小さくしたい画像うん、うまくまとめられた表だけど、どこが分からないかな?せっかくだからこの表を見ながらGIF、JPEG、PNGの違いを説明していくよ。この表を理解できれば、ファイル形式で迷ったらまたこの表に立ち返ればいいからね。!それではまずは読み方を教えてください。上からGIFの読み方は「ジフ」、拡張子は「.gif」。JPEGの読み方は「ジェイペグ」、拡張子は「.jpeg」または「.jpg」。PNGの読み方は「ピング」または「ピーエヌジー」、拡張子は「.png」だよ。「ジフ」?「ギフ」って言っている人がいたような。いちおうGIFの開発者が読み方は「ジフ(jif)」と発表したんで、一般的には「ジフ」かな。どっちでも通じるから好きな方で読めばいいよ。分かりました!そうしたら次の質問は・・・。えっと、どうしてJPEGだけ画質の劣化があるんですか?GIF、JPEG、PNGはみんなファイルサイズを小さくするために元の画像を圧縮しているのは知っているかい?えー、初めて知りました。compression)という画像データの一部を捨てる圧縮方式を採用しているんだ。データの一部を捨ててしまうので見た目が元の画像と違ってしまうんだよ。画質が劣化してしまうんだね。不可逆という名前のとおり、JPEGで圧縮したファイルは2度と圧縮前の状態に戻すことができなくなるので注意しないといけないよ。不安だったら保存する前にバックアップを取っておいた方がいいね。compression)を採用しているよ。こっちは見た目が元の画像と同じ、つまり画質の劣化は無いんだ。Groupという、規格をまとめた組織の名称が由来しているよ。この名称から分かるとおり、もともとJPEGは主に写真画像の保存とそれを通信に使うという目的で作られたんだ。写真はイラストなんかと比べるとたくさんの色が使われているよね。この色の情報を1つの画像ファイルで持とうとすると、とても大きなファイルサイズになってしまうんだ。これだと保存や通信に利用するのは難しい。そこでJPEGは思い切って色情報の一部を捨てることにしたんだ。すれば、捨てた分だけファイルサイズを小さくできるからね。保存や通信に使うという目的のために画像のクオリティを犠牲にしたんだよ。元の画像から色情報の一部を捨てても大丈夫なんですか?そうだね。画像のクオリティが保てるのか不安だよね。赤、緑、青それぞれの色が2階調から256階調で黒色に変化しているカラースケールだよ。差が分からないものがないかい。大丈夫、ほとんどの人は128階調と256階調のカラースケールが同じに見えるはずだから。色によっても差を感じることができる階調が違うはずだよ。ワシなんか、青が全部同じに見える。私も青がちょっと厳しいかも。分かったかい?人間はなだらかに変化する色に少し鈍感なんだよ。色を変えたり省いたりしても分からないのさ。JPEGはどうやって捨てる色情報を決めているんですか?JPEGはいろんな計算式を使って画像が持っている色情報を調整し、最終的に無くても見え方に影響しない色情報を抽出しているよ。この抽出された色情報を捨てることでファイルサイズを小さくしているんだ。これをJPEGの圧縮アルゴリズムと呼ぶんだ。JPEGは保存するときに画質を選べるけど、最高画質(画質100)でも劣化するんですか?残念ながら劣化するよ。さっき話したとおりJPEGは色情報の一部を捨てることでファイルサイズを圧縮しているからね。編集中の画像は必ずPSDやPNGなどの画質の劣化の恐れがないファイル形式で保存しないとダメだよ。最後にJPEGで保存するようにして画質の劣化をなるべく小さくするんだ。編集中の画像はJPEGで保存してはいけないんですね。忘れないようにしなくっちゃ。修正を加えていないJPEG画像をもう一度JPEGで保存する時、前回と同じ圧縮率にしても画質は劣化するんですか?ファイルサイズはどうですか?JPEGの画質は保存のたびに劣化していくよ。圧縮率を同じにして保存だけを繰り返した場合、保存回数が増えるにしたがって劣化が小さくなっていくし、ファイルサイズもほとんど変わらなくなるよ。JPEGで画質を選ぶ時のポイントってありますか?低い画質になるほど圧縮率が上がってファイルサイズが小さくなるけど、ブロッキングとモスキートノイズという現象が発生しやすくなるんだ。この2つの現象が全体に発生すると画像がとても見づらくなるので、なるべく出ていない画質を選んだ方がいいね。あとは見た目とファイルサイズのどちらをとるか、その時の画像の使用目的によるね。ブロッキングって何ですか?下の画像はこのページのトップ画像を3倍に拡大したものだけど、左の画質0の画像がモザイク画のように見えるのが分かるかい。これがブロッキングだよ。JPEGの圧縮アルゴリズムは画像を8ピクセル四方のブロックに分割して、ブロック毎に色を調整して画像から不要なデータを捨てているんだ。圧縮率が上って捨てるデータが増えるとブロック毎に色が均一化していくため、周囲のブロックとの境界がモザイク画のように目立つようになるんだよ。これがブロッキングかあ。見たら100%表示のトップ画像でもブロッキングが確認できますね。なんでJPEGは8ピクセル四方のブロック単位で圧縮しているんだろう?横一列ごとに圧縮すればブロッキングは起こらないんじゃないですか?いいところに気づいたね。それは、1ピクセルの横ライン単位で圧縮処理をするよりも縦のピクセルを含めた2次元の相関関係を考慮しながら圧縮処理した方がより自然な結果になるからだよ。色情報の一部を捨てるのに、本当は画像全体から捨てる色情報を決めたいんだけど、範囲が広すぎると圧縮処理に時間がかかってしまうので8ピクセル四方単位で行っているのさ。ちなみにGIFとPNGは横1ピクセルの列ごとに圧縮処理をしているよ。データを捨てない可逆圧縮方式を採用しているからこれで問題ないんだね。!それではモスキートノイズとは何ですか?下の図は文字が書かれた画像をJPEGの画質100と0で保存したものだけど、画質0の文字の周りに細かい斑点が出ているのが分かるかい?これがモスキートノイズだよ。JPEGの圧縮アルゴリズムは画像の中で急に色が変化しているところが少し苦手なんだ。いう部分では捨てる色情報の判断が上手くできずに細かい斑点ができてしまうことがあるんだよ。この細かい斑点が蚊(モスキート)に似ていることから、モスキートノイズと呼ばれているんだ。へえー、これがモスキートノイズか。モスキートノイズが起こらないようにするにはどうすればいいんですか?できるだけ画像の中に急に色が変化するところを作らないことだね。写真の上に文字が書かれているような画像は高画質で保存するか、PNG-24で保存した方がいい場合があるよ。それと比較的に赤色で発生しやすいので注意が必要だよ。結局、JPEGに適しているのはどんな画像なんですか?次のような条件に当てはまる場合はJPEGで保存した方がいいかもしれないね。逆にJPEGに適していないのはどんな画像ですか?次のような条件に当てはまる場合はJPEGで保存しない方がいいかもしれないよ。透明部分がある画像もダメなんだ。あっそういえば、JPEGだけ透過に対応してないですね。3つのファイル形式の中でJPEGだけが透過、つまり透明部分を持てないんだよ。元画像に透明部分がある場合はどうなっちゃうんですか?フォトショップの場合、元の画像に透明部分がある場合には「マット」を設定して疑似的に透明効果を演出しないといけないんだ。「マット」を設定して疑似的に透明効果を演出?そう、「マット」は元の画像の透明部分を埋める色を設定できるよ。Webサイトに画像を配置する場合を考えてみよう。Webサイトの背景が白の場合にマットに同じ色を設定すれば疑似的に画像の透明部分を表現できるんだ。!これならJPEGが透明を表現できなくても大丈夫ですね。上手に設定してあげるとJPEGでも透明を表現できるんだよ。マットには一つの色しか設定できないから、背景に写真画像を使っているようなWebサイトではかえって目立ってしまうから注意しないとね。Webサイトの背景が複雑な場合は透過に対応しているGIFかPNGで保存すればいいんですね。アンチエイリアスを使っている画像は半透明が使えるPNG-24にした方がいいよ。ええっ!アンチエイジングってファイル形式にもあるんですか?アンチエイジングじゃなくって、アンチエイリアス(Anti-aliased)だよ。アンチエイリアシングっていう人もいるね。上の赤い円のりんかくがギザギザなのに対して、下の円は滑らかにカーブしているよね。こんなふうにカーブを滑らかに見せる技術をアンチエイリアスというんだ。フォトショップでは、いろんなところでこの技術が使われているよ。文字もアンチエイリアスを使って滑らかなカーブを表現しているね。ちなみにフォトショップの鉛筆ツールはアンチエイリアスなし、ブラシツールはアンチエイリアスありで色が塗られるので使い分けるといいよ。アンチエイリアスを使っている画像は半透明を使えるPNG-24で保存した方がいいってことは、この滑らかに見える部分には半透明が使われているってことですよね。