In the following video, I’m going to show you how to scale and crop an image in WordPress. If you don’t have image editing software to resize an image, or you’re editing WordPress on the fly, this WordPress trick is for you.
Why would you need to scale and crop an image in WordPress?
Some reasons why you might want to scale and crop an image in WordPress, might be
- To remove an area of photo such as the foreground or background
- To show only a specific area of a photo – such as an individual person in the photo (or to crop someone out, say, when you have a photo-bomber)
- So the photo fits better on the page
- You may wish to convert a landscape photo to a portrait photo or vice versa
- You may need a square photo or some other dimensions
- Perhaps the original photo is too big and would use a lot of data or take too long to load
Scaling or cropping your image will reduce the file size, reducing data consumption when people view the page it’s on or when they click the thumbnail to view the original image.
As well as cropping and scaling your image, you can also flip or rotate it…which you may need to do if the image was taken on a mobile device or if you took a selfie and don’t want the mirror image of yourself or text showing backwards.
When you click on the above image, you’ll see that the original image has been scaled and cropped.
First, I am going to show you how to scale your image.
This operation only scales the original image – not the other image sizes – so it’s best to scale the image before cropping, rotating or flipping etc.
To edit the image, click on the image, click edit image icon, and underneath the image in the editor window, click the edit original button.
Simply type in the width or height dimension (for purposes of my video I gave it a little extra width as I wanted to crop the image afterwards).
Once you’ve entered your new dimension, click the scale button. The image will be saved at the new size.
When you enter the width or height dimension, the other dimension will change proportionately.
By the way you can only scale an image down – not up.
Now I’m going to show you how to crop a photo.
You can see that even though this image was scaled and cropped, the original size has been restored (the foreground is showing).
Select the area you wish to crop, drag the handles up & down, or across until the area you want cropped is within the crop marks.
If needed, you can define a specific aspect ratio, such as 1:1 for a square, or 6:4 (photo size), 16:9 (video size) etc.
To preserve the chosen aspect ratio, hold down the shift key while resizing your selection.
If you make a mistake or change your mind, you can click the cancel button, or the back button, or click anywhere in the image.
Now, you have a choice of applying the changes to “All image sizes”, Thumbnail only, or All sizes except thumbnail.
Once you’re happy with your crop, you can click the crop tool (which becomes active as soon as you start selecting your crop area) and then click the Save button. Once saved, click the update button to see the saved changes in your editor.
By the way, if you decide you don’t want to use the scaled or cropped image, you can restore the original image, although previously edited copies of the image will not be deleted.
As you can see from the two images here, the first one has maintained the changes made in the video, and the second has been restored to its original size/dimensions.
