JPEG形式の仕組み

JPEG 画像は私たちのデジタル生活のいたるところにありますが、この表面的な意識の背後には、人間の目には知覚できない細部を削除するアルゴリズムがあります。 その結果、最小のファイル サイズで最高のビジュアル品質が得られます。しかし、それはどのように正確に機能するのでしょうか? 私たちの目には見えないものを正確に見てみましょう!

友人が使用しているデバイス、ブラウザ、オペレーティング システムを気にせずに写真を送信できる機能は当然のことだと思われがちですが、必ずしもそうではありません。 1980 年代初頭までに、コンピュータはデジタル画像を保存して表示できるようになりましたが、これを行うための最良の方法については多くの競合するアイデアがありました。 あるコンピュータから別のコンピュータに画像を送信するだけで、それが機能することを期待することはできません。

この問題を解決するために、1986 年に世界中の専門家からなる委員会が結成されました。写真専門家の共同グループ» (Joint Photographic Experts Group、JPEG) は、スイスのジュネーブに本部を置く XNUMX つの国際標準化団体である国際標準化機構 (ISO) と国際電気標準会議 (IEC) の共同の取り組みとして設立されました。

JPEG と呼ばれるグループが 1992 年に JPEG デジタル画像圧縮標準を作成しました。 インターネットを使用したことがある人なら、おそらく JPEG でエンコードされた画像に遭遇したことがあるでしょう。 これは、画像をエンコード、送信、保存する最も一般的な方法です。 Web ページから電子メール、ソーシャル メディアに至るまで、JPEG は XNUMX 日に何十億回も使用されており、オンラインで画像を表示したり送信したりするたびに事実上使用されています。 JPEG がなければ、Web は色彩豊かでなく、速度も遅くなり、おそらく猫の写真も少なくなってしまうでしょう。

この記事では、JPEG 画像をデコードする方法について説明します。 つまり、コンピュータに保存されている圧縮データを、画面上に表示される画像に変換するために必要なものです。 これは知っておく価値があります。私たちが毎日使用しているテクノロジーを理解することが重要であるだけでなく、圧縮レベルのロックを解除することで、知覚と視覚、そして目が最も敏感に反応する細部についてさらに学ぶことができるからです。

また、このように画像をいじってみるのもとても面白いです。

JPEGの中を見る

コンピューターでは、すべてが一連の XNUMX 進数として保存されます。 通常、これらのビット (XNUMX と XNUMX) は XNUMX 個のグループにグループ化されてバイトを構成します。 コンピュータで JPEG 画像を開くと、何か (ブラウザ、オペレーティング システム、その他) がバイトをデコードし、表示可能な色のリストとして元の画像を復元する必要があります。

このお菓子をダウンロードすると 猫の写真 テキストエディタで開くと、支離滅裂な文字がたくさん表示されます。

ここでは、ファイルの内容を調べるために Notepad++ を使用しています。Windows 上のメモ帳などの通常のテキスト エディタでは、保存後にバイナリ ファイルが破損し、JPEG 形式を満たさなくなるからです。

ワードプロセッサで画像を開くと、目をこすって色の斑点が見え始めて脳が混乱するのと同じように、コンピュータが混乱します。

あなたが目にするこれらのスポットはとして知られています ホスフェン、光の刺激や心が生み出す幻覚の結果ではありません。 これらは、視神経の電気信号が光に関する情報を伝えていると脳が考えるために起こります。 信号が音なのか、視覚なのか、それとも他のものなのかを知る方法がないため、脳はこれらの仮定を行う必要があります。 体内のすべての神経はまったく同じ電気インパルスを伝達します。 目に圧力をかけると、視覚的ではない信号が送信され、目の受容体が活性化され、脳はそれを視覚的なものとして（この場合は誤って）解釈します。 文字通りプレッシャーがわかります！

