JPEG画像をより美しく、より軽量に最適化するテクニック

JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。

Clever JPEG Optimization Techniques

Clever JPEG Optimization Techniques

1. 「8ピクセル」のグリッド

JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。
この8x8ピクセルを利用して、JPEG画像を最適化します。

チュートリアルのキャプチャ

画質10で作成したサンプル

二つの正方形は同じ大きさ(8x8ピクセル)です。左上のはきれいに見え、右下のは汚く見えると思います。
これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。

保存する際に画像は、8x8ピクセルのブロックに分けられるためこのようなことが起こります。

この 「8ピクセル」のテクニックは、長方形のオブジェクトを保存する際に特に有用です。

チュートリアルのキャプチャ

上と下で8ピクセルのグリッドに揃っているものと揃っていないものでは、ファイルの容量は上(13.51KB)、下(12.65KB)となります。

8ピクセルのグリッドに揃えて配置するだけで、JPEG画像の容量を1KB減らすことができ、さらに美しく保存できます。

2. カラーの最適化

このテクニックはどちらかと言えば複雑で、特定の種類の画像のみ有用なテクニックです。使用することがなくても、テクニックを知っているということは大事なことです。

イメージのモードを「Lab カラー」にして、最適化をします。
Labモードは明度チャンネル(L)と二つの色チャンネル(a, b)をもっており、冗長なカラーインフォーメーションを取り除きます。

Labモードの作業時にオリジナルのコピーで行うのは作業時の助けになるでしょう。

下記の画像は主にブラックとオレンジ色のピクセルで構成されており、ブラックの明るさはゼロです。
このことは明度チャンネルに大きな影響を与えます。

チュートリアルのキャプチャ

チャンネルをaにし、[フィルタ]-[ノイズ]-[明るさの中間値]で光をゆがめないように可能な限り半径を小さくします。

各チャンネルでレベル補正を行います。このサンプルでは真ん中のスライダを1.08にしています。aチャンネルの補正が終了したら、bチャンネルでも同じことをします。

チュートリアルのキャプチャ

最適化を行ったアフターの画像は5KBのサイズ軽量とともに、より美しく鮮やかに見えていると思います。

慣れてくれば、作業時間は1分もかからないでしょう。Labモードに変更し、各色チャンネルでフィルタを使用し、レベル補正を行ってみてください。

3. JPEG最適化の一般的なTips

JPEG画像の最適化の基準は、品質に対するファイルサイズです。
例えばPhotoshopで画質55~60で保存した画像は、他のソフトウェアで80の画質にしたものと同程度でしょう。

JPEGで保存する際に、100の画質は使用しないでください。100は最も高い品質ではなく、単に数字上の限界に過ぎません。
100にした結果、無駄にサイズが肥大するだけでしょう。画質を95にする時点で、画像のロスを妨げてるのに充分な数値です。

Photoshopでは、画質50を境にカラーダウンサンプリングと呼ばれる最適化のアルゴリズムを用います。

チュートリアルのキャプチャ

高いコントラストを持つ小さい画像の場合、Photoshopで画質51にしてJPEGを保存するのは有用なテクニックです。

top of page

©2017 coliss