How to Crop and Resize Images in WordPress?

We have more than 20K images on this website. Generally, we use Snagit for image capturing and editing before uploading through WordPress post editor. However, sometimes it is necessary to edit the images within the editor. For example, if you want to trim off the edges or zoom in or change the size to fit the post layout. You can use multiple ways to crop and resize images in WordPress and we will explain some of the easy options in this article.

Resizing Images in WordPress

Resizing indicates changing the dimensions of images. However, there are different ways to change the dimensions by keeping the aspect ratio or by cropping the unnecessary portion.

• Change height and width proportionately
• Making the image to rounder corner by cutting the corners off
• Zoom in to focus on the image’s center part
• Change the aspect ratio or rotate the image to change its height and width.
• Scale to any specific dimensions or aspect ratio

We do not see any options in WordPress for resizing images in bulk. However, there are two ways you can resize individual images in WordPress – one is from the Gutenberg post editor and other is from Media Library. Let us explain both options in detail in the following sections.

1. Resizing Images in Gutenberg Editor

When you are creating or editing a post, insert an image block and upload an image. You can resize using one of the following options.

1.1. Using Block Settings

Click on the uploaded image and then click the three vertical dots icon showing on the toolbar. Select “Show more settings” to view image block’s setting in the right sidebar. If the option say, “Hide more settings”, then you should be already seeing the block’s settings in the sidebar.

You can use the following settings to resize the selected image:

• Styles – the default option will leave the image as it is while rounded option will convert your images with rounded corner.
• Image Size – select the registered image sizes available for your theme. You can select full size, medium or thumbnail size to show. Remember, the dimension for these options will be considered as per your settings under “Settings > Media” section.
• Image dimensions – choose one of the preset options like 25%, 50%, 75% (100% is your image’s size) or enter custom width/height for your image. You can preview the image with the new dimensions and reset if the size does not match the layout.

Below is how the image with rounded style and 50% resized will look like in the editor.

1.2. Cropping Image in Gutenberg Editor

When you click on the image, you can see a “Crop” icon appears in the toolbar that pops up. Though it says crop, it does not allow you to resize or crop like you can do in Photoshop, Snagit or any other image editor. It offers the following three options:

• Zoom – click the lens icon to view a slider to drag and zoom in the image. You can zoom in up to 300% using this option to focus any minute details to show from the image.

• Aspect Ratio – you have totally 9 predefined aspect ratios available 4 each for landscape and portrait and one for square size. Choose 16:9 or 2:3 or any size that you like for resizing your image.

• Rotate – use this option to rotate your images 90 degrees to flip horizontally or vertically.

Though you can use all these options to resize your images, we do not think zoom in, rotating or changing aspect ratio is called cropping in any part of the world. We do not know why WordPress guys give this misleading name for that icon and show the grid. Many users will think that they can drag the grid or select a portion to crop. However, it does not work like that in Gutenberg editor.

1.3. Dragging and Resizing

If you are comfortable with resizing image using the mouse, then simply click on the image. WordPress will show you a dragger on right, left and bottom sides of the image. Drag and resize image proportionately to its original size. Remember, the aspect ratio will not change if you resize in this way which means height and width will change proportionately and not independently.

This is the same way WordPress works with the old Classic Editor that you can only resize the image proportionately.

2. Resize Image from Media Library

This is a convenient way especially if you really want to crop the image. Go to “Media > Library” and select the image that you want to edit.

Similar to Gutenberg image block’s setting, you can use the following options from the sidebar.

• Scale Image – here you can see the original image dimensions along with an option to enter new height/width dimensions. After entering the new dimensions, click “Scale” button to resize your image.
• Thumbnail Settings – select the option to apply the changes to all sizes of the selected image, only for thumbnails or all sizes except thumbnail.

You have four more options for rotating left/right and flipping horizontally/vertically using the buttons available just above the image. Let us explain the crop option in more detail.

2.1. Cropping Image in Media Library

The “Image Crop” option allows you to crop by using the aspect ratio or selection dimensions.

• To crop the image, simply select the portion you want to crop on the image using mouse. The dimensions will be shown in the “Selection” section.
• If you want to fix the aspect ratio, first enter the ratio in “Aspect ratio” and then select the portion using mouse.

Once you fixed the selection, click on the “Crop” button.

WordPress will process as per your selection and show the cropped image as a result. Click on “Save” button to apply the changes or click “Undo” button to revert to original size.   

Final Words

As you can see there are multiple options in WordPress to crop and resize images. You can use old Classic Editor, Gutenberg block editor or edit the images from Media Library. The only confusion is the crop function in Gutenberg for which you can use the Media Library.