New Blur Parameter Offers Fresh Possibilities in Fit Mode

Blur effect

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=fill and 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=fill and fit=fillmax with a new parameter, blur.


The Challenge

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:

original image
original image
original image

After using the parameter string w=200&h=200&fit=fillmax&fill=solid&fill-color=ffffff&border=1,000&pad=10 on all images:

resized with fit=fillmax and fill=solid
resized with fit=fillmax and fill=solid
resized with fit=fillmax and fill=solid

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:

resized with gray fill at left and right
resized with gray fill on top and bottom
resized with very small strip of gray fill on top and bottom

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:

profile photo with complex background, resized with fit=fillmax and fill=solid
profile photo with complex background, resized with fit=fillmax and fill=solid
profile photo with complex background, resized with fit=fillmax and fill=solid

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:

profile photo with complex background, resized with fit=fillmax and fill=blur

photo of multicolored hallway, resized with fit=fillmax and fill=blur

photo of canyon, resized with fit=fillmax and fill=blur

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.