コンピューターが脳にどのように似ているかを考えるのは面白いですが、これは、データの意味 (神経によって体内に運ばれるか、コンピューターに保存されるか) がデータの解釈方法にどれだけ依存するかを説明するのに役立つ例えでもあります。 すべてのバイナリ データは、あらゆる種類の情報を伝達できる基本コンポーネントである XNUMX と XNUMX で構成されています。 コンピューターは多くの場合、ファイル拡張子などの手がかりを使用して、ファイルを解釈する方法を見つけます。 ここで、テキスト エディタが期待しているものであるため、それらをテキストとして解釈するように強制します。

JPEG をデコードする方法を理解するには、元の信号自体、つまりバイナリ データを確認する必要があります。 これは、XNUMX 進数エディタを使用するか、直接実行できます。 元の記事のウェブページ！ 画像があり、その横のテキスト フィールドには、そのすべてのバイト (ヘッダーを除く) が XNUMX 進数形式で表示されます。 これらを変更すると、スクリプトが再エンコードして、その場で新しいイメージを生成します。

このエディターで遊ぶだけでも多くのことを学ぶことができます。 たとえば、ピクセルがどのような順序で保存されているかわかりますか?

この例の奇妙な点は、一部の数字を変更しても画像にはまったく影響がありませんが、たとえば最初の行の数字 17 を 0 に置き換えると、写真が完全に台無しになってしまうことです。

7 行目の 1988 を数値 254 に置き換えるなどの他の変更では、色が変わりますが、後続のピクセルのみが変わります。

おそらく最も奇妙なことは、一部の数値によって色だけでなく画像の形状も変化することです。 70 行目の 12 を 2 に変更し、画像の一番上の行を見て、意味を確認してください。

また、どのような JPEG 画像を使用しても、バイトを編集すると必ずこれらの神秘的なチェス パターンが見つかります。

JPEG 圧縮は XNUMX つの異なるテクノロジーで構成されており、レベルごとに順次適用されるため、エディターを使用する場合、これらのバイトから写真がどのように再作成されるかを理解するのは困難です。 それぞれを個別に調査して、見られる謎の動作を明らかにします。

XNUMX つのレベルの JPEG 圧縮:

1. カラーサブサンプリング.
2. 離散コサイン変換とサンプリング.
3. ランレングスエンコーディング, デルタ и ハフマン

圧縮の規模を理解するには、上の画像が 79 個の数値、つまり約 819 KB を表していることに注意してください。 圧縮せずに保存した場合、各ピクセルには赤、緑、青の成分の 79 つの数値が必要になります。 これは、917 個の番号、つまり約 700 個の番号に相当します。 917KB。 JPEG圧縮の結果、最終的なファイルは10分のXNUMX以上に縮小されました。

実際、この画像はさらに圧縮することができます。 以下は 16 つの画像を並べたものです。右側の写真は 57 KB に圧縮されており、非圧縮バージョンの XNUMX 分の XNUMX です。

よく見ると、これらの画像が同一ではないことがわかります。 どちらもJPEG圧縮された画像ですが、右の方が容量がかなり小さいです。 見た目も少し悪くなります (背景色の四角を見てください)。 JPEG が非可逆圧縮とも呼ばれるのはこのためです。 圧縮プロセス中に画像が変化し、一部の詳細が失われます。

1. カラーサブサンプリング

これは、最初のレベルの圧縮のみが適用された画像です。

（インタラクティブバージョン - で） 原作 記事）。 数字を XNUMX つ削除すると、すべての色が破壊されます。 ただし、正確に XNUMX つの数字が削除された場合、画像には事実上影響はありません。

これで、数字が少し解読しやすくなりました。 これは、ほぼ単純な色のリストで、各バイトが正確に 300 ピクセルを変更しますが、同時に非圧縮画像のサイズがすでに半分になっています (この縮小サイズでは約 XNUMX KB を占めることになります)。 その理由はわかりますか?

すべての数値をゼロに置き換えると、(白ではなく) 緑の画像が得られるため、これらの数値は標準の赤、緑、青の成分を表していないことがわかります。

