JPEGツール

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

画質もしくは品質
出力画像品質の設定。画質を上げるとファイルサイズも大きくなります。
形式
JPEGには通常のもの(ベースライン)とプログレッシブの2とおりあります。どちらを使えばファイルサイズが小さくなるかは画像によりますが、サムネイル用などの小さいものでなければプログレッシブの方が少し小さくなるようです。画質は変化なし。
最適化
ONにすると計算に時間がかかりますが、ファイルサイズが少し小さくなります。画質は変化なし。
スムージング
JPEGは色や明るさの変化がはっきりした画像が苦手です(ファイルサイズがあまり小さくならない)。そういう画像には、ぼかし(スムージング)をかければ小さくなります。ということでぼかす度合いのパラメータ。通常は0(ぼかさない)です。
サブサンプリング・ダウンサンプリング
色の解像度の設定。 JPEGではRGBの情報を、輝度情報YとCr,Cbの2種類の色情報に変換してから処理しています。 そのCr,Cbを間引く設定です。 人間の眼は色の変化に鈍感なので少々落としても大丈夫です。
「4:4:4」=「1x1,1x1,1x1」
ダウンサンプリングなし(Cr,Cb両方ともそのまま)。高画質用の設定です。
「4:2:2」=「2x1,1x1,1x1」
Cr,Cbを横方向に半分にする。
「4:2:0」=「2x2,1x1,1x1」
Cr,Cbを縦横ともに半分にする。この3種類の中ではファイルサイズはこれが一番小さくなります。
これ以外の設定もあります。
DCT法の設定
計算精度の設定。まじめに時間をかけて計算するか、精度を落として早く済ませるかの設定です。

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

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

Photoshop for Windows for Mac

→Photoshop インスピレーション、Photoshop 情報 | Photoshop.com

プロ用画像編集ソフト。印刷用データ作成では定番ソフトですね。 画像を保存する方法は何通りかあります。

Photoshop の「別名で保存」でのJPEG保存時のダイアログ

Photoshop CC (19.1.2リリース)の「別名で保存」でJPEG保存するときのダイアログです。次のような項目があります。

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

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

「保存」「別名で保存」で保存すると、サムネイルやらメタデータやら編集履歴やら保存できるもの一切合切保存されてしまいます。Webで使う画像なら「書き出し形式」を使いましょう。

Photoshop CC 書き出し形式

書き出し形式のダイアログです。

プレビュー画面は真ん中、ファイルサイズは左の欄に表示されます。またこの画面でピクセルサイズの縮小・拡大もできます。

プログレッシブや最適化、ぼかしなどがなく、シンプルな設定項目になってます。

Photoshop CC Web用に保存

こちらは「Web用に保存(従来)」です。JPEG保存のパラメータは右側の上の方の部分です。

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

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

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

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

「カラープロファイルの埋め込み」をONにすると現在のカラープロファイルを埋め込みます。対応しているブラウザでは、作者の意図した正しい色で表示されることが期待できます。対応していないブラウザでも「正しい色」で表示させたい場合は、その下の「sRGBに変換」をONにすることで対処できます。

「メタデータ」はEXIFなどの情報を含めるかどうかの選択です。「なし」「著作権情報」「著作権情報および問い合わせ先」「カメラ情報以外のすべて」「すべて」からの選択です。

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

どの方式もサブサンプリングは画質設定値と連動していて、50まで(別名で保存は6まで)が2x2,1x1,1x1、それ以上が1x1,1x1,1x1になっています。

「Web用に保存(従来)」はそのうち廃止になるのだそうです。

GIMP for Linux for Windows for Mac

→GIMP - The GNU Image Manipulation Program

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

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

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

品質は0〜100の範囲で90が初期値です。

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

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

「最適化」はハフマン符号化テーブルを最適化します。ファイルサイズが小さくなります。

「プログレッシブ」はプログレッシブJPEGの作成。

「スムージング」は0.00から1.00の指定。初期値は0.00(ぼかさない)。

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

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

「原画の品位設定を使用」は、元の画像がJPEGの場合のみ有効になります。ONにすると品質値やサブサンプリングなどが元の画像の設定と同じ(と思われる値)になります。

