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:
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.
The height and width of the image, generally given in terms of pixels.
Examples: 800 x 600, 200 x 100; 150 x 150
How big the file is in KB, MB, GB. This is often confused with dimensions.
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.