5

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.

6

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

enter image description here

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

enter image description here

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

enter image description here

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

enter image description here

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)

enter image description here

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)

enter image description here

Nop... You are doing it wrong...

enter image description here

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

enter image description here

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

  • I'm a little confused as to why you've added info on CSS on the graphic design SE? – Summer Jun 25 '18 at 7:18
1

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.

enter image description here

  • When an image stretched automatically to fit the canvas/screen size, what is it: Resizing or Scaling??? – tsid145b Jun 25 '18 at 5:43
  • I would call that scaling, but note scaling can either be proportional or non-proportional. Stretching to fit something is likely non-proportional and can affect the aspect ratio of an image. – Lucian Jun 25 '18 at 5:46
  • What I misunderstood about both of 'em is that: Resizing means changing the size of image but keeping the aspect ratio (900x600 to 1800x1200 i.e. 3:2) and Scaling is to change the size of an image from anywhere (e.g. Manual stretching. 900x600 to 1200x600 i.e. 3:2 to 2:1)... Am I right??? – tsid145b Jun 25 '18 at 5:48
  • Scaling or resizing are the same thing. At least Photoshop will not make a distinction between these terms, however different software may use these terms differently. Then, when scaling (or resizing) the aspect ratio can be kept or not, and in Photoshop there is a checkbox called 'Constrain proportions' that will do just that. Tell us what software you are using? – Lucian Jun 25 '18 at 5:52
  • no software, I have to do it in website – tsid145b Jun 25 '18 at 5:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.