これは、これらのバイトが Y (明るさ) を表すためです。

Cb (相対的な青さ)、

Cr (相対的赤み) の写真。

なぜRGBを使用しないのでしょうか? 結局のところ、これが最新の画面のほとんどの動作方法です。 モニターは、赤、緑、青を含むあらゆる色をピクセルごとに異なる強度で表示できます。 XNUMX つすべてを最大の明るさでオンにすると白になり、オフにすると黒になります。

これは人間の目の仕組みとよく似ています。 私たちの目の色受容体は「」と呼ばれています。コーン」、そして XNUMX つのタイプに分けられ、それぞれが赤、緑、青のいずれかにより敏感です [S タイプの錐体は青紫 (英語の Short からの S - 短波スペクトル)、M に敏感です。 -タイプ - スペクトルの緑-黄色（英語のMediumからのM - 中波）部分、およびLタイプ - スペクトルの黄 - 赤（英語のLong - 長波からのL）部分。 これら XNUMX 種類の錐体 (およびスペクトルのエメラルド グリーン部分に敏感な桿体) の存在により、人の色覚が決まります。 /約翻訳]。 スティック、私たちの目の中の別のタイプの光受容体は、明るさの変化を検出できますが、色に対してはるかに敏感です。 私たちの目には約 120 億 6 万個の桿体と、わずか XNUMX 万個の錐体があります。

これが、私たちの目が色の変化よりも明るさの変化を検出する方がはるかに優れている理由です。 色と明るさを分離すると、少し色を取り除くことができ、誰も何も気付かなくなります。 クロマ サブサンプリングは、画像の色成分を輝度成分よりも低い解像度で表現するプロセスです。 上の例では、各ピクセルには XNUMX つの Y コンポーネントがあり、XNUMX つのピクセルからなる個々のグループには XNUMX つの Cb コンポーネントと XNUMX つの Cr コンポーネントがあります。 したがって、画像に含まれる色情報は元の XNUMX 分の XNUMX になります。

YCbCr 色空間は JPEG だけで使用されるわけではありません。 もともとは 1938 年にテレビ番組のために発明されました。 誰もがカラー テレビを持っているわけではないため、色と輝度を分離することで全員が同じ信号を受信できるようになり、色のないテレビでは単純に輝度成分のみが使用されます。

したがって、エディターから XNUMX つの数値を削除すると、すべての色が完全に台無しになります。 コンポーネントは、YYYY Cb Cr の形式で保存されます (実際には、必ずしもこの順序で保存される必要はありません。保存順序はファイル ヘッダーで指定されます)。 最初の数値を削除すると、Cb の最初の値が Y、Cr が Cb として認識され、一般に、画像のすべての色が切り替わるドミノ効果が発生します。

JPEG 仕様では、YCbCr の使用は強制されていません。 ただし、RGB よりも優れたダウンサンプリング画像が生成されるため、ほとんどのファイルでこれが使用されます。 しかし、私の言葉をそのまま信じる必要はありません。 以下の表で、RGB と YCbCr の両方で各コンポーネントのサブサンプリングがどのようになるかをご自身の目で確認してください。

（インタラクティブバージョン - で） 原作 記事）。

青の除去は、赤や緑ほど目立ちません。 それは、目には 64 万個の錐体があり、約 32% が赤、2% が緑、XNUMX% が青に敏感だからです。

Y コンポーネントのダウンサンプリング (左下) が最もよくわかります。 小さな変化でも目立ちます。

画像を RGB から YCbCr に変換してもファイル サイズは減りませんが、削除できる目立たない詳細を見つけやすくなります。 非可逆圧縮は第 XNUMX 段階で発生します。 これは、データをより圧縮可能な形式で表現するという考えに基づいています。

2. 離散コサイン変換とサンプリング

