JPEGツール


画像の種類と使い分けで「JPEGで保存する場合は画質などのパラメータを決めてやる必要があります」と書きました。 画質、形式・最適化、ダウンサンプリング などのパラメータがあります。 くわしいことはjpeg 圧縮とオプションの話 や、JPEG画像圧縮FAQ その1、[5] JPEG保存の時のよい「品質設定値」って?を読んでください。といいつつ、少しは触れておかないとあとの説明がしにくいので簡単に説明します。

画質もしくは品質
出力画像品質の設定。画質を上げるとファイルサイズも大きくなります。
形式
JPEGには通常のもの(ベースライン)とプログレッシブの2とおりあります。どちらを使えばファイルサイズが小さくなるかは画像によりますが、大差はありません。画質は変化なし。
最適化
ONにすると計算に時間がかかりますが、ファイルサイズが少し小さくなります。画質は変化なし。
スムージング
JPEGは色や明るさの変化がはっきりした画像が苦手です。そういう画像には、ぼかし(スムージング)をかければ小さくなります。ということでぼかす度合いのパラメータ。通常は0(ぼかさない)です。
サブサンプリング・ダウンサンプリング
色の解像度の設定。人間の眼は色の変化に鈍感なので少々落としても大丈夫です。
DCT法の設定
計算精度の設定。まじめに時間をかけて計算するか、精度を落として早く済ませるかの設定です。

指定できるパラメータはソフトウェアによって違います。ということでいくつか紹介していきましょう。

JPEGで保存できるソフトのいろいろ

IJGライブラリ/ツール

Independent JPEG Group

このライブラリ(プログラムの部品、と思ってもらえばいいでしょう)が、広く使われているので最初に紹介します。多くのソフトウェアがJPEGを扱うためにこのライブラリを利用しているわけです。

ツールとしては cjpeg (別形式の画像をJPEGへ変換)、djpeg (JPEGから別形式へ変換)、jpegtran (回転・切り抜きや最適化などを画質劣化させずに行う)、rdjpgcom (JPEGファイル内のコメントの表示)、wrjpgcom (コメントの埋め込み) の5つが提供されています。

多くの環境(Linux や Windows、Mac OS X など)で使えますが、なにせコマンドラインツールなので、同じ機能を持つ使いやすいツールがほかにあればそちらを使った方がいいでしょう。

参考
Independent JPEG Group's JPEG software の使い方

参考に cjpeg でできることを挙げておきます。

このライブラリ/プログラムを利用しているソフトウェアでも、上記の機能が使えるとは限りません。

Photoshop for Windowsfor Mac

Adobe - Adobe Photoshop

プロ用画像編集ソフト。印刷用データ作成では定番ソフトですね。

Photoshop CS のJPEG保存時のダイアログ

Photoshop CS でJPEG保存するとき(「別名で保存(名前を付けて保存)」でJPEG形式を選んだとき)のダイアログです。次のような項目があります。

画質は0〜12の範囲です。プルダウンメニュー(低(高圧縮率)/中/高/最高(低圧縮率)の4項目)やスライドバーで数値をかえられます。

サイズは、圧縮後のサイズと通信速度ごとの転送(ダウンロード)時間の表示です。

右のプレビューにチェックを入れておくと、元のウィンドウでJPEG化した時の画質を確認できます。

Photoshopで保存すると、解像度やソフトウェア名などのEXIFデータも埋め込むほか、JPEGファイルの中にサムネイルも保存されます。このサムネイルはWebで使うのに全く無用の長物で、その分ファイルサイズが大きくなってしまいます。Webで使う画像なら「Web用に保存」を使いましょう。

Photoshop CS Web用に保存

ということでPhotoshopの「Web用に保存」(ウィンドウタイトルを見ればわかるように実体はImageReady)です。JPEG保存のパラメータは右側中段の枠で囲まれた部分です。

画質は0〜100の範囲です。プルダウンメニュー(低画質/標準/高画質/最高画質の4項目)やスライドバーで数値をかえられます。

プログレッシブをONにすると、最適化はOFFになります。

ぼかしは0から2まで(小数点2けたまで有効)です。この数値の2倍がぼかしの半径(pixel)になるようです。

