巧妙なJPEGの最適化手法

投稿者管理者 2009年7月5日で| コメントはありません

（評価無しけれども）

読み込み中...

著者：カメルNahdi

私はカメルNahdiです。私は様々な雑誌と私はギグのポスター、Tシャツ、カタログ、雑誌、等を設計していないよウェブサイトのためのチュートリアルを書く

カメルNahdiは、私たちは46の記事を書いている。

Shareaholic取得

人々は、画像の最適化について語るとき、彼らはその上で"品質"スライダを、パレットの色数、ディザリングなどの一般的なイメージ編集者によって提供される限られたパラメータを、考慮してください。また、次のようないくつかのユーティリティ、 optipngのとjpegtranは、画像ファイルの余分なバイトを絞り出す管理する。これらのすべては、画像の最適化の簡単なテクニックを使ってWeb開発者やデザイナーを提供する非常によく知られているツールです。

この記事では、私たちはあなたに画像データが異なる形式で保存されている方法に基づいて画像の最適化とは異なるアプローチを、紹介します。 JPEG形式と8ピクセルのグリッドと呼ばれる単純な手法から始めましょう。

8ピクセルのグリッド

すでにご存知のように、JPEG画像は、8のシリーズ× 8ピクセルのブロックを、あなたはあまりにも低JPEG"品質"パラメータを設定した場合、特に目に見えることができるから構成されています。これはどのように画像の最適化と私たちを助けるのですか？次の例を考えてみます。

32 × 32ピクセル、画質：10（Photoshopで）、396バイト。

8 × 8画素：両方白い正方形は同じ大きさです。品質が低く設定されていますが、右下隅には、ファジーに見える（ご想像のとおり）と左上隅にはきれいに見えます。それは、なぜ起こるのか？これに答えるために、我々はグリッドの下にこの画像を見る必要があります。

ご覧のように、左上の四角は、角がシャープに見えることを保証する8ピクセルのグリッド、に整列されます。

保存すると、画像は8ブロック× 8画素に分割され、各ブロックは独立して最適化されています。右下の正方形のグリッドセルと一致しないため、オプティマイザは（JPEGで、各8 × 8ブロックの正弦波としてエンコードされます）黒と白の間の平均色のインデックスを探します。これは、ファズを説明しています。 JPEG最適化のための多くの先進的なユーティリティは、別の画像領域と、より保存されたバイト数の異なる品質の共同efficientsの選択最適化し、結果と呼ばれるこの機能を、持っている。

この手法は、長方形のオブジェクトを保存する場合に特に便利です。それはより実用的な画像とどのように機能するか見てみましょう：

13.51キロバイト

12.65キロバイト

最初の例では、電子レンジがランダムに配置されている。番目のファイルを保存する前に、我々は、8ピクセルのグリッドでの画像の位置を合わせます。 55：品質設定は、両方とも同じです。のは（赤い線は、グリッドマークを付ける）を詳しく見てみましょう：

ご覧のように、我々は、単に画像を正しく配置することによって画像データの1 KBの保存しました。また、我々はあまりにも"、掃除機"のイメージを少ししました。

色の最適化

この手法はかなり複雑であり、画像の特定の種類に対してのみ機能します。理論を学習する場合にのみ、しかし、我々は、とにかくその上に行くよ。

最初に、我々は、JPEG形式に使用されているカラーモデルを知る必要があります。ほとんどの画像フォーマットは、RGBカラーモデルではありますが、JPEGにも広くテレビのために使用されているのYCbCr、にすることができます。

YCbCrのは、YCbCrとHSVという意味で、人間の視覚システム（HSVは、ほとんどの設計者になじみのあるもの）クロマから非常に敏感であるため、両方の別々の軽さHSVモデルに似ています。色相、彩度、値：それは3つのコンポーネントがあります。ここに私達の目的のために最も重要なのは、また明るさとして知られている値、です（オプティマイザは、カラーチャンネルを圧縮するが、人間はそれに最も敏感であるため、可能な限りの値が高く維持する傾向がある）。 Photoshopのは、私たちはより良いJPEGオプティマイザを使用して圧縮するためのイメージを準備するのに役立ちますLabカラーモードを、持っています。

私たちの例として電子レンジに固執してみましょう。私達の色の最適化のための完全なサンプルであるドアを細かくネットは、そこです。シンプルで圧縮した後、55の品質で、ファイルは64.39キロバイトの重量を量る。

990 × 405ピクセル、画質：55（Photoshopで）、64.39キロバイト
拡大バージョン。

Photoshopで画像の拡大版を開く、およびLabカラーモードをオン：イメージ>>モード>> Labカラー。