ほとんどの場合、このレベルの圧縮が JPEG の本質です。 カラーを YCbCr に変換した後、コンポーネントは個別に圧縮されるため、Y コンポーネントだけに集中できます。このレイヤーを適用した後の Y コンポーネントのバイトは次のようになります。

（インタラクティブバージョン - で） 原作 記事）。 インタラクティブ バージョンでは、ピクセルをクリックすると、そのピクセルを表す行までエディターがスクロールします。 末尾から数字を削除するか、特定の数字にいくつかのゼロを追加してみてください。

一見すると、非常に悪い圧縮のように見えます。 画像には 100 個のピクセルがあり、その明るさ (Y 成分) を表すには 000 個の数値が必要です。これは、何も圧縮しないよりも悪いです。

ただし、これらの数値のほとんどはゼロであることに注意してください。 さらに、行末のゼロは画像を変更せずにすべて削除できます。 残りの番号は約 26 ですが、これはほぼ 000 分の 4 に減っています。

このレベルにはチェスのパターンの秘密が含まれています。 これまでに見てきた他の効果とは異なり、これらのパターンの出現は不具合ではありません。 これらはイメージ全体の構成要素です。 エディターの各行には、正確に 64 個の数値、64 個の固有のパターンの強度に対応する離散コサイン変換 (DCT) 係数が含まれています。

これらのパターンはコサイン プロットに基づいて形成されます。 そのうちのいくつかは次のようになります。

8 のオッズ中 64

以下は、64 パターンすべてを示した画像です。

（インタラクティブバージョン - で） 原作 記事）。

これらのパターンは 8x8 画像の基礎を形成するため、特に重要です。 線形代数に詳しくない方のために説明すると、これは、任意の 8x8 画像がこれら 64 のパターンから作成できることを意味します。 DCT は、画像を 8x8 ブロックに分割し、各ブロックをこれら 64 個の係数の組み合わせに変換するプロセスです。

あらゆる画像を 64 の特定のパターンで構成できるというのは魔法のようです。 しかし、これは、地球上のあらゆる場所は 8 つの数字、つまり緯度と経度 [半球を示す / 約 8 mm を表す] で表現できると言っているのと同じです。 翻訳]。 私たちは地球の表面を 64 次元であると考えることが多いため、必要な数値は 64 つだけです。 XNUMXxXNUMX 画像には XNUMX 次元があるため、XNUMX 個の数値が必要です。

これが圧縮という点でどのように役立つかはまだ明らかではありません。 64x8 の画像を表すのに 8 個の数値が必要な場合、64 個の輝度成分を単に保存するよりも優れているのはなぜでしょうか? これを行うのは、XNUMX つの RGB 数値を XNUMX つの YCbCr 数値に変換したのと同じ理由です。これにより、微妙なディテールを削除できるようになります。

JPEG は 8x8 ブロックに DCT を適用するため、この段階でどのディテールが削除されるかを正確に確認することは困難です。 しかし、それを全体像に適用することを誰も禁じていません。 画像全体に適用される Y コンポーネントの DCT は次のようになります。

60 を超える数字を、写真にほとんど変化を与えることなく端から削除できます。

ただし、最初の XNUMX つの数値をゼロにすると、違いが明らかになることに注意してください。

先頭の数字は、画像内の低周波の変化を表しており、私たちの目が最もよく捉えます。 最後のほうの数字は、気づきにくい高周波の変化を示しています。 「目に見えないものを見る」には、最初の 5000 個の数値をゼロにすることで、これらの高周波の詳細を分離できます。

ピクセルごとに最大の変化が発生する画像のすべての領域が表示されます。 猫の目、ひげ、テリー毛布、そして左下隅の影が目立ちます。 最初の 10 個の数値をゼロにすることで、さらに進めることができます。

20 000：

40 000：

60 000：

