1バイトでも軽く その2 ~jpegの場合

■jpeg圧縮の方法と特性

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



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


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

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


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

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

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

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

 べきだと、思います。

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



↓ 記事はまだ続きます。



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

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


▲web用に保存

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

▲4画面表示だ

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

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

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

 なお、文字や枠が入っているなど、急激に色の変化する画像は、80に設定しても色の境目が汚くなってしまいます(4画面表示の画像凝視してください)それは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)


▲フルカラーpngで圧縮(175kb)

ディザが出たり、ファイルサイズ無駄にでかくなるので、やめたほうがいいですね、というお話。にしたかったのですが、実はこの画像色数少な目なのでGIFでもあんまし違和感ありませんでした、というオチ...

このエントリーをはてなブックマークに追加 はてなブックマーク - 1バイトでも軽く その2 ~jpegの場合 RSS mailform

見る

▲このページを読み返す

次に書いたページ  動画入り音楽CD【CD-Extra】をつくる

前に書いたページ  アニメの作り方 概要その2:制作工程と必要なもの

関連する本
このページへリンクする


このページへトラックバック

※ このページに言及してない記事からのトラックバックはSPAMとみなして削除します。
※ 管理人が承認するまでトラックバックは表示されません。

僕は「Photoshop 5.0 LE」と「Photoshop Elements」 を持っているのだけど、JPGで保存すると他の画像関連 のソフトに比べてサイズ... 続きを読む

PhotoshopでのJPG保存 【ふじこーの「アレが気になる」】
2005.03.03 16:15:19 ping

コメント(1)

TB&記事中で紹介していただき、ありがとうございます。

ファイルサイズを小さくするのは苦労しますよね。
最近はそんなには気にしなくなりましたが、色々と試してるうち
スキルが上がるのは楽しいものです。

ただ、あの記事に付いては僕の独自の調査なので、他にも原因が
ある可能性もあります。間違ってないとは思うのですが、一応。

コメントする

あにめはっく.jpとは?
イラスト等の講座サイトです。
個人でやってます。
本館は 銀の月動画計画

玉英って誰?
アニメ作ったりイラスト描いたり
プラグインやフォントや素材作ったり
色々してる謎の人です。
プロフィール

■無料フォントダウンロード等
よく訓練されたフォント屋
■背景素材・絵コンテ用紙等
よく訓練された素材屋@あにめはっく.jp
西洋ファンタジー風誤変換人名辞書データベース もめいよふ オンラインボイスの総合カタログ VoiceFL@G▼
■参考サイト リンク集
アキツセントラルTV
■作品のサイト
超法戦隊S.T.7
霊珠

玉英/ザラスドットコム作品一覧

参考書籍等紹介

おすすめ一覧

リンク・RSS

リンクはご自由にどうぞ。

相互リンクご希望の方

このサイトは、次のライセンスで保護されています:
CCライセンス■表示-非営利-継承
クリエイティブ・コモンズについて

購読する このブログの読者になる

QRコード モバイル版こちら

作品購入

このサイトのバナー
Powered by Movable Type 4.01