How to Safely Reduce Existing WordPress Image File Sizes

Images play a significant role in web design. They add visual appeal, convey meaning, and engage readers. Unfortunately, they also take up space on your site and must be loaded into your visitor’s browser, which can slow page loading times. To optimize images for faster loading speeds, you must reduce their image file sizes and correctly size their dimensions.

Image file size refers to the amount of storage space an image occupies on a device or website server. This is determined by the resolution, file format, and compression used to save the image. Large image file sizes can slow down website loading times, negatively impacting user experience and search engine rankings. Therefore, reducing image file sizes without sacrificing image quality is crucial for website optimization.

There are several ways to reduce the existing image file size in WordPress without compromising image quality. In this article, I’ll show you how to safely optimize existing images using one plugin, Chrome, and Photoshop.

Key Concept – Image Dimensions Versus Image File Size

• Image dimensions are the width and height of an image expressed in pixels—1920×1080, for example.
• The image file size is the amount required for storing an image in megabytes (MB) or kilobytes (KB). 17.4KB, for example.

Choosing appropriate image dimensions for different screen sizes is one of the most critical factors in reducing existing WordPress image file size. Images uploaded to a website without consideration for their dimensions can prevent the website from loading slowly and create a poor user experience for visitors.

To effectively reduce the size of existing WordPress image files, choosing suitable image sizes for your website is essential. This means selecting image dimensions appropriate for the screen sizes of the devices on which visitors will view your site.

You can improve your website's loading time and overall performance by choosing appropriate image dimensions. When images are sized appropriately, they take up less space and use less bandwidth, speeding up the load times of your website pages.

Sending images larger than the screen they are viewed on is a waste of bandwidth and will only slow the website down. Instead, choose appropriate dimensions for your images to reduce their size. For instance, images with dimensions identical to the size of a user's device will load quickly and improve the overall experience of visiting your website.

To choose the appropriate image dimensions, consider the different screen sizes that visitors might use when accessing your website. You should use images that are wide enough to fit the space where they will be displayed but not so large that they will slow down your website.

Why Not Just Use a WordPress Image Plugin?

While relying solely on image optimization plugins or image compression plugins to resize and compress the images is easier and quicker, it rarely produces the fastest loading image. Therefore, I still recommend using image compression plugins, but only after the images are uploaded with optimal image dimensions and compressed or reduced in file size. This allows the plugin to perform better and reduce server load resulting in even faster loading pages.

Ideally, your website should never serve images larger than the version rendered on the user’s screen – serving images that are appropriately sized helps to improve page load time and improves SEO.

The maximum dimensions for your images are determined by your visitor’s screen resolution and your WordPress theme. According to Statcounter, the largest (and most common as of 7/20/2022,) screen resolution is 1920×1080.

For the purpose of forward compatibility, should you decide to change your WordPress theme in the future, you can safely size your images to a maximum width of 1920 pixels.

Better yet, you can size them according to the container they will occupy in your WordPress theme. For example, a background image will usually be 100% of the screen width, while a banner image or a hero image will often be somewhat less than 100%. Other inline images will be much smaller. If you are using Advanced Custom Fields (ACF), this will be especially important to be mindful of.

You will either need to have the specifications from your theme designer or developer or use the Chrome Developer Tools to inspect the image size as rendered to determine the maximum width (also the height if using ACF).

This option will be the most efficient. However, it also means that your images may be too small if, in the future, you should change your theme. Of course, if you keep the original images elsewhere, you can always adjust them for the new theme.

Regardless of your chosen sizing strategy, ALWAYS back up your original images!

Recommended Tools

Enable Media Replace plugin for WordPress
This plugin is the easiest method for replacing existing images in WordPress. In their own words, “A free, lightweight, and easy-to-use plugin that allows you to seamlessly replace an image or file in your Media Library by uploading a new file in its place. No more deleting, renaming, and re-uploading files!”
You can download this plugin from the WordPress Repository

Adobe Photoshop
While you certainly can use other image editing programs, I prefer Photoshop. It is the gold standard and if you are a professional web designer or webmaster, then this should automatically be part of your toolbox.

Chrome Web Browser with Chrome Developer Tools
To inspect websites, I use Chrome Developer Tools which is built into the Chrome browser. Chrome is Google‘s very own browser and is currently the most popular in usage. This allows you to see exactly how Google and your readers view your page.

