How to Properly Compress and Resize Images for WordPress

Getting your images right can be tricky when it comes to improving the performance of your WordPress website. So much so that we’ve had a few members ask our support team about how to properly compress and resize images.

In particular, we’ve had a few questions about an image-related recommendation from our Hummingbird performance plugin:

If you’ve seen this recommendation, the solution is to manually resize your images either by cropping them to the correct size or properly registering your theme’s image sizes.

Sounds easy, right? Well, not exactly, as some members have found. So in this post, I’ll explain this particular Hummingbird recommendation, why it occurs, and how you can manually resize your images in your admin dashboard and in your WordPress theme.

Why is Hummingbird Telling Me to Compress and Resize Images?

This suggestion means that you are using an uploaded image in your WordPress site where the size is larger than what’s called for in your theme. This happens because there’s an error in the theme you’re using and larger images aren’t being automatically cropped to the intended dimensions. Instead, they are resized to fit.

This means that when a visitor loads the page with the oversized image in their browser, the full size of the image is loaded, then it’s resized to fit the dimensions specified in your theme on the fly with CSS or HTML.

This extra and sudden step of resizing larger images takes additional server requests and resources to load it on a page. The result is a slower page speed, a lower score in Hummingbird, and the recommendation to compress and resize the affected image.

For example, suppose your theme has featured images enabled at 600 px by 350 px and you uploaded and inserted one into a post, but the image size is actually 1200 px by 700 px. The actual image size is larger than what your theme has defined, but there’s an error in your theme’s code so the larger image isn’t automatically cropped as intended.

A browser would load the 1200 px by 700 px image, then resize it to fit the 600 px by 350 px defined size in your theme resulting in a page that’s slow to load.

While WP Smush Pro can automatically resolve the recommendation to compress an image, this isn’t the case with the “compress and resize” suggestion. For the latter, you need to manually make the change and there are a few ways you can do it:

• Edit your theme’s functions.php and template files
• Crop the image to the intended size through the Media Library
• Adjust the media settings

Below is more detail on how to manually resize your images with these methods.

Registering Your Theme’s Image Sizes

To fix this issue in your theme, you need to make sure images are properly registered. For details on how to do this, check out Adding Custom Images Sizes to the WordPress Media Library.

If you would rather not touch code, you can notify your theme’s author and ask them to make the necessary changes for you. Once the fix is complete, you can update your theme to push the changes to your site.

Scaling Your Images in WordPress

While you wait for the theme developer to fix this issue, you can try the other manual methods of resizing your images below.

Crop Images in the Media Library

To manually crop an image, go to Media > Library and click on the image you want to crop. Then, click the Edit Image button to open the editing interface.

Scale or crop the image as needed using the corresponding options on the right. Keep in mind that if you scale the image to match the width you need, the height may be shorter or longer than the defined size in your theme depending on the dimensions of the original image.

If you choose to scale your image, it remains in proper proportion relative to the original image. On the other hand, if you decide to crop your image, it may not necessarily end up being edited proportionately depending on the dimensions you choose.

You can either scale your image by typing in your desired width and height, then clicking the Scale button or if you prefer to crop your image, you can do so by clicking and dragging your mouse over the image and selecting the area you want visible. Then, release your mouse click to reveal your selection.

You can click and drag the squares on the edges and sides to make any necessary adjustments to the width and height or you can enter the exact dimensions you want into the Selection field on the right.

You also have the option to enter your desired aspect ratio for the image:

You can also click and drag your selected area to move it to the exact area you want visible.

If you cropped your image by selecting an area of it with your mouse, click the crop icon above your image.

Next, choose which pre-defined image size where you want your changes to apply under Thumbnail Settings. This option can be helpful if you want to edit the image while preserving the thumbnail.

For example, you may want to have a square thumbnail that displays just a section of the image.

When you’re done making your changes, click the Save button below your image.

You can also manually resize your images while you’re editing a post or page by clicking on the Add Media button above the editor.

Then, click the Media Library tab and choose one of the listed images. Next, click the Edit Image link to the right to access the same editing interface mentioned above.

Adjusting the Media Settings

If the images you need to manually resize are the default sizes WordPress creates, then you can try editing them via your admin dashboard’s Media Settings.

The default WordPress image sizes are thumbnail, medium, large and full-size, though, full-size refers to the original dimensions of uploaded images and can’t be changed in the Media Settings. To edit the original image, refer to the details above.

To manually resize the default image sizes, go to Settings > Media and enter the necessary width and height you need for the applicable image size you want to change in the corresponding fields.

If you need to change the thumbnail size, you can also optionally keep the checkbox selected to crop the thumbnail to the exact dimensions you specify. Normally, thumbnails are proportionally edited automatically.

When you’re done, click Save Changes at the bottom of the page.

Keep in mind that these sizes can be used in multiple places in your theme so you may end up editing images that you don’t want resized.

Once you have saved your changes, install and activate the Regenerate Thumbnails plugin to resize the images you have previously uploaded to adhere to the new dimensions you just set.

That’s it. You’re done manually resizing your images!

Wrapping Up

If Hummingbird has given you an image optimization suggestion to compress and resize your images, you now know how to make those necessary changes since WP Smush Pro only automates and resolves the compressing suggestion.

For more detail on adding custom image sizes with code in your theme, check out the Add Image Size Code Reference page in the WordPress Codex

(By Niniane)