JPEGの仕組み：JPEGの非可逆圧縮方法をインタラクティブに探る

2017年9月9日 約11分 ビジュアライゼーション 画像 圧縮 JPEG STEM JPEGの仕組み：インタラクティブにJPEGの非可逆圧縮方法を探る 目次 はじめに テクノロジーの世界では、「永遠」は約5年を意味します。1992年のJPEG画像規格が、5年以上の「永遠」を経てもなお力強く生き残っていると考えると、謙虚な気持ちになります。なぜこれほど成功したのでしょうか？この記事では、JPEGの主要なアイデアを平易な言葉で紹介し、ページ上でインタラクティブなJPEGコンプレッサーを提供しているので、自宅で試すことができます。 圧縮方法 圧縮技術は、データ内の繰り返しパターンを探し、それらをより短いパターンに置き換えます。これは、長い単語やフレーズの代わりに略語や頭字語を使用するようなものです。ビデオ、静止画像、オーディオは通常、うまく圧縮できません。画像やサウンドの問題は、これらのデータが良すぎる略語を見つけるにはノイズが多すぎることです。このため、JPEGや他の多くのメディアフォーマットは、非可逆圧縮と呼ばれるものを使用します。 非可逆圧縮とは、一部の情報を破棄することでファイルサイズを削減することです。図書館員が本棚のスペースがなくなり、もっと本を入れる必要があると想像してください。彼女が本のデジタルコピーやマイクロフィッシュコピーに置き換えた場合、それは可逆圧縮です。彼女が本を燃やした場合、それは非可逆圧縮です。 あなたが演奏する音符ではなく、演奏しない音符が重要です。マイルス・デイビス 良い非可逆圧縮の秘訣は、誰も気にしない情報を破棄することです。誰も読まない本を燃やすことです。何を保持するかをどのように決定するか？科学です！画像圧縮の場合、人間の知覚にとって重要な部分とそうでない部分を理解することから始めます。次に、重要な品質を維持し、残りを破棄する方法を見つけます。JPEGでは、非可逆圧縮は2つの心理視覚原理に基づいています。 明るさの変化は色の変化よりも重要です。人間の網膜には約1億2000万個の明るさ感知ロッド細胞がありますが、色感知コーン細胞は約600万個しかありません。 低周波数の変化は高周波数の変化よりも重要です。人間の目は、物体のエッジのような低周波数の光の変化を判断するのが得意です。忙しいパターンやテクスチャの細かいディテールのような高周波数の光の変化を判断するのはそれほど正確ではありません。カモフラージュは、高周波数のパターンがカモフラージュされたもののエッジを妨げるという部分で機能します。 JPEG圧縮は、これらのアイデアを順番に適用します。各ケースで、画像データは、必要な情報（明るさまたは周波数情報）へのアクセスを容易にするように変換されます。次に、重要でない情報の一部が破棄されます。最終ステップとして、残った情報が従来の可逆圧縮で圧縮され、最終結果が可能な限り小さなスペースに詰め込まれます。この記事では、実際の画像を使用して、エンコード（JPEGとして保存）およびデコード（JPEGからロード）プロセス全体をステップバイステップで探求します。エンコード設定を操作して、結果がどのように影響するかを確認できます。始めましょう！ エンコード まず、圧縮する入力画像を選択します。 入力画像 画像を選択してください： タワー 花 カバ 低周波数 高周波数 独自の画像を選択 提供されたリストから画像を選択してください。いくつか試すことができますが、初めての場合はデフォルトの「タワー」画像を使用することをお勧めします。低周波数と高周波数のセグメントの良い組み合わせがあり、記事の本文で時々参照します。 「独自の画像を選択」を選択するか、画像ファイルをページにドラッグアンドドロップして、独自の画像を使用することもできます。 ステップ1：色の情報を分離する 画像はピクセルで構成されています。各ピクセルの色は、そのピクセルの色を再現するために必要な赤、緑、青の光の量の合計です。 典型的なコンピューター画像は、ピクセルと呼ばれる小さな色の正方形のグリッドで構成されています。各ピクセルは、そのピクセルの色を再現するために必要な赤、緑、青の光の量を表す3つの数値として格納されます。このため、RGB画像と呼ばれます。左側のイラストの左側には、選択した画像の赤、緑、青の部分が3つの別々のチャンネルに分割されているのが見えます。 JPEGにとっての問題は、画像の明るさ情報がR、G、Bチャンネル全体に均等に分散していることです。明るさは色よりも重要であることを覚えておいてください。そのため、明るさを色情報から分離して個別に処理できるようにする必要があります。これを実行するために、JPEGは数学を使用して画像のカラースペースをRGBからYCbCrに変換します。YCbCr画像も3つのチャンネルを持ちますが、すべての明るさ情報は1つのチャンネル（Y）に格納され、色の情報は他の2つ（CbおよびCr）に分割されます。 左側のイラストの右側には、同じ画像がY（上）、Cb（中）、Cr（下）のチャンネルに分割されているのが見えます。CbおよびCrチャンネルは「ぼやけて」いることに注意してください。これは、明るさ情報によって与えられたすべての定義がYチャンネルに移動したためです。 イラストのサイズを妥当なものにするために、すべてのチャンネルを縮小しました。実際には、それぞれが元の画像と同じサイズです。 ステップ2：色情報を一部破棄する YCb / Cr 他に何もする前に、JPEGはCbおよびCr（色）チャンネルのみを縮小し、重要なY（明るさ）チャンネルをフルサイズで維持することにより、色情報を一部破棄します。厳密には、このステップはオプションです。標準では、すべての色情報を保持するか、半分、または4分の1を保持できます。画像の場合、ほとんどのアプリは色情報の半分を保持します。ビデオの場合は通常4分の1です。このデモでは、効果を誇張するためと、より良いイラストを作成するために、4分の1を保持しています。 最初に3つのフルチャンネルから始まり、次に1つのフルチャンネルと2つの¼チャンネル、合計1½チャンネルになったことに注意してください。まだ始まったばかりで、すでに開始した情報の半分まで減っています！ ステップ3：周波数領域に変換する Y'Cb' / Cr' 人間の視覚認識に関する2番目の観察結果を利用するために、まずY、Cb、Crチャンネルのそれぞれを8×8ピクセルのブロックに分割します。これらの各ブロックを空間領域から周波数領域に変換します。 ちょっと待ってください！何？OK、Yチャンネルのこれらの8×8ブロックの1つだけを考えてみましょう。空間領域は現在の状態です。左上隅の値は、そのブロックの左上隅のピクセルの明るさ（Y値）を表します。同様に、右下隅の値は、そのブロックの右下隅のピクセルの明るさを表します。したがって、空間という用語は、ブロック内の位置が画像内の位置を表します。このブロックを周波数領域に変換すると、ブロック内の位置は代わりに画像内の周波数帯を表します。ブロックの左上隅の値は最も低い周波数情報、ブロックの右下隅の値は最も高い周波数情報を表します。 この領域変換は、2D離散コサイン変換（DCT）と呼ばれる数学的な巧妙さによって達成されます。（フーリエ変換を聞いたことがあるなら、DCTは似ていますが、実数のみを使用します。これはコンピューター表現に便利です。）本質的なアイデアは、8×8ブロックの値​​を、それぞれ固有の周波数を持つコサイン関数の合計として表現することです。 数学を理解する必要はありませんが、仕組みを把握することはできます。タワー画像のY周波数イラストを見てください。低周波数情報の暗い点のおかげで、各8×8ブロックの左上隅がはっきりと見えます。次に、画像の空の部分からのブロックを見ると、各ブロックの残りの部分がほとんど空であることがわかります。空には劇的な変化はあまりありません