Phancybox Resizing and cropping images in WordPress

Resizing and cropping images in WordPress

We’ve already looked at how to reduce the file size of an image, but how do you change the actual width and height of an image? How do you use a rectangular image on your website, when the space available to you is square?

Like most things, it’s easy when you know how – here we’ll explore cropping images.

“Cropping refers to the removal of the outer parts of an image to improve framing, accentuate subject matter or change aspect ratio.” Wikipedia

So basically, we’ll chop off certain parts of the rectangle, so that you’re left with a square.

 Social Media image sizes cheat sheet for 2017

When preparing images for your website, you can either crop your images before uploading them to WordPress, or you can crop your images in WordPress itself. We’ll focus on the latter today.

Cropping images in WordPress

Always optimise your images before uploading them to WordPress, this contributes towards keeping your web pages loading faster.

1. Login to WordPress > Media > upload or locate the image you want to crop and select Edit.

Edit the WordPress image you want to Crop - New Zealand Web Company Phancybox

2. Scroll down and click on the Edit Image button

Always give your images descriptive names, and copy/paste the names into the Alternative Text or Alt Tag field to help Google understand the content of your page.

3. Now click and drag your mouse on the image, you’ll see the 4 guidelines appear (see the image below). You can click and drag on any of the little squares that you see along the side of the guidelines, to change the selected area that is going to be included in your image (when we’re done, everything outside of the guidelines will be removed from your cropped image). For example, in the picture below, the surfer on the far right will be excluded, or cropped from this image.

Click and drag your mouse on the image to initiate the WordPress image cropping tool

4.1 As you drag the guidelines into the correct position to change the selected area, you’ll notice the images new dimensions changing on the right hand side of the screen, under the Selection heading.

WordPress shows you the new image dimensions while you are selecting your cropping area - Phancybox Wanaka Web Design

If you’re not sure what the dimensions are meant to be, the easiest way is to find a page that already has an image the size you want it to be, and to then identify the image dimensions for you to copy.

4.2 When you know what your image dimensions should be, you can type them into the Selection box and the guidelines will adjust to the correct size automatically. You can then simply click inside the selected area and move the box so that it covers the area you want.

Move the selected area in WordPress for image cropping - New Zealand digital agency Phancybox

4.3 Alternatively if you’re not too fussed about the dimensions, but want to get rid of a certain part of the image, simply drag the corners of the guidelines across the image, until you have the correct area selected.

5. In our example, we want the image to be 710 x 710, and to include all of the surfers. Once you can see the correct selected area highlighted, with the correct dimensions, simply click on the Crop button (far left), and then Save.

Crop your image in WordPress - Phancybox New Zealand Digital Agency

For additional helpful tips and advice, you can receive more articles like these straight into your inbox by subscribing to our news.

 

Tip: If you found this useful, you can get our latest ideas delivered direct to your inbox, for free, right here.