Aspect Ratio, Dimensions, and File Size

These terms are often used interchangeably, but they are unique elements of an image. Understanding how one affects the other can help you choose a good image for the space you are using and how to properly crop the image or reduce the file size while still keeping the image’s correct proportions.

Before we get started here are some helpful definitions:

Aspect Ratio
The proportional relationship between the height and width of a rectangle. Aspect ratio for shapes is represented by x:y, but the actual numbers do not matter as long as the ratio remains the same, just as with image aspect ratio. For example, a rectangle’s aspect ratio is the ratio of it’s long side in relation to its short side.

Dimensions
The height and width of the image, generally given in terms of pixels.
Examples: 800 x 600, 200 x 100; 150 x 150

File Size
How big the file is in KB, MB, GB. This is often confused with dimensions.

Resolution
Often web images are displayed best at 72 ppi (pixels per inch) or 144 ppi for digital and higher resolutions such as 300 ppi for printing.

Starting with this image which is 800 pixels (width) by 600 pixels (height) it has an aspect ratio of 4:3 and saved at 72 ppi (resolution), a file size of 760 KB

On our page we have a place for an image but it will only be 500 pixels wide and x pixels for the height to keep it proportional. By reducing the width to 500 and letting the height be proportionate, we get a height of 375 while our aspect ratio is still 4:3 and our file size is reduced to 341 KB

Now let’s pick a different place for our page that must have the image fit into a space that is 300 wide x 600 high. If we resize the image, it looks like this:

But it doesn’t look as good as the original because the aspect ratio changed. Instead of 4:3 it is now 1:2. So in this case cropping the image is the best option and choosing what portion of the full image we want to use.