July 15, 2017

Should I crop image before resizing it for blog and social media, or the other way round?

For some reason, all social websites want us to post images of a particular size, which is not common between any two of them. I don't know if they want to test our knowledge or get fun out of our discomfort. Anyway, let's leave it to them. 

The fact, seriously, is that you need to resize photos taken from digital camera or mobile phone, so as to suit them to different social media accounts or other websites. Sometimes you need photos in a particular dimension or size for other purposes.

A few quick theoretical points before we discuss how to do things the right way.

Talking of photo dimensions and image size


Though photos and drawings are always rectangular, the relative measurements of width and height can lead to a variety of shapes, like a very tall but narrow one, a very wide one, a square, and so on. (By the way, with some exceptions, even round or oval pictures have corresponding rectangular dimensions.)

Talking of size, photos can be very large or small - the sizes are usually measured in cm x cm / inch x inch / pixel x pixel multiplications. Pixels,  which are the smallest pieces of pictures, something like tiny dots, are often used to describe a photo's size: A picture of 1000 px height and 1000 px width will be composed of 1000 x 1000= 1 million pixels and thus will be of 1mp or 1 megapixel size. A 5mp camera picture will have around 2580x2048 pixels if it the camera takes pictures in 5:4 (or 5 wide by 4 tall) ratio.

What is image cropping and how it differs from resizing 


When you cut portions of an image, it is called cropping. On the other hand, you can resize the image into a bigger or smaller size - that is resizing.

When you crop an image, its quality remains the same. Cropping is done to make the picture more compact, better framed and smaller. When you resize a photo, its quality suffers because the software either adds more pixels to it or removes pixels from it here and there.

correct-picture-editing

Look at the image above and examine photos 1,2 and 3 inside it.

The first one is the original photo of sunset over sea. The photographer perhaps wanted to show the play of colors in a sky captured wide. The layered clouds and vastness of sky give a feel of calm though it is full of 'warm' colors, isn't it? 

In the second pic, I have cropped the sides of the picture. Suddenly the sun is in focus, and you get the feel of a hot sun which has colored the clouds orange. You can crop pictures to remove extra background so that the main object comes in focus.

In the third one, I have resized the original picture. It has the same elements as the first one, but it is now too small to show details of clouds. If I made it smaller, you'd miss the layering of clouds. If the sea had playful waves, they would be completely lost.

Now have a look at pics 5 to 8. The challenge is to fit the picture on top to the rectangle below. If I crop  the pic from all sides, leaving the face so that it fits into the rectangle (pic 6), it removes all the surroundings. The picture could have been shot inside a room or anywhere else. The face has also not come full.

Ok, lets squeeze the pic into the given space by resizing it. Since the ratio of width x height of the rectangle is not the same as of the original pic, the face has got distorted (pic 7).

What I did to achieve pic 8 is that I first removed some surroundings by cropping it from two sides. (There is nothing to remove from top and I do not want to remove the scarf around the child's neck as it frames her face so well.) When I was sure that the pic is in the same ratio as the orange rectangle, but slightly bigger, I resized it to perfectly match the rectangle.

So, my advice for reducing the size of picture is:
  1. Crop the pic as much as you can to bring it to the same ratio as the required size. Remove only the things that do not add good value to the picture.
  2. Resize it without changing the ratios. 

Look at pic 4. Suppose you have to crop the given picture to fit into the smallest rectangle. By looking at this pic, you know that it has more width than height when compared to the target size. So the best way to fit it into the smallest rectangle is to first crop it to the middle rectangle's size and then resize it. 

Now let's see how the sequence changes when we need to enlarge a picture. If you are to fit the picture in pic 4 into the biggest rectangle, you will again need to bring it to the same ratio. So, you have two options: (i) Crop it to first make it to middle rectangle size and then resize it to the big rectangle size or (ii) resize it to cover the biggest rectangle and then crop the extra width. In the first option, once you have cropped the pic, you don't have a choice to adjust it later. In the second option, you will have a big pic, which you can adjust left or right before cropping the width.

Let me close the discussion with what we learned and something extra:
  • Resize pictures in the same ratio as the original picture, unless you deliberately want some distortion. 
  • If you want to check ratios of pictures but pixels confuse you, pick up a scale and place it on the computer screen and measure sizes. The scale measurement of screen has no other value, but it will give you the ratios quickly.  
  • Too much resizing reduces the quality of picture. If you need to resize too much, do it in steps, about 20% at a time. 
  • Generally speaking, crop and then resize when reducing size; resize and then crop when increasing size. 
  • Most free software and apps are good enough for cropping and resizing but every time you edit and save the picture, its quality is likely to go down. Only the professional software (Photoshop, free Gimp) can do lossless editing.  
Like to see our earlier posts relating to image quality, putting images on blogs, social media image sizes, infographics, starting a video blog, etc? Image articles on ITB

Like it and wish to tweet it to followers?  

No comments:

Post a Comment