How to Resize Images Without Losing Quality

Resizing images before uploading them to your WordPress website is incredibly important – especially if you have an image-intensive website. Large image files hosted on your website’s server can potentially slow down your site which is bad for usabililty, leading to an increase in bounce rates and possibly worse rankings as Google favors sites with good  engagement.

There are a number of ways you can go about resizing images in WordPress. And in this post, we’ll take a look at two popular methods – using the Media Library and using plugins – to resize images without losing quality. We’ll also discuss when it’s best to use each method and run the rule over some of the best image resizing plugins.

A Note on Image Optimization

Resizing the images you add to your WordPress website is important for two reasons – to make sure your site doesn’t slow down and to save server space. If you haven’t already taken any steps to optimize your website for performance then image compression is a good start.

If you get high quality images from stock photography sites or work with photos taken from your camera then chances are you have a bunch of images with huge dimensions at hand. And while these large image files may be ideal for print, smaller dimension images work better on the web.

Most WordPress themes are optimized for a specific set of image sizes. Determining which image sizes are called for in your active theme and resizing your uploaded images accordingly is a great way to get started with image optimization. Of course, it’s equally important that you resize your images without compromising image quality.

With this in mind, in the next section, we’ll show you three different methods to resize images for WordPress without losing quality.

How to Resize Images in WordPress

Resizing images is pretty simple and most image editing tools will give you the bare minimum functionality to resize images to your preferred proportions. When you’re resizing images for your WordPress website then you have a few more options at your disposal. Let’s step through them one at a time.

Method 1: Resize Before Uploading

One of the simplest ways to go about optimizing images for your website is to resize them before uploading. The major benefit of following this method is that you’re able to use a desktop image editing tool (such as Adobe Photoshop or GIMP) or an online tool (such as PicMonkey, PicResize or Image Resizer) which you might already be familiar with.

Resizing images before uploading them is ideal for website owners who don’t upload a lot of images regularly. It’s easier to resize a fewer number of image manually before uploading them rather than the other way around.

Method 2: Using the Media Library

If you have a number of people contributing content to your website then it may be a better idea to use WordPress’ built-in Media Library to resize images. It standardizes the process of resizing images and ensures that you don’t lose quality. In addition to this, you’re able to resize images after you upload them to your Media Library.

Log in to your WordPress website and navigate to the post (or page) where you want to add an image. Next, click on the Add Media button to insert the image from the Media Library. Find the image you want to insert into your post (or page) and click on it.

You should be able to see the Attachment Details section in the top-right column of the pop-up screen. From there, click on the Edit Image link.

In the following Edit Image screen, you should see two different image resizing options – scale image and image crop. The Scale Image section allows you to alter the images dimensions either by scaling up or scaling down. It’s important to note that scaling up might cause a loss in image quality. To use this tool, all you have to do is enter either the width or height (in pixels) you’d like to resize the image to and click the Scale button.

In addition to this, the Media Library also lets you crop images from within WordPress. To do this, start out by clicking the image and dragging it to make your selection. For finer control over how your image is cropped, you can mess around with the aspect ratio and selection settings under the Image Crop section.

Method 3: Using a Plugin

If you have an image-intensive website (such as a photography portfolio or a news site) and find yourself uploading images regularly then you might be better off automating the entire image resizing process. And the easiest way to do this is by installing a plugin that will resize your image files automatically when you upload them.

Imsanity

With over 200,000 active installs, Imsanity is one of the most popular image resizing plugins for WordPress websites. After you’ve installed the plugin you can configure its maximum width, maximum height, and image quality settings. Whenever a user upload an image that is larger than the pre-set values, the Imsanity plugin will automatically resize it to the specified dimensions and overwrite the original image file. Best of all, if you already have a bunch on images uploaded to your website that haven’t been resized, Imsanity will bulk resize them for you!

Key Features:

• Allows users to specify the preferred dimensions and image quality.
• Automatically scales and resizes images that are larger than the specified dimensions.
• Bulk resizes any existing images.

Resize Image After Upload

The Resize Image After Upload plugin automatically resizes images for you as you upload them based on pre-defined maximum width and maximum height settings. The standout feature on offer with this plugin is that it can detect if a PNG image is missing a transparency layer and covert it to a JPEG for optimal compression.

Key Features:

• Allows users to define the resized image’s maximum width and maximum height.
• Automatically converts PNGs to JPEGs if the transparency layer is missing.
• Allows users to enable forced re-compression for JPEG images.

Conclusion

Resizing images is an easy-to-implement performance optimization strategy that will help you make sure your site loads at blazing fast speeds and that your site’s images don’t take up too much server space. We covered some of the best tools and plugins to help you resize images without losing quality and, hopefully, you’re in a good position now to take things further.

Let’s quickly recap the different ways you can go about resizing your images:

1. Resize your images before uploading them to your WordPress website.
2. After you’ve uploaded the images to your site, resize them using the built-in Media Library.
3. If you’d like to resize images in bulk, use a plugin like Imsanity or Resize Image After Upload.

Do you have any questions about how to resize images without losing quality? Let us know by commenting below!