PhotoshopのJPEGを調べてみた

この記事は約3分で読めます。
記事内に広告が含まれています

PhotoshopのJPEG圧縮について調べてみた
イメージ

こんにちは、さち です。

Photoshop Elements(以下:pse) には
「Web用に保存」という機能があります。

JPEGを101段階の圧縮率から選択して
圧縮後の画質をプレビューして保存ができ便利なのですが
圧縮率の違いで圧縮処理が変わるのかが気になっていました。

そこで今回は、「Web用に保存」を使った時の
JPEG圧縮処理について調べてみました。
pse をお持ちの方のお役に立てれば幸いです。

スポンサーリンク

「画質」と「圧縮処理」の関係

「Web用に保存」を使ってJPEG保存する時
下のように画像の「画質」を設定ができます。
操作画面

これを 100~0 まで10ずつ変化させて保存していきます。
「プログレッシブ」「ICCプロファイル」は使用しません。
実験用に次のようなサンプル画像を用意しました。

フォーマット:  ビットマップ[BMP 24bit] (無圧縮)
ファイルサイズ:  122,264バイト

サンプル
※ 上のサンプル画像はPNGです。

各ファイルを JPEG Optimizer で調べてみた結果が下の表です。
操作画面
※ 「圧縮率 = JPEG圧縮後のサイズ÷BMPのサイズ」で算出

「画質:50」でサンプリング比が「4:2:0」になったので
追加で「画質:51」についても調べました。
丁度、このタイミングでサンプリング比が切り替わるようで
「51」から「50」になると画質が急激に悪くなります。

画質:51
サンプル  

画質:50
サンプル


サンプリング比って何?

「サンプリング比」って聞き慣れない言葉ですよね?
私なりに簡単に説明してみようと思います。

JPEGは、画像を圧縮する時
「色情報の簡略化(色の間引き処理)」を行います。
これを「サブサンプリング(=ダウンサンプリング)」と呼びます。
この処理の目的はファイルサイズを小さくすること。

サブサンプリングの度合いを表すのが「サンプリング比」です。
サンプリング比が「4:4:4」に近いほど
間引き処理が少なく高画質な画像になります。

サンプリング比は他にもある

pse で使用できるサンプリング比は
「4:4:4」「4:2:0」の2種類のみで
「画質」の数値により自動で変更されます。

しかし、JPEG は他にも
「4:2:2」「4:1:1」等のサンプリング比も使用可能。

中には、自分でサンプリング比を選択できる
JPEG Optimizer のようなソフトもありますが
大多数のソフトは、圧縮率(画質)を指定すると
自動でサンプリング比が変更されるようです。

SAI では、JPEG保存時
「色成分間引き」の「水平方向」「垂直方向」が
「サンプリング比」に関係がありそうです。

今回は、サブサンプリングの影響を見やすくするため
あえて画質劣化が目立つ画像を使いました。
写真なら画質劣化はもう少し目立ちにくくなるはずです。

pse では、「画質」を"51"と"50"どちらにするかで
圧縮処理が大きく変わることを覚えておきましょう。
JPEGをキレイに保存するのに役立ちますよ!

記事作成に当たり下記ページを参考にしました。
ありがとうございました。

   → お絵描き研究室:JPEG(原理編1) - Crazy☆Planet
   → 色空間とYC伸張と補間 - ジャンパーズホームページ
   → カラーフォーマットのナゾ - 「もりのみやこ」のぺえじ

コメント

  1. 通りすがった者 より:

    なるほど、51未満の画質劣化はそういう訳だったんですね。
    長年疑問だった謎が解けました。ありがとうございます。

"),m.no_overlay||s.append("
");var c=s.find("img:first"),d=s.find("img:last");s.append("
");var l=s.find(".twentytwenty-handle");l.append(""),l.append(""),s.addClass("twentytwenty-container"),c.addClass("twentytwenty-before"),d.addClass("twentytwenty-after");var i=s.find(".twentytwenty-overlay");i.append("
"),i.append("
");var a=function(t){var e,n,i,a,o=(e=t,n=c.width(),i=c.height(),{w:n+"px",h:i+"px",cw:e*n+"px",ch:e*i+"px"});l.css("vertical"===r?"top":"left","vertical"===r?o.ch:o.cw),a=o,"vertical"===r?(c.css("clip","rect(0,"+a.w+","+a.ch+",0)"),d.css("clip","rect("+a.ch+","+a.w+","+a.h+",0)")):(c.css("clip","rect(0,"+a.cw+","+a.h+",0)"),d.css("clip","rect(0,"+a.w+","+a.h+","+a.cw+")")),s.css("height",a.h)},o=function(t,e){var n,i,a;return n="vertical"===r?(e-v)/p:(t-w)/f,i=0,a=1,Math.max(i,Math.min(a,n))};g(window).on("resize.twentytwenty",function(t){a(e)});var w=0,v=0,f=0,p=0,y=function(t){(t.distX>t.distY&&t.distX<-t.distY||t.distX-t.distY)&&"vertical"!==r?t.preventDefault():(t.distXt.distY&&t.distX>-t.distY)&&"vertical"===r&&t.preventDefault(),s.addClass("active"),w=s.offset().left,v=s.offset().top,f=c.width(),p=c.height()},h=function(t){s.hasClass("active")&&(e=o(t.pageX,t.pageY),a(e))},u=function(){s.removeClass("active")},_=m.move_with_handle_only?l:s;_.on("movestart",y),_.on("move",h),_.on("moveend",u),m.move_slider_on_hover&&(s.on("mouseenter",y),s.on("mousemove",h),s.on("mouseleave",u)),l.on("touchmove",function(t){t.preventDefault()}),s.find("img").on("mousedown",function(t){t.preventDefault()}),m.click_to_move&&s.on("click",function(t){w=s.offset().left,v=s.offset().top,f=c.width(),p=c.height(),e=o(t.pageX,t.pageY),a(e)}),g(window).trigger("resize.twentytwenty")})}}(jQuery)
タイトルとURLをコピーしました