動的色量子化を使用して画像を最適化する
カラークオンタイズは、画像の全体的な視覚構造を維持しながら、画像内の色の数を減らす手法です。ファイル形式によっては、これにより画像のファイルサイズが劇的に減少することがあります。TinyPNGや他の類似のアプリケーションは、カラークオンタイズを使用して画像ファイルサイズを削減します。カラークオンタイズは、芸術的な効果を生み出すためにも使用できます。
imgixを使用すると、URLパラメーターを変更するだけでカラークオンタイズ操作をオンデマンドで実行できます。最適化と効果の両方について、どのように機能するかを見てみましょう。
基本的な使用方法
カラークオンタイズを使用するには、imgix URLにcolorquant
パラメーターを設定します。このパラメーターは2
から256
の値を受け入れます。この操作はimgixの操作順序の最後の一つであり、他の画像調整や合成操作の後に適用されます。
最適化のためのcolorquant
の使用
圧縮のためのカラークオンタイズを検討する際には、グラフィック要素、アイコン、またはアニメーションからキロバイトを削減する際に最大の効果を発揮します。
fm=png8
と併用することで、シャープでピクセルパーフェクトなグラフィックを維持しながら、ファイルサイズを最大60%削減できます。次の例では、透明なPNGを使用し、colorquant
およびfm=png8
で処理した同じ画像を示します。この例の元の画像は、Adobe Illustratorの「Web用に保存」ダイアログからエクスポートされた1200×900の無損失透明PNGグラフィックです。
fm=png8
を設定するだけでも大幅な削減が可能ですが、カラーパレットを制限することで、さらに10kBの削減が可能です。それでも視覚的な完全性を保つことができます。
ポスタリゼーション
ポスタリゼーションは、画像内の色を減少させ、明確な輪郭と平坦な色の領域を作り出す写真技法です。この効果は多くの写真編集ソフトで利用でき、imgixを使用してcolorquant
を設定することで即座に適用できます。
高度なスタイリスティック効果
colorquant
とハーフトーンパラメーター(htn
)を併用することで、ディテールを保持しながら、さらにスタイリッシュな画像を作成できます。