これらの高周波の詳細は、圧縮段階で JPEG によって削除されます。 カラーを DCT 係数に変換しても損失はありません。 損失は​​、高周波またはゼロに近い値が除去されるサンプリングステップで発生します。 JPEG の保存品質を下げると、プログラムによって削除される値の数のしきい値が増加し、ファイル サイズが小さくなりますが、画像のピクセル化が進みます。 そのため、57 分の 8 に縮小された最初のセクションの画像は次のようになりました。 各 8xXNUMX ブロックは、高品質バージョンと比較してはるかに少ない DCT 係数で表されました。

画像を段階的にストリーミングするようなクールな効果を作成できます。 より多くの係数がダウンロードされるにつれて、ぼやけた画像をより詳細に表示することができます。

ほんの 24 個の数値を使用して得られる結果をここに示します。

または 5000 だけ:

非常にぼやけていますが、何とか認識できます。

3. ランレングスエンコーディング、デルタ、ハフマン

これまでのところ、圧縮のすべての段階で非可逆性が生じていました。 逆に最終ステージはロスなく進みます。 情報は削除されませんが、ファイル サイズは大幅に削減されます。

情報を捨てずに圧縮するにはどうすればよいでしょうか? 700 x 437 の単純な黒い長方形をどのように記述するかを想像してください。

JPEG ではこれに 5000 という数値が使用されますが、さらに優れた結果が得られます。 このような画像をできるだけ少ないバイト数で記述するエンコード方式を想像できますか?

私が思いついた最小限のスキームは XNUMX つを使用します。XNUMX つは色を表し、XNUMX つ目はその色のピクセル数を示します。 この凝縮された方法で繰り返し値を表現するという考え方は、ランレングス符号化と呼ばれます。 エンコードされたデータを元の形式に復元できるため、ロスレスです。

黒い四角形を含む JPEG ファイルは 4 バイトよりもはるかに大きくなります。DCT レベルでは、圧縮が 8x8 ピクセル ブロックに適用されることに注意してください。 したがって、少なくとも 64 ピクセルごとに 63 つの DCT 係数が必要です。 XNUMX つの DCT 係数とそれに続く XNUMX 個のゼロを格納する代わりに、ランレングス エンコードでは XNUMX つの数値を格納し、「他のすべてはゼロ」であることを示すことができるため、これが必要になります。

デルタ エンコーディングは、各バイトに絶対値ではなく、ある値との差分を含める手法です。 したがって、特定のバイトを編集すると、他のすべてのピクセルの色が変更されます。 たとえば、保存する代わりに、

12 13 14 14 14 13 13 14

12 から始めて、次の数値を得るためにどれだけ加算または減算する必要があるかを単純に示すこともできます。 デルタコーディングのこのシーケンスは次の形式になります。

12 1 1 0 0 -1 0 1

変換されたデータは元のデータより小さくはなりませんが、圧縮が容易になります。 ランレングス エンコーディングの前にデルタ エンコーディングを適用すると、可逆圧縮を維持しながら非常に役立ちます。

デルタコーディングは、8x8 ブロックの外で使用される数少ない技術の 64 つです。 XNUMX 個の DCT 係数のうち、XNUMX つは単純な定数波動関数 (単色) です。 これは、輝度コンポーネントの各ブロックの平均輝度、または Cb コンポーネントの平均青さを表します。 各 DCT ブロックの最初の値は DC 値と呼ばれ、各 DC 値は前の値に対してデルタ エンコードされます。 したがって、最初のブロックの明るさを変更すると、すべてのブロックに影響します。

最後の謎は残ります。単数形を変更すると、どのようにして全体像が完全に台無しになるのでしょうか? これまでのところ、圧縮レベルにはそのような特性はありません。 答えは JPEG ヘッダーにあります。 最初の 500 バイトには、画像に関するメタデータ (幅、高さなど) が含まれていますが、まだ処理していません。

ヘッダーがなければ、JPEG をデコードすることはほとんど不可能 (または非常に困難) です。 まるで私がその絵を説明しようとしているように見えますが、私の印象を伝えるために言葉を考え始めています。 私は伝えたい意味を正確に表現できる言葉を作り出すことができるので、その説明はかなり凝縮されたものになるでしょうが、他の人にとっては意味が通じないでしょう。

