Resizing a vast database of images to fit a fixed-size image container—as is often required for profile photos or product images—can be a truly daunting (and thankless) task. In a previous post, we demonstrated how imgix’s
fit=fillmax parameters offer a simple solution by allowing you to automatically resize images and fill in any excess space with a single solid color. Now, we’re excited to increase the scope and flexibility of
fit=fillmax with a new parameter, blur.
Let’s say you have a large library of images to resize with the following requirements:
- fit images into fixed-size containers
- preserve aspect ratios
- preserve all image data
To accomplish this, each image container must hold the resized original image and, often, excess space, which prompts the question of how to fill that space. Previously, the answer was to choose a solid color. For example, if the images shared a consistent background color, such as white, using the fit mode with
fill=solid and the default
fill-color of white would result in a uniform look.
Original images of varying sizes:
After using the parameter string
w=200&h=200&fit=fillmax&fill=solid&fill-color=ffffff&border=1,000&pad=10 on all images:
This approach lacked stylistic nuance in certain situations, particularly where the backgrounds of the original images varied in color. A developer had to choose either to define fill colors for images individually or to choose a single fill color to apply across the board. Variation in the aspect ratios could also exacerbate the inconsistent look of a one-parameter-string-fits-all approach:
Additionally, many images, such as a profile photo taken against a scenic or complex background, do not present an obvious choice for a single fill color:
The Solution: Blur
The new blur parameter now provides a solution that can be applied to images across the board, and yet is automatically tailored to each individual image.
Using the blur parameter, excess space can now be filled with a blurred version of the original image. In some contexts, the effect is much more subtle and aesthetically pleasing than a solid fill would be:
For more details on the new blur parameter, see our API documentation. imgix is constantly working to add stylistic options and provide state-of-the-art tools to execute your designs. Hoping to see something specific? Don’t hesitate to reach out.