「コメント」は、JPEGファイル内にコメントをUTF-8で埋め込みます。Shift_JISではないことに注意 (JPEGの仕様では内蔵コメントの文字コードは決められていませんが、日本ではこれまでShift_JISを用いることが多く、古いツールではUTF-8のコメントを表示できないものもあります)。 このコメントは、メニューの 画像>画像の情報 で出てくるウインドウのコメントタブでも確認・修正できます。

PaintShop Pro for Windows

→PaintShop Pro - 公式ホームページ

写真編集ソフト。写真しかいじれないわけではないです。

PaintShop Pro のJPEG保存時のダイアログ

PaintShop Pro 2018 でJPEG保存するときのオプション画面(ファイル名を決める画面でオプションボタンを押すと出る画面)です。次のような項目があります。

エンコーディングの種類は「標準」「プログレッシブ」「ロスレス」の選択です。圧縮レベルは大きいほど画質が低くなります。ここではプレビュー機能はありません。オプション画面を開かなくても圧縮値の設定とファイルサイズの確認はできます。

「オプティマイザーを実行...」ボタンを押す(またはファイルメニューのエクスポートからJPEGイメージのオプティマイザーを起動する)とプレビュー画面付きのオプション画面が出てきます。

PaintShop Pro のJPEG保存時のダイアログ

「設定」は現在の設定を保存したり、よく使う設定を呼び出したりできます。他は前のオプション画面での項目と同じです。

さて、PSPは選べるサブサンプリングの種類が多いのですが、選んだ種類と実際にできたJPEGファイルとで食い違いがあります。

また、コーデックで「ロスレス」を選んでも実際にはベースラインJPEGができるようです。

Painter for Windows for Mac

→Corel デジタル & フォトペインティング ソフトウェアおよび Painter アプリ

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

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

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

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

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

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

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

サブサンプリングは2x2,1x,1,1x1固定のようです。

SAI for Windows

→SYSTEMAX Software Development - ペイントツールSAI

気軽に気持ちよく絵が描けることを目指したペイントツールです。

SAI JPEG保存ダイアログ

SAI ver.1.2.5 のJPEG保存画面です。

オリジナルのJPEGエンコーダーを持ってます。輝度と色それぞれに別の品質設定ができるのは珍しいですね。プレビュー画面はオリジナルとJPEG画像とを切り替えて表示するタイプです。

CLIP STUDIO PAINT PRO for Windows for Mac

→イラスト マンガ制作ソフト・アプリ CLIP STUDIO PAINT（クリップスタジオペイント）

イラスト制作用ツールです。

JPEG保存ではパラメータの指定ができません。JPEGでの保存を実行すると、オプションのウィンドウが出てくることなくすぐに保存されます。画質設定は(IJGによるエンコーダーを基準として)100で、サブサンプリングは1x1,1x1,1x1になっています。

openCanvas for Windows

→ペイントソフト openCanvas（オープンキャンバス）｜portalgraphics.net

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

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

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

品質は10から100までの範囲で、プルダウンメニュー(低/標準/高/最高の4項目)やスライドバーで数値をかえられます。プレビュー機能はありません。サブサンプリングは2x2,1x,1,1x1固定です。

Pixelmator for Mac

→Pixelmator

Mac用のパワフルで高速、使いやすい画像編集ソフト。

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

バージョン 3.7 Mount Whitney でJPEG保存するときのダイアログです。次のような項目があります。

プレビュー機能はありませんがファイルサイズは表示されます。サブサンプリングは2x2,1x,1,1x1です。

メニューの 共有>Web用に書き出す... から書き出すとメタデータとカラープロファイルを全く埋め込まないJPEGファイルができます。ただしこちらでは画質設定ができません。

Pixia for Windows

→Pixiaホームページ

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

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

Version 6.04f (64bit) でJPEG保存するときのダイアログです。次のような項目があります。

画質設定だけです。プレビュー機能もありません。サブサンプリングは1x1,1x,1,1x1固定です。

MyPaint for Linux for Windows for Mac

→MyPaint

多彩なブラシが特徴のペイントツールです。

JPEG保存ではパラメータの指定ができません。JPEGで保存を実行すると、オプションのウィンドウが出てくることなくすぐに保存されます。画質設定は90で、サブサンプリングは2x2,1x1,1x1になってます。

MyPaintはユーザーにキャンバスの大きさを意識させない作りになっています(絵を描き広げていけばその分キャンバスサイズが自動的に大きくなる)。一方、キャンバスの大きさを小さくする(トリミングや縮小する)方法がありません。ですので、GIMP(MyPaintのoraファイルを読み書き可)に持ち込んで、トリミングなどしてJPEGエンコード、あるいはMyPaintからPNGにエクスポートして他のツールで調整、JPEGエンコードする方がいいと思います。

