始めるチュートリアルパフォーマンスとメタデータ動的色量子化を使用して画像を最適化する

動的色量子化を使用して画像を最適化する

カラークオンタイズは、画像の全体的な視覚構造を維持しながら、画像内の色の数を減らす手法です。ファイル形式によっては、これにより画像のファイルサイズが劇的に減少することがあります。TinyPNGや他の類似のアプリケーションは、カラークオンタイズを使用して画像ファイルサイズを削減します。カラークオンタイズは、芸術的な効果を生み出すためにも使用できます。

imgixを使用すると、URLパラメーターを変更するだけでカラークオンタイズ操作をオンデマンドで実行できます。最適化と効果の両方について、どのように機能するかを見てみましょう。

mark-align=middle,center&mark=https://assets.imgix.net/presskit/imgix-presskit.pdf?w=160&fm=png&page=2&w=640&q=75&h=320&fm=png8&fit=crop&colorquant=9
sandbox-demo

基本的な使用方法

カラークオンタイズを使用するには、imgix URLにcolorquantパラメーターを設定します。このパラメーターは2から256の値を受け入れます。この操作はimgixの操作順序の最後の一つであり、他の画像調整や合成操作の後に適用されます。

colorquant=16
sandbox-demo
colorquant=3
sandbox-demo

最適化のためのcolorquantの使用

圧縮のためのカラークオンタイズを検討する際には、グラフィック要素、アイコン、またはアニメーションからキロバイトを削減する際に最大の効果を発揮します。

fm=png8と併用することで、シャープでピクセルパーフェクトなグラフィックを維持しながら、ファイルサイズを最大60%削減できます。次の例では、透明なPNGを使用し、colorquantおよびfm=png8で処理した同じ画像を示します。この例の元の画像は、Adobe Illustratorの「Web用に保存」ダイアログからエクスポートされた1200×900の無損失透明PNGグラフィックです。

Original: 83.15kB
sandbox-demo
?colorquant=28: 62.58kB
sandbox-demo
?fm=png8: 28.47kB
sandbox-demo
?fm=png8&colorquant=24: 18.69kB
sandbox-demo

fm=png8を設定するだけでも大幅な削減が可能ですが、カラーパレットを制限することで、さらに10kBの削減が可能です。それでも視覚的な完全性を保つことができます。

ポスタリゼーション

ポスタリゼーションは、画像内の色を減少させ、明確な輪郭と平坦な色の領域を作り出す写真技法です。この効果は多くの写真編集ソフトで利用でき、imgixを使用してcolorquantを設定することで即座に適用できます。

?colorquant=4
sandbox-demo

高度なスタイリスティック効果

colorquantとハーフトーンパラメーター(htn)を併用することで、ディテールを保持しながら、さらにスタイリッシュな画像を作成できます。

?colorquant=4&htn=4
sandbox-demo
?colorquant=4&htn=2
sandbox-demo