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.
You might also like: 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
Hint: 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.
2. Scroll down and click on the Edit Image button
Hint: 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.
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.
Hint: 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.
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.
For additional helpful tips and advice, you can receive more articles like these straight into your inbox by subscribing to our news.