Here is a YouTube video tutorial on how to use Chrome developer tools. It explains things in detail. It has more than you will need for this purpose but it shows all the essential tools.

I also recommend using two separate browsers. One to work directly in WordPress (I use Opera) and Chrome for inspecting the webpage. This makes it easier to see the finished page without having to log out of WordPress. It also allows me to have a “clean” browser that is unaffected by any of my developer tools, browser history, caching, or cookies.

Step By Step Guide to Reducing WordPress Image File Sizes

1. Disable Caching
   This is optional but I find that it works best as it removes caching and potentially prevents conflicts with other plugins especially when doing many changes. It also simplifies the process of verifying page layout and image quality after uploading the optimized image. This includes plugins that create or load webP images, resize dimensions, lazy loading, etc.
2. Save Your Original Image
   I prefer to inspect the page in Chrome to find the exact URL path for the file. Then open that image in your browser using the URL. Next right click on the image and download using the "save image as" command. Be sure to save these files into a separate folder for organization and safekeeping.
3. Resize Using Photoshop
   Next, open the image in Photoshop. Then resize the image to the correct maximum width. Be sure to retain the image proportionality!
4. Save for the Web
   Save the resized image to a subfolder. I typically name this folder “optimized.”  This keeps the resized images separate from the originals. The original photos are now safely stored on your computer in case you should need them. To compress the image, you will need to select either one of the presets in Photoshop or customize the quality level yourself. Generally, try setting the image quality to 60%, to begin with, and compare the results in the preview pane. This is mostly trial and error and more aggressive settings will often result in a smaller file size and still retain a good-quality appearance. Once you find a quality setting that you are satisfied with then save the image. The resulting image should now be sized correctly and be a smaller file size.It is important that you save the file in the exact same format as the original.
   
   Do not change it from a JPG/JPEG to a PNG or a GIF or vice versa!
5. Replace the Image Using the Enable Media Replace plugin
   (This assumes that the Enable Media Replace plugin is already installed and activated.)
   1. 1. 1. Open your WordPress Media Library and find the image to be replaced. You will see a link titled “Replace media”. Click that link to open the Replace Media Upload screen.
         2. Next click the Choose File button and select the resized image. Again, this should be in the “optimized” folder that you created earlier on your computer.
         3. Under the Replacement Options, select the “Just replace the file” radio button.
         4. Under the Date Options, select the “Keep the date” radio button.
         5. Finally, click the Upload button. You will then be taken back to the Edit Media screen, and you should see the “File successfully replaced” notification. You can now navigate away from this screen as you are now done with this step.
6. Clear Your Cache
   If you disabled your cache in step 1, you can ignore this step. Otherwise, if you are using a caching plugin, clear or purge your cache. If I am optimizing many images or pages, I will temporarily disable the caching plugin to avoid having to repeat this step. This also makes inspecting pages easier and more reliable. Sometimes caching will be stubborn and not reflect the current status of a page.
7. Recheck the Appearance of the Images and Page
   View the page in Chrome. Force a browser refresh to be sure that the page is not cached, and that you are seeing the updated images and page layout. If for some reason the image doesn’t appear correctly or have the quality that you desire, or if the new dimensions break the page layout, you can revert to the original image by uploading it from your folder of original images using the Enable Media Replace plugin. Otherwise, you should now have a page with optimized image dimensions that are smaller in file size. You can also verify this by testing with Google’s web.dev page quality tool - https://web.dev/measure/ or Google PageSpeed Insights https://pagespeed.web.dev
8. If everything is to your satisfaction, reactivate your caching plugin.

Conclusion

Optimizing image file sizes on your WordPress website can be a simple process. By considering the screen sizes of your visitors' devices, choosing appropriate image dimensions, and using tools such as Photoshop, the Chrome Developer Tools, and the Enable Media Replace plugin, you can effectively reduce image file sizes without compromising on image quality. This improves your website's loading times and performance enhances the user experience, and boosts your SEO rankings. Always remember to save your original images for future reference or needs. The importance of the process lies in its ability to ensure a fast, seamless, and pleasant experience for all your website visitors. Therefore, taking the time to resize and optimize your existing images on WordPress is a worthwhile investment.