Difference between Cropping, Scaling, Resizing & Changing Aspect Ration of an Image?

Resizing and scaling as synonymous

Resizing is an intrinsic change in the size of the image. Changing an image size from 1000px to 500px is resizing.

If you change the size from 100% to 50%, or 2:1 is scaling… which is the same as before.

Resizing is normally performed on an image manipulation program, like Gimp or Photoshop.

This resizing affects not only the real size of the image but also potentially its weight.

But not always

But scaling could also mean that it is only rendered as scaled. For example, an image of 3000px height could not fit on your screen, and it is rendered full screen at only 1000px height. But the real dimensions of your image have not changed at all. It is only displayed that way.

This is the case on images when you define its size on a Stylesheet for a web page. They are displayed of a certain size regardless of the real pixel size of the image.

You can define

img src=”photo.jpg” style=”width: 50%”

The image will be rendered at 50% (scaled) the size of the photo in pixels. But the photo will retain its original pixels.

When you use the scroll on this webpage to zoom in and out you are scaling, you are not resizing.

---

Aspect ratio

Is the relationship between width and height.

There could be two options. The aspect ration deforming an image, squishing and squashing it or leaving the internal proportions of the elements of the image alone.

One square image has an aspect ratio of 1:1

Here is an image with an aspect ratio of 2:1 (width first, height second)

But we do not like to use decimals here, so we do not have an aspect ratio of 1.5:1, instead we multiply them by 2 and get 3:2

A FullHD wallpaper has an aspect ratio of 16:9. A cellphone in vertical position 9:16

Note that aspect ratio does not care about the dimensions of the image.
One image can have 100x100px and another have 500x500px. Both have the same aspect ratio of 1:1.

---

There could be some cases where you are referring to the internal aspect ratio of the image.

In this case, the image is squished. 2:1

In some file formats, especially video the aspect ratio is saved in the image so it can be de-squished after. (Note the elongated rectangular pixels. (I exaggerated them)

Cropping

It is just to cut the outer portions of an image. But you can do it right or wrong.

Here is the source image we need to cut to an aspect ratio of 1:1 (square)

Nop… You are doing it wrong…

When you manually choose the framing, you are not only cropping, but also… reframing.

CSS

CSS provides you with some tools that can potentially affect the image in several ways. Some examples here.

img {width: 100%;}

This will scale the image (if it’s natural size does not fit already) to fit a given space, for example, your full window.

img {width: 100%; height: 100%;}

This will potentially deform your image, because it will force your image to be squished to your screen regardless of the original proportion of it, therefore altering the aspect ratio.

div {width: 100px; height: 100px; overflow: hidden;}

div>img {width: 200px; height: 200px;}

This will crop the image inside the div… well, only how it is displayed.

There is a lot of room to play and combine. But try to never distort an image… that looks really unprofessional.

Original image; https://cdn.pixabay.com/photo/2016/03/23/04/01/beautiful-1274056_1280.jpg