FireAlpaca for Windows for Mac

→フリー ペイントツール（Mac/Windows 両対応）FireAlpaca［ファイア アルパカ］

気軽に描けるペイントツールです。

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

ver 2.0.1 でのJPEG保存時のダイアログです。次のような項目があります。

プレビュー機能はありません。サブサンプリングは2x2,1x1,1x1固定です。

Krita for Linux for Windows for Mac

→Krita | デジタルでのお絵描きと創造の自由を

初心者からプロまで使える本格的ペイントツールで、誰もに入手可能なアートツールを求めるアーティストたちが自ら作り上げたものとのこと。

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

Version: 3.3.3 でのJPEG保存時のダイアログです。3つのタブに分かれていて、次のような項目があります。

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

paint.net for Windows

→Paint.NET - Free Software for Digital Photo Editing

Windows用の画像・写真の編集ソフトです。

paint.netのJPEG保存時のダイアログ

paint.net 4.0.21 でのJPEG保存時のダイアログです。次のような項目があります。

右側にプレビューとファイルサイズが表示されます。サブサンプリングは2x2,1x1,1x1固定です。 また解像度設定のない画像は96×96になります。

ペイント 3D for Windows

→ペイント 3D を入手 - Microsoft Store ja-JP

Windowsに付属の簡易画像編集ソフト「ペイント」の後継バージョン。

JPEG保存ではパラメータの指定ができません。JPEGで保存を実行すると、オプションのウィンドウが出てくることなくすぐに保存されます。保存されたJPEGデータを見るとサブサンプリングは2x2,1x1,1x1、品質値は(IJGによるエンコーダーを基準として)90のようです。また画像の元の設定がどうであれ解像度は 96×96 となります。

PIXLR EDITOR WEBサービス

→Photo editor online - Pixlr.com

ブラウザ上で使えるWEBアプリ。要Adobe Flash。

PIXLR EDITOR の設定ダイアログ

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

大きな画像の場合、プレビュー画像はこの枠の中に全体が収まるように縮小表示されます。表示を拡大することはできません。黄色い枠には広告が表示されます。

サブサンプリングは 1x1,1x1,1x1固定、メタデータは全て削除されます。

IrfanView for Windows

→IrfanView - Official Homepage - One of the Most Popular Viewers Worldwide

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

IrfanView の保存設定ダイアログ

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

プレビュー機能はありません。「サブサンプリングを無効」ONで1x1,1x1,1x1、OFFで2x2,1x1,1x1の切替えとなります。

IrfanView の保存設定ダイアログ

またプラグインをインストールしてあれば「Web用に最適化して保存」が使えます。

プレビュー画面は拡大・縮小表示が可能でファイルサイズも表示されます。

クロマサブサンプリングは 4:4:4/4:2:2/4:2:0/4:1:1 の4種類からの選択です。

プレビュー for Mac

→アップル

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

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

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

フォーマットにJPEGを選ぶと品質スライドバーが現れます(初期値は80ぐらい?)。

また、プレビュー機能はありません。サブサンプリングも指定できず、2x2,1x1,1x1で固定のようです。

GraphicConverter for Mac

→Lemke Software: GraphicConverter

フォーマット変換をはじめ、多機能な画像ユーティリティです。本格的な編集機能も持ってます。

GraphicConverter のJPEGダイアログ

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

非常にたくさんの項目があります。コーデックにロスレスがありますが、これはWEBブラウザでは表示できないJPEGになるので、WEB用には使えません。

GraphicConverter のWEB用で保存ダイアログ

GraphicConverter 10 にはファイルメニューに「WEBで保存」というのがあります。次のような項目があります。

こちらの方がプレビュー表示が大きく、ファイルサイズのほか、通信環境ごとの転送に必要な時間も表示されます。

こちらにはコーデックやサブサンプリングの選択項目がありません。サブサンプリングは 2x1,1x1,1x1 になります。

各ソフトウェアの実行環境は、Mac版が iMac Retina 5K (メモリ24G) + Mac OS 10.13、Windows版が Windows 10 を 上記のMac上の VirtualBox 5.2 で稼働させています。 JPEGファイルの解析には、ImageMagickのツール identify を使用しました。

