Optimize Images Using Dynamic Color Quantization with imgix
At imgix, we continue to enable ways to better optimize and deliver images for our customers. We strive for the highest visual quality with the smallest file sizes possible. Today, we introduce the ability to utilize color quantization.
Color quantization reduces the number of colors in an image while maintaining its overall visual construction. Depending on the file type, this can dramatically reduce the file size of the image. TinyPNG and other similar applications use color quantization to reduce image file sizes. With imgix, you now have the ability to perform these operations on the fly merely by changing a URL parameter. Color quantization can also be used to produce artistic effects.
Basic Usage
To use color quantization, set the colorquant param in your imgix URL. It accepts a value between 2 and 256. This operation is one of the last in the imgix order of operations, and will be applied after other image adjustments and compositing operations.
?colorquant=16
?colorquant=3
Using colorquant for Optimization
When considering color quantization for compression, you will see the biggest benefits when trying to shed some kilobytes off of graphic elements, icons, or animations.
Used in conjunction with fm=png8, you can maintain a sharp and pixel perfect graphic while reducing its file size by as much as 60%. The following example shows the same transparent PNG processed using colorquant and fm=png8. The original in this example is a 1200×900 lossless transparent PNG graphic exported originally from Adobe Illustrator’s “Save for Web” dialog.
original | 83.15kB
?colorquant=28 | 62.58kB
?fm=png8 | 28.47kB
?fm=png8 &colorquant=24 | 18.69kB
While the setting fm=png8 causes a great reduction alone, you can see that limiting the color palette with color quantization can scrape off another 10kB from the image while still maintaining its visual integrity.
Posterization
Posterization is a photographic process of reducing colors in an image, producing distinct contours and areas of flat color. This effect is available in many photo editing suites, and can be applied instantly using imgix by making use of colorquant.
original
?colorquant=4
Advanced Stylistic Effects
Making use of colorquantalong with the halftone parameter, one can achieve even more stylistic imagery and retain more detail.
original
?colorquant=4&htn=4
original
?colorquant=4&htn=2
You can learn about all of our on-demand imaging features in our API Documentation. If you have any additional questions about colorquant or how imgix can be a good fit for your company, don’t hesitate to get in touch with our friendly support team. If you don’t have an imgix account, it’s free to sign up.