ICCプロファイルをONにするとカラープロファイル(ICCプロファイル)を埋め込みます。対応しているブラウザでは、作者の意図した正しい色でJPEGを表示できます。ただし、現状では対応しているブラウザはSafari(とWebKitを利用したもの)ぐらいしかありません。

マットは、元画像に透明部分がある場合に背景色として使われる色です。

圧縮後の画質やファイルサイズは最大4分割できるウィンドウで見比べることができます。

また、ファイルサイズを指定して画質などのパラメータを決めたり、チャンネルを利用して部分的に画質を変えること(人物は高画質、背景は低画質など)もできます。

「Web用に保存」では、JPEGコメント、EXIFデータ、サムネイルは埋め込まれません。

Photoshop CS3betaのJPEG保存時のダイアログ Photoshop CS3betaのWeb用に保存のJPEG保存時のダイアログ CS3ベータ版が出ていますが、JPEGまわりは変わっていないようです。

GIMP for Linuxfor Windowsfor Mac

GIMP - The GNU Image Manipulation Program

写真のレタッチ、画像の作成・加工などのために作られた自由に使えるソフトです。CMYKモードやカラーマネージメント機能を持たないため、印刷業務には向きませんが、Web制作には十分で豊富な機能があります。

GIMPのJPEG保存時のダイアログ

GIMP2.2.11でJPEG保存するときのダイアログです。次のような項目があります。

GIMPはIJGのライブラリを利用していますが、品質は0〜1.00の範囲で0.85が初期値です。

プレビューをONにするとファイルサイズも表示されます。プレビュー用に、元画像の上にJPEG画像レイヤーができるので、レイヤーの表示・非表示を切り替えて元画像と見比べることができます。

これ以降は詳細設定ということで最初は隠れています。「詳細設定」をクリックすると表示されます。

「最適化」「プログレッシブ」「ベースラインJPEG化」などは cjpeg のオプションといっしょです。

「EXIFデータを保存」は、画像がEXIFデータを持っている場合のみ有効になります。

「サムネイルを保存」は、JPEGファイル内にサムネイルを埋め込みます。

「コメント」は、JPEGファイル内にコメントをUTF-8で埋め込みます。Shift_JISではないことに注意。(JPEGの仕様では内蔵コメントの文字コードは決められていませんが、日本ではShift_JISを用いることが多く、UTF-8のコメントを表示できないツールもあります)

Painter for Windowsfor Mac

Corel Painter X スタジオ ホームページ

現実の画材のように描けることを目指しているペイントソフトです。

Painter X のJPEG保存時のダイアログ

Painter X でJPEG保存するときのダイアログです。次のような項目があります。

品質は0〜100%の範囲です。%なんてのがついてますが、これはよくないですね。品質の設定値は何かに対するパーセンテージではなく、独立した数値ということですから。 それはともかく、Photoshopと同様に「標準」などの項目を選ぶか、スライドバーを動かして数値を決めます。

スムーズも0〜100%の範囲です。最大値のボケ具合はPhotoshopのWeb用に保存やGIMPの最大と同じくらいです。

HTMLマップオプションはJPEGファイルに影響しません。いくつか選択範囲を作っておくとそれぞれの形式のMAPファイルもいっしょに作ってくれる機能です。

プレビューはこのダイアログに表示されますが、200×200ピクセルと小さめでズーム表示もできないので、PhotoshopやGIMPのように元のウィンドウにプレビューを表示するものより使いづらいかもしれません。

PainterはJPEGの保存にIJGのプログラムを利用しているようです。サブサンプリングは「2x2,1x,1,1x1」固定、最適化はなし、のようですね。

openCanvas for Windows

portalgraphics.net:ペイントソフト openCanvas

高機能フルカラーペイントソフトです。

canvas X のJPEG保存時のダイアログ

openCanvas 4.5 体験版 でJPEG保存するときのダイアログです。次のような項目があります。

品質は10から100までの範囲です。プレビュー機能はありません。openCanvasはJPEGの保存にIJGのプログラムを利用しているようです。サブサンプリングは「2x2,1x,1,1x1」固定、最適化はなし、のようですね。

Canvas for Windowsfor Mac

Technical Illustration, GIS and Scientific Imaging - Canvas X - ACD Systems of America

テクニカル・ドローイング機能をコアとした統合グラフィックスソフトだそうです。

