How to resize a picture to the correct size

I worked recently on a site using a WordPress theme with specific image sizes.

Each post or page could have a featured image above the content. The featured image size varies from theme to theme. For this theme the optimal size was 960 x 250 px, a letterbox shape.

If another image was supplied, it would be sized to fit these particular dimensions. Sometimes that didn’t produce the desired results!

I’m going to explain:

why this happened
how to make the best choice of image, and
how you can resize a picture to a specific size.

What happens if you add an image that is a different size from the recommended one?

Depending on how close the image size and shape are to the size specified by the theme, one of a few things could happen:

The picture is shown with no discernable difference from the original.
The picture is cropped with some desirable parts of the image missing.
The picture is stretched and/or pixellated.

Here are some examples.

(Note that with all these images, the page title sits across the image. Also, the breadcrumbs sit at the bottom part. These are features of the theme, and something else to be taken into account.)

1. Similar image size and shape

The image is of a fern and sunrise. Here’s the original:

This image is 1280 x 617 px naturally.

Here’s what it looks like inserted as the featured image in the theme:

There is some cropping, but the photo is not substantially different.

2. Square shaped photo cropped as a rectangle

This photo is of a palm tree with a swing, and is more square to begin with. Natvely it’s 1024 x 1005 px.

When this photo is used as a featured image, it’s automatically cropped in the middle. The details of the swimmer and the swing seat are cropped out:

3. Smaller image dimensions to begin with

This is an image of a computer virus which is less than half the width of the specified size, but closer to it in shape. It’s 400 x 300 px.

This is what the featured image looks like using this image:

Because the image was smaller to begin with, it is stretched and pixellating (look closely at the keyboard).

This image of a businesswoman and baby is smaller and a different shape – it’s 268 x 400px.

As a featured image, this is pretty disastrous. The cropping cuts off the faces, the picture is stretched and again we can see pixellation. Not good!

So, to avoid these problems, we need to know how to resize a picture to the correct size. That means:

cropping if necessary
resizing to the right dimensions

Read my post on optimizing images to see why it’s important to make your images the correct size.

Choosing the optimal shape for your image

As we’ve seen, some pictures are not the right size and shape to make a good featured image of 960 x 250 px.

If the image is smaller than these dimensions, it will be stretched out and look blocky.

If the image shape is portrait or square, it will not crop well.

For this particular size, the best pictures to choose are going to be rectangular and landscape-style. It’s also best that they be at least 960px in width.

Remember that we can easily make a larger image smaller, but not the reverse.

How to resize a picture using Fotor’s resize and crop tools

Fotoris a photo editing website that also has iOS and Android apps.

To use it, go to Fotor and click the Start Now button by the present image.

Then click Edit in the top menu, then Open to begin photo editing.

I recommend that you create an account as it entitles you to some extra benefits, but it’s not essential.

I’ve highlighted the main controls I used in the image below. The Save icon is in the same row as the Open button.

I selected some images to edit to show the tools and how to select the best images.

Here is a photo of a family from a stock photo site – you can view the original here:

Family in a park

There’s a choice of photo sizes to download.

I downloaded the 1280 px width photo to work with, since that was the closest to the 960 px width needed.

Another reason for this is that Fotor will not allow you to resize a smaller image larger. If you try to do this, you’ll get a warning message.

Increasing the size of a smaller image shows a warning message — The original image was 400 x 400 px. If I try to increase the size to 960px, I can’t make it that large. It’s instead resized to a 96 px width!

So if you are using a stock image, make sure you download one of the same or a larger size than you need. If you can’t do that, look for another image.

If you make a mistake in your editing, use the Undo tool to reverse it. The Undo and Redo buttons only appear when you’ve made an edit.

The Crop tool

If you open your image and go straight to the Crop tool, Fotor automatically generates a crop area to use. You can override this by entering the values for the crop in the boxes – 960 x 250 px. The Keep Proportions box should not be checked here.

This is what the crop area of that size looks like (the crop area can be dragged with the mouse when you see the quadruple-headed arrow):

Clearly the kids’ heads are going to be cut out in this crop, which is an issue.

The Resize tool

One trick is to resize the photo first, then crop. This means that more detail will be kept in.

To do that, click on the Resize button. Make sure that the little padlock between the numbers is locked. This keeps the photograph in proportion. Otherwise, it will be distorted when you change the values.

Enter 960 in the first box as the width. You don’t need to enter a height, as it’s calculated for you.

The new size is shown under the photo – 960 x 635 px.

Then go back to the Crop tool and re-enter the 960 and 250 values.

The crop looks a bit better, but still cuts one of the heads off. So this may not have been the best photo to pick.

When you’re happy with a crop, you would click the Apply button to apply the changes.

Saving

To save an image, click save button (it looks like a floppy disk). You’ll get a Save dialog box pop up.

You should choose:

Save as .jpg
Save at Normal quality if it’s for the web. (If you were editing a photo for print you would choose the highest quality option).

Family photo, take #2

Here another photograph of a family:

Family against white background

And this is it after the resize and crop process as shown above:

There’s still a cropping issue with the dad’s head, but this is more effective at that image size.

As a featured image, we can see that if the page title is too long, it obscures the daughter’s face.

So photo composition is something you have to consider when sizing an image in a letterbox style such as this. A single row of people in a straight line is better than a group at different height levels. Legs and feet will not be shown!

Resizing a landscape photo

Similar considerations apply to landscape photos – you need to consider what will be cropped out.

An image such as the one below crops well as the tree and detail of the hill is kept in.

Before:

After:

How to resize a picture from a camera

Stock photos are great, but you will also likely use your own photos, and they might not be professionally done. What then?

Here is a holiday snap. You’ll notice that it’s in portrait mode, and I told you to use landscape… 😉

In this case it’s okay, as the pixel dimensions of the original are sufficiently large that I can crop it to the featured image size without mishap – 1936 x 2592 px.

After using the Rotate tool to turn the photo 90 degrees to the right, I decided to draw a freeform crop highlighting the cat and cutting out the building on the left. I zoomed in by dragging the bar of the Zoom tool (highlighted).

The size of this crop is a bit larger than I need – 1364 x 726 px.

I then resized the photo to a 96o px width, then recropped to exactly 960 x 250 px.

And here’s the final result:

You can follow this method if there’s a detail you want to crop out in your photograph, such as unwanted people, litter bins or street signs.

Also, check out Fotor’s other tools, such as the Color tool. Here I ramped up the Temperature to 41 for an Instagram-like look:

Word Clouds of a particular size?

One featured image on the site used a word cloud. There are various online tools that create word clouds. I haven’t managed to find one that allows you to choose the size of the generated image.

The best way to do it may be to take a screenshot of the word cloud and then crop or resize it.

If you do find a generator which lets you input a size for the final image, let me know!

How to resize a picture to the correct size