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.
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.
imgix offers a slew of fit modes, and at first glance,
fit=max might seem to do the trick for these constraints. However, we realized (based on customer feedback) that neither one quite did:
fit=fillresizes 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=maxresizes 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.
maxto provide the background color fill while maintaining the image’s integrity and not resizing beyond its original dimensions:
fitparameter has to be set to
fillparameter set to
fill-colorparameter has to be set to add the background fill color. If you want to use
fit=fillmaxwithout a color, set the fill-color to transparent (
hparameters 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
fill-color=1000 parameters to all three images to fit them to it. The background color is
1000, or black at 10% opacity:
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 (
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
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:
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:
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.
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.