canvas X のJPEG保存時のダイアログ

canvas X 日本語版 でJPEG保存するときのダイアログです。次のような項目があります。

画質の「%」表記についてはPainterの項目に書いたとおりよろしくありません。

「ベースライン」と「プログレッシブ」はどちらか一方しか選べません。

プレビュー機能はありません。ですが、「webへ保存」という機能があります(設定値が同じならできるJPEGファイルは同じです)。

canvas X の「webへ保存」ダイアログ

Photoshopの「Web用に保存」と似たような機能です。次のような項目があります。

最大4分割画面でプレビューを比較できます。「プレビュー表示」をOFFにすることで元画像の表示もできます。

Pixia for Windows

Pixiaホームページ

高性能なフルカラーペイントツールです。

Pixia のJPEG保存時のダイアログ

Pixia 4.1b でJPEG保存するときのダイアログです。次のような項目があります。

画質設定だけです。範囲は1から100。プレビュー機能はありません。PixiaはJPEGの保存にIJGのプログラムを利用しているようです。サブサンプリングは「1x1,1x,1,1x1」固定、最適化はなし、のようですね。

プレビュー機能などがついたプラグイン S_JPG が公開されています。

Pixia+S_JPG のダイアログ

S_JPG ver 0.7a のダイアログです。

S_JPG は IJGのライブラリをもとに制作されています。ICCプロファイルとコメント以外のオプションは cjpeg のものと同じです(サブサンプリングは「4:4:4」=「1x1,1x1,1x1」、「4:2:2」=「2x1,1x1,1x1」、「4:1:1」=「2x2,1x1,1x1」「4x1,1x1,1x1」です)。

「ICCプロファイル」をONにすると現在の画面のカラープロファイルが埋め込まれます。

「コメント」は3ページまで使えます。JPEGでは仕様上いくつでもコメントブロック(1つのブロックは64kb以内)を入れられることになっていますが、そのうち3ブロックまで使えるわけです。

プレビュー画像とファイルサイズは「Preview」ボタンを押さないと更新されません。プレビューボタンの下は表示倍率の切り替えです。

JTrim for Windows

JTrim / WoodyBells

簡単に使えるフォトレタッチソフトです。

JTrim のJPEG保存時のダイアログ

JTrim ver.1.52 でJPEG保存するときのオプションです。ファイル名をを決めるウィンドウで「設定...」ボタンを押さないと出てきません。(あるいは ファイル>保存オプション... であらかじめ設定しておく)

プレビューボタンを押すと別ウィンドウでプレビュー画面が出てきます。プレビューを見ながら画質の数値をいじることはできず、一旦プレビューを閉じる必要があります。 JTrimもJPEGの保存にIJGのプログラムを利用しているようです。サブサンプリングは「2x2,1x,1,1x1」固定、最適化はなし、のようですね。

PictBear for Windows

PictBear

フルカラーペイントソフトです。

PictBear の環境設定ダイアログ

PictBear ver.1.74 の環境設定です。

保存するときにパラメータを変えたりはできません。あらかじめ環境設定で決めておく必要があります(最初は全然設定できないのかと思ってたよ)。と言っても設定できるのは2項目だけです。 画質の「%」表記についてはPainterの項目に書いたとおりよろしくありませんね。保存時にパラメータを変えたりできないのでプレビュー機能もありません。

PictBearもJPEGの保存にIJGのプログラムを利用しているようです。サブサンプリングは「2x2,1x,1,1x1」固定、最適化はなし、のようです。

IrfanView32 for Windows

IrfanView 日本語版のページ

マルチメディアビューアです。画像加工機能も持っています。

IrfanView32 の保存設定ダイアログ

IrfanView32 日本語版 ver.3.99 でJPEG保存するときのダイアログです。次のような項目があります。

IrfanView32もJPEGの保存にIJGのプログラムを利用しているようですね。プレビュー機能はありません。

GraphicConverter for Mac

GraphicConverter:定番!ピクチャーを多数のフォーマットやプラットフォーム間で変換することができます。 | Bridge 1 Software

フォーマット変換をはじめ、多機能な画像ユーティリティです。

GraphicConverter のJPEGダイアログ

GraphicConverter 5.9.5J でJPEG保存するときのダイアログです。次のような項目があります。

