In our ongoing quest to make imgix more useful, we're always looking at ways to automate solutions for common customer use cases. Image file size is obviously a key one, which we've already addressed with several parameters:
Optimizing for the best compression while retaining reasonable quality can be a trial-and-error process, however, especially if you have both illustrations and photographs in your catalog. The “best” parameters for these types are quite different. And there are cases where more compression than normal is preferable for load times.
auto=compress parameter enables you to optimize for smaller file sizes, with a minimal quality loss and without tweaking each image.
The specific operations that
auto=compress uses will vary and improve over time, but generally it alters our normal algorithms in favor of more aggressive image compression. The normal quality setting (
q) is reduced to
45 from the default of
75, and further file size reduction can be achieved by combining it with
Let's see what the results are for a few types of common image inputs. All examples are reduced 50% to fit—you can see larger versions in the Sandbox by clicking on the images.
We'll start with a detailed high-res photograph to show how
auto=compress handles complex images.
auto=compress (1200×500, 93kB)
auto=compress, we've saved over 50% of the file size with no obvious degradation in quality.
For images with large areas of flat color and transparent backgrounds, like illustrations or logos, the savings can be even more dramatic.
auto=compress (1280×640, 14.82kB)
auto=compress Without CSS Transparency Grid
auto=compress reduced the file size by over 99%, with no loss in quality.
Note: Files without transparency will be output as JPEG. If your illustrations are saved as PNG without transparency, this will lead to a loss in image quality.
auto=compress parameter can also be combined with other parameters to further reduce file size. For example,
fm=webp are respected, so images can be served in a WebP format whenever possible.
For more information on
auto=compress, see the documentation.