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:
- Resize your images before uploading them to your WordPress website.
- After youβve uploaded the images to your site, resize them using the built-in Media Library.
- 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!
First, I resized in WordPress Media Library and I noticed a reduction in quality – the photo wasn’t as crystal clear. Then I tried by resizing in Picresize first and then uploaded to Media Library and the quality was much better. So I recommend to resize before uploading – there is definitely a difference.