ばかげているように聞こえますが、まさにそれが起こっていることです。 各 JPEG 画像は、その画像に固有のコードで圧縮されます。 コード辞書はヘッダーに格納されます。 この手法はハフマン コードと呼ばれ、ボキャブラリはハフマン テーブルと呼ばれます。 ヘッダーでは、テーブルは 255 と 196 の XNUMX バイトでマークされています。各色コンポーネントは独自のテーブルを持つことができます。

テーブルに変更を加えると、画像に根本的な影響が生じます。 良い例は、15 行目を 1 に変更することです。

これは、テーブルが個々のビットの読み取り方法を指定しているために発生します。 これまでのところ、1 進形式の 00000001 進数のみを扱ってきました。 しかし、これにより、数値 XNUMX を XNUMX バイトに格納したい場合、それは XNUMX のように見えるという事実が見えなくなります。これは、たとえ XNUMX つだけが必要な場合でも、各バイトには正確に XNUMX ビットが含まれている必要があるためです。

小さな数値が多数ある場合、これはスペースを大幅に無駄にする可能性があります。 ハフマン コードは、各数値が XNUMX ビットを占有する必要があるというこの要件を緩和できる技術です。 これは、XNUMX バイトが表示された場合:

234 115

そして、ハフマン テーブルによっては、これらは XNUMX つの数値になる可能性があります。 それらを抽出するには、まずそれらを個々のビットに分解する必要があります。

11101010 01110011

次に、テーブルを見て、それらをグループ化する方法を見つけます。 たとえば、これは最初の 111010 ビット (58)、つまり 10011 進数の 19、続いて 0011 ビット (3)、つまり XNUMX、最後に最後の XNUMX ビット (XNUMX)、つまり XNUMX になります。

したがって、圧縮のこの段階でバイトを理解することは非常に困難です。 バイトは見た目を表すものではありません。 この記事ではテーブルの操作方法については詳しく説明しませんが、 材料 この問題についてオンラインで 十分な.

この知識を活用して実行できる興味深いトリックの XNUMX つは、JPEG からヘッダーを分離して個別に保存することです。 実際、そのファイルを読み取ることができるのはあなただけであることがわかります。 Facebook はファイルをさらに小さくするためにこれを行っています。

他にできることは、ハフマン テーブルをかなり変更することです。 他の人にとっては、壊れた写真のように見えるでしょう。 そしてそれを解決する魔法の方法を知っているのはあなただけです。

要約しましょう: では、JPEG をデコードするには何が必要でしょうか? 必要：

1. ヘッダーからハフマン テーブルを抽出し、ビットをデコードします。
2. 各 8x8 ブロックの各色および輝度コンポーネントの離散コサイン変換係数を抽出し、逆ランレングスおよびデルタ エンコード変換を実行します。
3. 係数に基づいてコサインを結合し、8x8 ブロックごとのピクセル値を取得します。
4. サブサンプリングが実行された場合は、カラーコンポーネントをスケールします (この情報はヘッダーにあります)。
5. 結果として得られる各ピクセルの YCbCr 値を RGB に変換します。
6. 画像をスクリーンに表示！

猫と一緒に写真を見るだけの本格的な作品！ しかし、私が気に入っているのは、JPEG テクノロジーがいかに人間中心であるかを示していることです。 これは私たちの知覚の特性に基づいており、従来の技術よりもはるかに優れた圧縮を実現できます。 JPEG がどのように機能するかを理解したので、これらのテクノロジーを他の分野にどのように移転できるかを想像できるようになりました。 たとえば、ビデオのデルタ エンコーディングでは、フレームごとに変化しない領域全体 (背景など) が存在することが多いため、ファイル サイズを大幅に削減できます。

記事内で使用されているコードが開かれており、写真を自分の写真に置き換える方法が記載されています。

出所： habr.com