JPEGを保存するためのライブラリを、QuickTime と IJGのものから選べるようになってます。どちらを使うかは、プレビュー表示やファイルサイズを見て決めればいいでしょう。

プレビュー for Mac

アップル

Mac OS Xに標準添付の画像表示ソフト、プレビューはトリミングや色調の加工、違うフォーマットでの書き出しができます。

プレビューのJPEG保存時のダイアログ

バージョン 3.0.9(409) でのJPEG保存時のダイアログです。

フォーマットにJPEGを選ぶと品質スライドバーが現れます。 以前は品質の数値(0から100まで)も表示できたのですが、今のバージョンではいっさい表示されません。

また、プレビュー機能はありません。

機能一覧

Photo­shop Save For Web GIMP Painter open­Canvas Canvas
プレビュー機能△1×
最適化×○4×
サブサンプリング指定××××
スムージング××
プログレッシブJPEG
グレイスケールJPEG△5×△5×△5
カラープロファイル埋込み××××
JPEGコメント埋込み×××××
EXIFデータ保持/削除×7×8×9×8×8×9
Pixia Pixia + S_JPG JTrim Pict­Bear
プレビュー機能×○2△3×
最適化×○4××
サブサンプリング指定×××
スムージング×××
プログレッシブJPEG××
グレイスケールJPEG×××
カラープロファイル埋込み×××
JPEGコメント埋込み×××
EXIFデータ保持/削除×8×8×8
Irfan­View­32 Graphic­Converter プレビュー
プレビュー機能××
最適化○4××
サブサンプリング指定×
スムージング×××
プログレッシブJPEG×
グレイスケールJPEG△5×
カラープロファイル埋込み××
JPEGコメント埋込み×6×
EXIFデータ保持/削除×10

まとめ

以上のようにツールによって指定できるパラメータは様々です。でき上がりの結果もまた様々です(同じライブラリを使っているなら設定を同じにすれば同じ仕上がりになるはずです)。いろいろ試しに使ってみて、気にいった物を使えばいいでしょう。

画質をちゃんと確認したいなら、プレビュー機能のあるものを使いましょう。

JPEG保存の手順

WEB上で使うためのJPEG画像のおおざっぱな保存手順です。

  1. 元画像はJPEGとは別にちゃんと保存しておく。
  2. ファイルサイズをどのぐらいにしたいか、画質はどの程度まで荒れてもいいか、おおざっぱに考えておく。「サムネイルなので 5KB以内、画質は気にしない」「できるだけきれいに、150KBぐらいまで」など。
  3. まずはおおざっぱに初期設定で保存して画質・ファイルサイズを確認する。プレビュー機能があればプレビュー画面で確認できる。実際に保存したJPEG画像を確認する場合は、一旦ウィンドウを閉じて保存したJPEG画像を改めて開く。(JPEG保存した直後はもとの画質の画像が表示されているので)
  4. 予想よりファイルサイズが大きければ品質設定値を下げる。予想より画質が悪ければ品質設定値を上げる。これを繰り返して両方を満たす品質設定値を決める。ファイルサイズか画質のどちらかをあきらめなければならないときもある。
  5. 設定を決めたらそれで保存する。

画像によって同じ設定でもファイルサイズが違ってきますし、画質の荒れ具合も違います。

おまけ・比較してみた

JPEGで保存するソフトはいろいろあるのですが、性能の違いがあるのかどうか、ファイルサイズと画質を比較してみます。

さて、どうやって比較するのか。ファイルサイズは数値で表せるので問題ありませんが、画質の方が問題です。そこで次のような方法を考えました。

  1. それぞれのツール・品質設定値でJPEG保存する。
  2. Photoshopで開き、元画像の上にレイヤーを作ってJPEG画像を置く。
  3. そのJPEG画像レイヤーの描画モードを「差の絶対値」にする。
  4. 差の絶対値とヒストグラム
    元画像と同じ部分は真っ黒に、違いがある部分は白くなったり色がついたりする。ヒストグラムウィンドウに数値が表示される(設定はチャンネル:RGB、ソース:画像全体)。ここでは「平均」の値をみることにする。

この数値は元画像との差を表しているので、大きいほど元画像と違う部分が多い(=低画質)、小さいほど元画像に近い(=高画質)となります。