機能一覧

Photo­shop Ps書き出し形式 PsWeb用 GIMP PaintShop Pro Painter
プレビュー機能○○○○○△1
画質設定○○○○○○
最適化指定○×○○○○
サブサンプリング指定×××○○×
スムージング××○○×○
プログレッシブJPEG○×○○○○
グレイスケールJPEG△2××△2△2×
カラープロファイル埋込み○○○△3○△3
JPEGコメント埋込み×××○××
EXIFデータ○14○○△4△4×5
その他メタデータ○14○○△7×5×5
SAI CLIP STUDIO PAINT PRO open­Canvas Pixelmator Pixia
プレビュー機能○×××8×
画質設定○×○○○
最適化指定×××××
サブサンプリング指定○××××
スムージング××○××
プログレッシブJPEG××○××
グレイスケールJPEG××○××
カラープロファイル埋込み×○6×○9×
JPEGコメント埋込み×××××
EXIFデータ×5×5×5×10×11
その他メタデータ×5×5×5×10×5
My­Paint Fire­Alpaca Krita paint.net ペイント3D PIXLR EDITOR
プレビュー機能×××○×○13
画質設定×○○○×○
最適化指定××○×××
サブサンプリング指定××○×××
スムージング××○×××
プログレッシブJPEG××○×××
グレイスケールJPEG××△2×××
カラープロファイル埋込み××○×××
JPEGコメント埋込み××××××
EXIFデータ×5×5△4×11×5×5
その他メタデータ×5×5△7×5×5×5
Irfan­View プレビュー Graphic­Converter
プレビュー機能△12×8○
画質設定○○○
最適化指定△12××
サブサンプリング指定○×○
スムージング×××
プログレッシブJPEG○×○
グレイスケールJPEG○××
カラープロファイル埋込み×△3○
JPEGコメント埋込み×××
EXIFデータ△4×11○
その他メタデータ△7×5○

まとめ

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

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

JPEG保存の手順

WEB上で使うためのJPEG画像の保存手順です。

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

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

メタデータ

JPEG画像には「メタデータ」を記録しておくことができます。撮影地点のGPS情報を記録できるEXIF情報がよく知られていますが、撮影時のカメラ情報だけでなく、作品タイトルや制作者、連絡先URL、著作権情報なども記録できます。

Photoshop CC ファイル情報

これはPhotoshop CCのファイル情報ダイアログです。EXIF情報などを残すか削除するか選ぶ形の対応をしているツールは増えていますが、メタデータの中身を編集できるものは多くありません。

という具合に、現状ではPhotoshopとGraphicConverter以外は対応していない状況です。メタデータを積極的に埋め込みたい場合、この2つを使っていないなら、メタデータ用のアプリケーションを探して導入する必要があります。(個人的にはexiftoolを使っています。)

おまけ・品質設定とファイルサイズ

さて、品質を上げるとファイルサイズも増え、品質を下げるとファイルサイズも小さくなりますが、どれぐらい変わるのでしょうか。実際に試してみました。

[評価用画像] 評価用画像です。PNGで170kBほどあります。 ここで比較に使ったのは、多くのアプリケーションでJPEGを扱うのに使われている「IJGライブラリ」を利用しているものの代表としてGIMPと、独自エンコーダーのPhotoshop CCの「書き出し形式」です。GIMPでは 最適化:ON、スムージング:0、プログレッシブ:OFF、リスタートマーカー:OFF、サムネイルの保存:OFF、DCT変換方法:浮動小数点 の設定で、 サブサンプリング4:4:4、4:2:0の2通りを、Psの書き出し形式では メタデータ:なし、色空間情報:sRGBに変換 の設定でファイルサイズを調べました。

品質設定値とファイルサイズのグラフ
グラフはInkscapeで作成しました。対応しているブラウザではSVGで表示されているはずです。

いずれも品質設定の値が大きくなるほどグラフの傾きが大きくなっています。GIMPではどれも品質設定が90あたりで急激にファイルサイズが増えているのがわかります。JPEGではいくら品質を上げても必ず損失があります。画像によっては高画質JPEGよりもPNGの方がファイルサイズが小さいこともありますので、画質を優先するならJPEGを使わないことも検討すべきです。

参考
2012年バージョン: JPEGツール
2007年バージョン: JPEGツール
2018.03.25. https://mimi.moe.in/nmp/ もうパンツはかない