Blog

Image Resizing: What's the Difference Between Fit and Fill?

July 17, 2020 · by Adrian Willis ·

Delivering rich online experiences is a requirement for businesses today. But with users accessing your images and videos on a variety of different devices and browsers, accounting for all of the possible display variations is challenging. Automatic resizing is one of the most useful capabilities of the Akamai Image and Video Manager. Read on to learn how to properly resize images by understanding the difference between the Fit and Fill options.

Typically, you are going to reduce the size of an image to a box of specified dimensions such as 240 pixels in width by 320 pixels in height. The resulting image fits perfectly as long as your original image has the same aspect ratio as the output box — in this case 3:4 (240 divided by 320). What if it doesn’t? Depending on the use case, there are a couple of options to keep the aspect ratio of the original image intact:

  • Resize with Fit
  • Resize with Fill

While both options resize to the dimensions of the output box, the result varies. With the Fit option, the resize function reduces the file proportionally until the entire image is inside the output box. In this case, there will be empty space (shown in white) within the output box (green outline), as shown below:

fit

With the Fill option, the resize function reduces the image proportionally until it fills the entire output box. In this case, the resized image will be larger than the output box (green outline), as shown below, showing only the portion of the picture that fits in the box:

fill

In summary, select Fit to keep the entire image intact within the output box — the resulting image is the largest possible contained within the specified dimensions. Select Fill to size the image so it completely fills the output box — the resulting image is the smallest possible that is at least as large as both the height and width specified.

To help you evaluate which resize option is best for your situation, Akamai Image and Video Manager provides a useful preview tool within the Policy Manager that shows the dimensions above the image. In this first example, we use this tool to resize an image 1024 x 768 pixels to 800 x 500 pixels with aspect set to Fit:

fit

You can see the resulting image size is 677 x 500 pixels. The final resize dimensions were set to the specified width and height, and then one dimension was reduced in order to match the aspect ratio of the input image. The output image "fits" in the box specified by the provided width and height.

In the second example, we use the preview tool to resize the same image to 800 x 500 pixels with aspect set to Fill:

fill

You can see the resulting image size is 800 x 591 pixels. The final resize dimensions were set to the specified width and height and then one dimension was increased in order to match the aspect ratio of the input image. The output image "fills" the box specified by the provided width and height.

For more information about adding artistic transformations to images, see the Image and Video Manager documentation. You can also check out the Image and Video Manager Cookbook, a collection of popular visual optimizations to help you perform common tasks in Image and Video Manager. Have fun browsing to see what Image and Video Manager has to offer!