This article will explain how you go about resizing images in WordPress. The size and ratio of your images for your website is super important if you want the layout looking sharp. I’ll go through my whole process in Photoshop, how you can do it in WordPress and what the difference is.

Photos from an iPhone

Let’s look at a photograph straight from your phone. When we buy our phones we check out the resolution of the photographs it will take. My iPhone images are 12Megapixels, this comes straight from the phone at 4000 pixels wide and 3000 pixels high. This resolution is much more than we need for a website, it’s about 3Megabites in size and that takes ages to load when someone clicks on the website.

Because the photos are too large, I resize them to 1200 pixels wide and the height can either stay the same, or, if the photo is for a ‘featured image’ I make it 600 high. I’ll show you how to do this.

Resizing images in Photoshop

Open the image. Hold CTRL and ALT down, and press I. This will give you the option to enter a desired size of your image. As the width and height are locked in ratio, you can change the width to 1200 whilst the height will be amended automatically.

If you want to truncate the height but keep the width the same we need to use another function.

Click on the padlock on the ‘background’ layer to unlock it. Hold CTRL and ALT down again and press C. This will allow you to change the canvas size. As the ‘relative’ button is not selected by default, you can change the height now to 600 without it affecting the width.

The image is now 1200w x 600h.

Because we unlocked the background (the actual image you opened) earlier, you can now move the image around to position it, and frame it, inside the canvas you resized.

There should be an outline around the original image. If not, then hold shift and press V. This takes you into the ‘move’ tool. You can now move the image around to position it correctly inside your canvas.

Now, the best thing about doing this in Photoshop is that you can save it compressed for web, reduce the size massively (so it loads quickly) and it should still look good online. Its a bit trickier to edit in WordPress. If the quality of your photo was crap to start with, don’t blame me.

Sending images through social media like Messenger, downloading them from Facebook or a taking a screenshot will give you low-resolution images. These are no good for featured images as they will look pixelated. They may be fine for the odd image in small side-box in a post.

Save your images for web by holding down CTRL, ALT and Shift, then pressing S. Make sure that jpeg is selected and increase or decrease the Quality to make the size of the image. I go for less than 200K so the image loads quickly but still looks fine in a featured image (featured images are the largest images on the website).

This is the process I go through when I ‘optimise’ all of my images for the web. I then geotag them and add metatags. See Optimised Cover Photos for more.

To upload this image to your Media directory in WordPress, navigate to the directory, then drag the photo over from the folder you saved it in. You can, at this point add an alt tag, and other tags. The photo is ready to use in your website.

Photoshop

You CAN change the size of your image in WordPress however.

Scaling an Image

When you’ve uploaded a photo straight from it’s source, let’s say its a 4000×3000 pixel photo from your phone or a 6000×4000 pixel from your Nikon, you can scale it down in WordPress.

Open the image and select ‘Edit Image’. Simply enter the 1200 pixel width into the first box near the Scale button. The height should change automatically. If you press the Scale button now the image size will change AND be saved.

You can now crop your image.

Resizing Images in WordPress

When you have an image already saved in your media directory in your WordPress website, you can still resize it.

Open up your media and select the photo. There will either be a button or some coloured text ‘Edit Image’, depending on how you open up the Media directory. Select this and open up the image editor.

To crop an image, you must do things in a certain sequence. Maybe WordPress should have tips on this page but you figure it out eventually.

Firstly, tell WordPress that you want to change all versions of the image by selecting the radio button ‘All Images’ then ‘Crop’ on the left-hand side.

I’m cropping this image to the ratio 2:1, the equivalent to 1200×600 for a featured image.

Enter 2 and 1 in the Aspect Ratio boxes.

The dashed lines around the image should change now to the 2:1 ratio. You can move the selection up or down to frame your new, smaller image.

Then click on Crop again and the Save option should become active. Save it.

Cropping an Image

You can also simply crop an image in WordPress by resizing the dashed lines as you would do in any app. Remember to click the Crop button to get the option to save the image.

After Resizing Images in WordPress

Maybe it’s my theme or something but when I use an image in a post, then try to crop it, the image doesn’t change in the post. Whatever the problem is, I can copy the URL for the image from the Attachment Details bar on the right-hand side when I have it selected in the Media directory.

Copying the URL, I can place it in the Image URL box and the image changes. This is shown when you select ‘replace’ on the photo in the post.

Fiddling around in WordPress can be a pain in the neck sometimes but it’s worth the payoff you get with page speed, etc. Resizing in Photoshop beforehand will be easier in this respect. Any problems, just drop me a line.

I can do all this for you

Optimised Cover Photos

This package includes 10 images, optimised for the web, resized, compressed, tagged, geotagged, branded and sized for your website plus 4 social sites.