1バイトでも軽くその２～jpegの場合

2005.03.03 02:29:28 , Posted
2013.05.06 04:03:00 , Update by Gyokuei

■jpeg圧縮の方法と特性

jpeg圧縮に適している画像は、写真や、アニメ塗り以外のイラストなど、境界線がはっきりしておらず、グラデーションで構成された画像です。たとえば、こういうものになります。

※参考までに、下の方のイラスト、GIFとPNGで圧縮したやつをページの一番下にのせておきます。

◆jpeg画像を作る方法
　jpeg画像は、人間の目で見てなるべく影響がないように
　データ自体を劣化させて、ファイルサイズを落とします。
　必ず、無圧縮の形式（BMPなど）で元のデータも保存しておきましょう。

　なおjpegについての理論的なお話はこのサイトを見ると詳しく載っています↓
　貧乏人のためのＣＧ講座

１　お絵かき系イラストソフトで「ファイル」→「保存」するときに、「JPEG(*.jpg)」を選びます。

▲Photoshopで「ファイル」→「保存」してみる。いちおうプレビューはできるけど、元画像からどれくらいかわったのかわかりにくい。

　しかし、元画像がどんな画像なのかによって、最適な圧縮率はかわります。どれくらいまで圧縮して大丈夫なのかは、作者の趣味の問題です。やってみなければわかりません。
　ぎりぎりまでファイルサイズを落としたいときには、

２　圧縮前と圧縮後の画像を見比べながら品質設定できるソフトを使う。

　べきだと、思います。

　そのために具体的にどんなソフトでどうすればいいかを、以下に書きます。

↓ 記事はまだ続きます。

○Photoshopを使っている場合（私が持ってるのは5.5とCSなので他については知らない）

　Photoshopは画像の保存のとき「保存」「別名で保存」「複製を保存」「web用に保存」と４つもメニューがあります。一番下の「web用に保存」を選んでください。

▲web用に保存

すると、こんな画面が出てきます。

▲４画面表示だ

これ、Photoshop本体じゃなくて一緒にインストールされるImageReadyの機能らしいのですが、元画像と圧縮後の画像を最大４つまで並べて表示し、しかも圧縮後のファイルサイズと表示にかかる時間までわかるというすぐれもの。
使い方は、右上のメニューから設定を選び、気に入ったらＯＫボタンを押すだけ。別名で保存するウインドウが出ます。

　jpegの場合、設定はこんなかんじ

　設定する箇所は「画質」です。0-100ですが実質95ぐらいまで。
　それ以上にしても画質はほとんど変わらずファイルサイズだけ大きくなります。
　きれいな画像を作りたいならだいたい70から80ぐらいを目安に、あとは見た目＆ファイルサイズと相談して数値を設定してください。数値が小さいほど圧縮率高く画質が悪く、大きいほど画質が良くなります。

　なお、文字や枠が入っているなど、急激に色の変化する画像は、80に設定しても色の境目が汚くなってしまいます（４画面表示の画像凝視してください）それはjpegの特性で仕方のないところなので、妥協するか、デザインを変えるか、jpegをやめて無圧縮png形式を使いましょう。
　このページの最初で挙げた銀の月サイトトップ絵ですが、画質50で圧縮していますが、そこそこ見れますね。文字は入っていますが、全部ぼかしが入っていますので......。
　
　他の項目はあまりいじる必要はないと思いますが、詳しく知りたい方のためにいちおう書いておきます。

　最適化：ここにチェックを入れると、同じ品質でもファイルサイズが軽くなるが、計算が遅くなるらしい。古いマシンを使っているのでなければ、チェックを入れておきましょう。
　ぼかし：急激に色の変化する画像をむりやりjpeg化するときにこの機能を使う、らしい。ただ単にぼかすだけ
　マット：jpegは透明色に対応していないので、マットに指定した色で置き換える
　プログレッシブ：プログレッシブJPEGというのは画像を一気に表示させず徐々に読み込む機能。ただし対応してないブラウザもあるので、私はチェック外している。画像の作り方によっては、プログレッシブjpegのほうがファイルサイズが軽くなることもあるらしい。
　ICCプロファイル：Photoshopでプロファイル使ってる人はチェック入れた方がいいのかも。意味が分からない人はとりあえずチェックを外しておきましょう。

○Photoshop？そんな高いソフト、もってません。

フリーソフトを使いましょう。私のおすすめはBTJ32というソフトです。使い方が簡単で、さまざまな形式の画像ファイルをJPEG, PNG, BITMAPに変換して出力してくれます。そのうえSusie Plug-inで対応する画像形式を増やすことができます。

こんなかんじ（画面はBMP→JPEGの場合）

▲一括出力もできて便利

◆さて、jpeg圧縮するにはご紹介してきたような方法があるわけですが、何故か、同じ画質設定で圧縮しても、ソフトによってファイルサイズに差が出ます。たとえばこんな感じ。

どちらも品質70で圧縮したのに、ファイルサイズは、上49.2kb、下23.7kbです。上がphotoshop、下がBTJ32で圧縮したものです。photoshopのほうがきれいではありますが、このサイズの差はなに。

一つの理由として、Photoshopで圧縮すると、どうやら余計なヘッダがつくようです。著作権保護でうんにゃらしてる人はともかく、閲覧者にはただのゴミですので、ヘッダは切り捨ててしまいましょう。
BTJ32で圧縮した場合ヘッダはほとんどつきません。逆にヘッダに情報を書き込むこともできます。また、シェアウェアですが、

ぺーたーJPEGプライベート

というソフトは、ヘッダを切り捨てることができます。

それにしても重くなるなぁと思っていたら、もう一つの理由が、こちら↓のサイトで解説されてました。
ふじこーの「アレが気になる」：PhotoshopでのJPG保存
　　>>「Photoshop」は色情報（サンプリング）の間引き具合を高めに固定しているようだ。

そうだったのかー！

と、いうわけで、jpegは結局、ソフトに依存するので、コンバータソフト捜して、自分の目で確かめながら圧縮してください。結論。

おまけ：jpeg向きの画像、gifやpngで圧縮してみる

▲256色gifで圧縮(49.3kb)