ラボモードはほとんどですが、かなり、HSVおよびYCbCrのと同じ。明度チャンネルは画像の明るさに関する情報が含まれています。チャンネルは、赤や緑のがどのくらいあるかを示しています。 AとBのチャンネルは、青と黄色のハンドル。これらの違いにもかかわらず、このモードでは、私たちは冗長な色情報を取り除くことができます。

チャンネルパレットに切り替えて、AとBのチャンネルを見てください。我々は明らかにネットのテクスチャを参照してください、と軽さの異なる強度の3ブロックに分けて考えることができます。

我々は、その別のウィンドウで開いて元のコピーがおそらく助ける保ち、いくつかの色の変更を行うこととしている。私たちの目標は、両方のカラーチャンネルでこれらのセクションのざらざらした質感を滑らかにすることです。これにより、オプティマイザで動作するようにはるかに簡単にデータを与える。我々は画像（オーブンのドアのウィンドウ）のこの特定の領域を最適化しているなぜあなたは不思議に思われるかもしれません。シンプル：このエリアは、黒とオレンジ色のピクセルを交互に構成されています。黒はゼロ軽さであり、そしてこの情報は明度チャネルに格納されています。そう、我々はカラーチャンネルにこの領域が完全にオレンジ行う場合、明るさチャンネルは画素が暗くなるかを決定するため、我々は何を失うことはありません、と完全に黒と濃いオレンジ色の違いは、そのようなテクスチャに顕著ではありません。

チャネルへの切り替え、別々に各ブロックを選択し、メディアンフィルタ（フィルタ>>ノイズ>>中央値）を適用する。半径は、そのようにあまりにも多くのまぶしさを歪曲しないように（テクスチャが消えるまで、つまり）をできるだけ小さくする必要があります。第三の2番目および4の最初のブロック内の4の目的は、2。この時点で、ドアは次のようになります。

拡大バージョン。

彩度が低いので、これを修正する必要があります。即座すべての色の変化を確認するには、現在アクティブなウィンドウを複製：ウィンドウ>>アレンジ>>新しいウィンドウ。新しいウィンドウで、画像を表示するためにラボのチャネルをクリックしてください。その結果、作業スペースは、次のようになります。

オリジナルは右、下部左と職場での重複になります。

職場でのチャネル内のすべての3つのブロックを選択し、レベルのウィンドウ（Ctrl + Lまたはイメージ>>色調補正>>レベル）を呼び出す。左中央のスライダを移動するように複製コピーの試合ではオーブンの内側の色を元の（私は中央のスライダ1.08の値を得た）。 Bチャネルで同じ操作を行いますと、それがどのように参照してください。

990 × 405ピクセル、画質：55（Photoshopで）、59.29キロバイト
大規模なバージョン

ご覧のように、我々は、画像（それは64.39キロバイトだった）から5 KBを削除。この技法の説明は大きく、恐ろしい見えますが、それは実行には1分しかかからない：Labカラーモデルに切り替え、カラーチャンネルの異なる地域を選択し、それらのメディアンフィルタを使用して、ある程度の飽和補正を行います。述べたように、このテクニックはその背後にある理論の方が便利ですが、私はクリーンで鮮明に見えるように持って微調整する大規模な広告の画像に使用します。

一般的なJPEGの最適化のヒント

我々は、いくつかの有用な最適化のヒントを提供することで、ここで終わるでしょう。

もし画像の圧縮品質を選択するたびに、あなたが最適化のために使用するプログラムの選択で、意図的である。 JPEG規格は厳しいです：彼らは唯一のファイルサイズを縮小するときに画像が変換される方法が決まります。しかし開発者は、正確にオプティマイザが何をするかを決定します。

例えば、いくつかのマーケティング担当者は倍重いようなファイルを作るとしてPhotoshopを描いた一方、あなたが高品質の設定で小さいサイズでファイルを保存できるように、最善の最適化を提供するとして、そのソフトウェアを促進する。各プログラムは、独自の品質の尺度を持っている、と様々な値は、追加の最適化アルゴリズムを決定インチ取られてはいけない。

最適化のパフォーマンスを比較するために使用される、唯一の基準は、サイズの比率に質です。 Photoshopで55から60品質で画像を保存すると、それは次のように、80品質、言う、で他のソフトウェアで作成したファイルと同じサイズになります。

100品質で画像を保存しないでください。これは最高の品質ではない、むしろ唯一の数学的な最適化の限界。あなたは不当に重いファイルとなってしまいます。 95の品質で画像を保存すると、十分すぎるほどの損失を防ぐためです。

Photoshopで50以下に品質を設定すると、それは色隣接する8ピクセルのブロックの平均値から色をダウンサンプリングと呼ばれる追加の最適化アルゴリズムを実行することに留意してください：