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

Question

I am too confused in understanding different terms used with sizing of an image. What is the difference between:

1. Cropping an image
2. Resizing an image
3. Scaling an image
4. Changing Aspect-ratio of an image

Especially Resizing vs Scaling!!!

---

I am working on a website.

Answer 1

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

Answer 2

Cropping is when you remove part of the image and focus on a smaller section, see below.

Resizing and scaling are the same thing and this means keeping the entire image and making it smaller. For instance it may be 900x600 pixels and you scale it down (or resize it) proportionally to 800x533 pixels. Proportionally means both sides are being altered while scaling.

Changing the aspect ratio is also a resize, but only on a single axis. So you take your 900x600 pixels image and make it longer to 1200x600 pixels. This could damage some images, eg. a round circle will become an ellipsis. Stretching an image to fit something will usually change the aspect ratio, so stretching can actually deform an image.

Answer 3

Cropping refers to the removal of the outer part of an image to improve framing . Where as resizing means increase or decrease the size of an image.