Perfect Product Photos and Logos with fillmax Fit Mode

Fillmax

Normalizing a large library of images like product photos or logos can be a headache. With wildly varying sizes and aspect ratios that all have to display well inside the same sized container, finding a way to automatically resize correctly is crucial. It’s especially important not to resize images beyond their original dimensions or stretch them, and that’s where imgix’s fit=fillmax parameter can help.


The Problem

You need to fit images to a standard container automatically, with the following constraints and behavior:

  • Images should fill the container if possible, but should not be resized or scaled larger than their original dimensions.
  • You want to be able to set a background color (assuming the image has transparency), and add padding around the image.
  • If the image is smaller than the container and background color is set, the image will remain at its original dimensions and the container will be filled in with the background color to its edges.
  • If the image is larger than the container, it will be reduced to fit, with the background filled in to the edges (with padding) if specified.

The Solution: fit=fillmax

imgix offers a slew of fit modes, and at first glance, fit=fill or fit=max might seem to do the trick for these constraints. However, we realized (based on customer feedback) that neither one quite did:

  • fit=fill resizes the image to the container without cropping or distorting the image, and fills the remaining space with a solid color. It will increase the size fo the image beyond its original dimensions if requested to.

    fit=fill sample

  • fit=max resizes the image to to the container without cropping or distorting the image, but will not increase the size of the image if it is smaller than the output size.

    fit=max sample

  • fit=fillmax combines fill and max to provide the background color fill while maintaining the image’s integrity and not resizing beyond its original dimensions:

    fit=fillmax sample

Prerequisites

  • The fit parameter has to be set to fillmax and the fill parameter set to solid.
  • The fill-color parameter has to be set to add the background fill color. If you want to use fit=fillmax without a color, set the fill-color to transparent (fill-color=0000).
  • The w and h parameters should match your container size.

For this example, we’ll assume a container size of 200×200 pixels, and a light gray background. We’ll use these as the example images:

Set Up the Container

Our container is 200×200, so we’ll add the w, h, fit=fillmax, fill=solid and fill-color=1000 parameters to all three images to fit them to it. The background color is 1000, or black at 10% opacity:

?w=200&h=200&fit=fillmax&fill=solid&fill-color=1000

The images now all fit into the 200×200 container, constrained by their longest dimension. Notice that the pants don’t quite fill the space—this image is only 180 pixels tall, so fit=fillmax left it at the original size. The other two images have been scaled proportionally to fit the container.

Add Padding (Optional)

Let’s say we don’t want the images bumping right up against the edge of the container. In that case, we can add padding around the images to create some space—10 pixels should be enough (pad=10).

?w=200&h=200&fit=fillmax&fill=solid&fill-color=1000&pad=10

The pants image, because its dimensions are already within the padding, disregards that parameter. Because the padding is on the inside of the container, the other two images are resized further to account for the extra 10 pixels of space on each side.

Normalizing Multiple Image Formats

The fillmax fit mode is great for normalizing collections of differently-sized images to a container, as we’ve done above. One case where this is especially helpful is a set of images that are also in different image formats, such as a collection of logos that have been gathered from many sources. Here’s a sample set of logos, one each in PDF, PNG, and JPG formats.

To fit these to the same container we use above, we’ll start by applying the same parameters:

/logos.pdf?w=200&h=200&page=1&fit=fillmax&fill=solid&fill-color=1000&pad=10
/farm-logo.png?w=200&h=200&fit=fillmax&fill=solid&fill-color=1000&pad=10
/farm-logo.jpg?w=200&h=200&fit=fillmax&fill=solid&fill-color=1000&pad=10

We’ll need to do a little tweaking this time, because the JPEG logo has a white, non-transparent background. The bg parameter only applies a background color to transparent areas of the image, so if the image background isn’t fully transparent (as with a JPEG), you’ll want to match its color. Alternately, you could preprocess your images to make their backgrounds transparent.

The JPEG image is also smaller than the other images (150 pixels) and doesn’t fill out to the edge of the padding, so we’ll increase the padding to scale the other two images to match and change the background to white:

/logos.pdf?w=200&h=200&page=1&fit=fillmax&fill=solid&fill-color=fff&pad=25
/farm-logo.png?w=200&h=200&fit=fillmax&fill=solid&fill-color=fff&pad=25
/farm-logo.jpg?w=200&h=200&fit=fillmax&fill=solid&fill-color=fff&pad=25

Now we have a normalized set of logos for a consistent look and feel. Managing disparate image sets can be a headache, but with fit=fillmax, you have another tool in the box to ensure that every image is sharp and fits your design.


Notes

For more details on fit=fillmax, see our API documentation.

Keeping logo sets and other branding assets as vector graphics in PDF (as in the example above) is a great way ensure that you can always serve the size you need with full transparency. Read our Managing Brand Assets from PDFs tutorial for more information about setting up and serving images from PDFs.