評価用画像です。リンク先にオリジナル(PNG形式 約85KB)を置いてあります。どのような画像が評価用として適しているかわかりませんが、とりあえず、イラスト、写真、ベタ塗り部分、文字を組み合わせてみました。

では比較しましょう。上で挙げたうちから3種類、「IJG」、「ImageReady」、「QuickTime」を使って(実際に使ったツールは「PhotoshopのWeb用に保存」、「GIMP」、「GraphicConverter」)、品質設定を0から100まで5きざみで保存し比較しました。

品質設定値 ImageReady IJG(サブサンプリングあり) IJG(サブサンプリングなし) QuickTime
サイズ画質 サイズ画質 サイズ画質 サイズ画質
0 542412.04120324.93169222.46664512.39
5 614011.44190520.73247117.98664512.39
10 723910.51323716.28405413.75679212.28
15 752210.29441514.32545712.04707312.06
20 100238.78535013.08664910.66762411.71
25 108178.40620312.34780010.21854311.15
30 117168.07698911.7688209.53974810.31
35 126087.73777311.3198338.99111969.50
40 137837.33840810.83106618.57128258.76
45 152266.85909210.36115418.18145968.12
50 170446.3597059.99123567.83167457.50
55 209834.76103509.62132037.51187646.87
60 223704.49110629.27141817.18207466.29
65 248283.99119628.86154206.76230845.80
70 281523.48130658.47168586.29250045.37
75 317223.07143788.03185935.82272715.04
80 363722.58163457.44212785.19324414.01
85 412552.32190356.66249634.45347873.77
90 494301.76231145.66308023.45372383.62
95 577181.25309844.49430622.19402153.41
100 679320.83506723.34843130.43414693.36
ImageRady(Photoshop Web用に保存)
最適化:ON、ぼかし:0、プログレッシブ:OFF、ICCプロファイル:OFF
IJGサブサンプリングあり(GIMP)
最適化:ON、プログレッシブ:OFF、ベースラインJPEG化:ON、サムネイルを保存:OFF、スムージング:0、リスタートマーカーを使用:OFF、サブサンプリング:2x2,1x1,1x1、DCT変換方法:浮動小数
IJGサブサンプリングなし(GIMP)
最適化:ON、プログレッシブ:OFF、ベースラインJPEG化:ON、サムネイルを保存:OFF、スムージング:0、リスタートマーカーを使用:OFF、サブサンプリング:1x1,1x1,1x1、DCT変換方法:浮動小数
QuickTime(GraphicConverter)
ウェブ用で保存(リソースフォークなし):ON、ライブラリ:QuickTime、コメント:OFF、XMP:OFF、iPhoto対応なEXIF:OFF、EXIFメーカーノート:OFF、EXIFユーザーコメント:OFF

表だとわかりにくいのでグラフにしてみました。(OpenOffice.orgのCalcでグラフ化、Photoshopで調整)
品質設定値とファイルサイズのグラフ 品質設定値と画質のグラフ

IJGの方ができるJPEG画像の画質の幅が広いようです。ただし、品質設定値の下の方と上の方はあまり実用にならない気がします。下の方はほとんどモザイク状態、上の方は特にサブサンプリングなしで品質設定値100近くはファイルサイズが大きすぎ)。

ファイルサイズと画質の関係は、グラフが2つに分かれてるとわからないので、新しくグラフを作りました。(GNUPLOTでグラフ化、TgifとPhotoshopで調整)
ファイルサイズと画質のグラフ

これを見る限り、それほど差はないですが、2系統に分かれてますね。「ImageReady」と「IJGサブサンプリングなし」、「QuickTime」と「IJGサブサンプリングあり」は、よく似た曲線になってます。同じファイルサイズで比べた場合、前者の方が後者より画質がよい、というようにこのグラフからは読めます。

もっとも、画質の数字は、JPEGが利用している「輝度の変化に敏感で、色の変化に鈍感」という人間の眼の特性を考慮してません。画質の数字が同じでも、見た感じの画質に違いがある場合もあります。そのへんを差し引くと、やっぱりツール間の差はないと言えるでしょう。

結局、自分の使いやすいツールを使うのが一番なのではないでしょうか。


初出:2007.03.26./修正:2012.07.19. https://mimi.moe.in/nmp/ もうパンツはかない