Best WordPress Image Compression Plugins

Is your WordPress website loading slowly?

It could be that the images on your website are slowing down your site.

The more files you upload to your WordPress media library /wp-content/uploads, the clutterer your website becomes.

Whether you upload photos you took on your phone or images you create, you want to resize, optimize, and compress your images and reduce their file sizes.

Here are the best WordPress image compression plugins and step-by-step guide to make your WordPress site faster.

[lwptoc float=”none”]

Step 1: Compress Your Existing Images

Do you have a lot of images on your WordPress?

The first step is to bulk compress the existing images on your website. This alone can significantly improve the site speed.

These are the best WordPress image compression plugins. Use these to optimize the images without sacrificing quality.

ShortPixel Image Optimizer

ShortPixel Image Optimizer is my top pick. The free version comes with 100 image credits a month (1 credit = 1 image). Credits are used every time you want to compress an image. Additional credits can be bought for $4.99 for 5,000 image credits. You can purchase additional credits to optimize your existing images. You can also let it run automatically optimize images every time you upload to WordPress Media Library.

TinyPNG

TinyPNG is also another excellent choice with the option for bulk optimization. You can optimize 500 images each month for free. You can purchase additional credits, for about $4.50 for 1,000 more image compressions. TinyPNG also has a Photoshop plugin, and you can also use their web app service to compress unlimited number of images for $25 a year.

When compressing the existing images, make sure to back up your files before you perform bulk optimization. A few images could unexpectedly go missing or lose quality. When that happens, you want to be able to find the images in question and make adjustments.

Step 2: Automatically Optimize New Images on Upload

After you have optimized your images, have the plugins automatically optimize any images that you upload in the future. It is also recommended to set it up so that your WordPress website performs automatic backups before the image compression task.

Step 3A: Use CDN to Serve your WordPress Images

By default, your images are stored and served from the uploads folder.

For most casual bloggers and hobbyists, simply uploading and serving the image files from WordPress Media Library in conjunction with one of the image optimization plugins mentioned above would be good enough.

The downside is that depending on your hosting service, having too many files in the uploads folder could cause some errors during backup or site migration.

If the location of a user browsing your site is far from the server location of your host, that could affect the image loading speed.

In order to improve user experience by having the images load faster, consider using CDN.

Use CDN

CDN is short for Content Delivery Network.

Your host server is located in one area, and that’s where all your website files and images are served from. For example, the server location of happens to be in Singapore.

A CDN service creates copies of your website files in many locations all around the world.

For example, if you’re reading this post in Oxford, then the images will be served from a server closest to your location — let’s say, in London. Theoretically, images served from London will load faster than Tokyo for someone browsing the site in Oxford when using CDN .

You can set it up so that your images (and other website assets and scripts if you want to) are served via CDN.

Here are recommended CDN services for WordPress.

BunnyCDN

BunnyCDN is one of the most affordable solutions with spectacular performance. (for most users, it’ll only cost less than a dollar a month). Highly recommended.

CloudFlare

Cloudflare CDN offers free plans, but the setup is a bit complicated and the performance pales compared to the paid plans.

Pros and Cons of CDN

Pro: It’ll also help lessen the traffic bandwidth to your website since the images are not being served from their original server location.

Con: Depending on the service you use, setting up CDN can be complicated.

Consideration: When you use these CDN services, your image URL will be routed through their URL. For example, your image URL would be something like, bunnycdn.com/my-image.jpg instead of yourwebsite.com/wp-content/uploads/2020/03/my-image.jpg.

Most CDN services will let you change in the settings to rewrite the image URLs to your subdomain address, like media.yourwebsite.com/my-image.jpg.

Step 3B: Serve Images from an External Storage Service

Instead of using CDN, you might consider just using an external storage service to store and serve your images. You might consider doing this if you are concerned about having too many images and cluttering up your hosting space.

Looking for the best WordPress hosting? Check out my hosting review here and find the one that’s best for you.

If you want to keep the storage for your images separate from your hosting, then I recommend you use Amazon AWS S3.

Amazon AWS S3 + WP Offload Media

AWS S3 is a file cloud storage provided by Amazon. It’s like Dropbox except it’s a lot more scalable.

There are other similar services likes BackBlaze and Wasabi, but there’s a convenient plugin that works well with Amazon AWS S3.

DeliciousBrains’ WP Offload Media plugin makes it easy to set this up and have your images served from S3 instead of the uploads folder.

You can upload an image to the media library folder or attach an image to a post as usual. When the image is uploaded to WordPress, this plugin will create a copy of the image in S3 and rewrite the URL so that the file gets served from S3.

You can even choose to have your image deleted from your media library once the image has been uploaded to S3.

Pro: less burden on your WordPress website, and depending on your configuration, you could save your hosting space.

Local environment: When you download your entire WordPress site to your local environment and replace the main domain URL for the local one, the images will continue to display properly (with the internet connection) since they’re being served from S3 and not the main domain URL.

Con: Depending on the backup plugin or migration tool you use, URLs might not get copied properly. Always back up and check.

Attention: Having the images automatically removed from your media library would be problematic when changing the theme or migrating the website to another host (my experience), especially if the images are used as featured images. If the images are not used featured images, but simply an embed in a post, then it won’t be a problem.

Cost: I spend less than $1 a month on S3. It’s very affordable, and unless you have a lot of files and traffic bandwidth, it shouldn’t cost you more than a few dollars.

Optional Step: Use Webp files

WebP is a new file format (It was created in 2010. Is it still new?) that’s getting some attention. WebP file size is a lot smaller than JPG or PNG. WebP also supports transparency without increasing the file size.

Convert your images to WebP file format, then upload it to your WordPress.

Pro: WebP file sizes are small and help your site load fast.

Con: They are only supported by Chrome, Opera, and Safari browsers. WebP files should be served from the uploads folder or an external cloud storage like S3.

Recommendation: Although WebP is promising, the lack of native support by other browsers is what stops me from using it. There’s a way to set it up so that you can display JPG or PNG as a fallback when a browser does not support WebP. It’s a bit of a technical workaround, so I’d recommend bloggers and business owners who run a WordPress site to use the image compression tool and/or CDN instead.

Use web apps to convert your images to WebP.

Recommended Practice

This is my recommended method for WordPress image compression.

Settings

❏ Install ShortPixel Image Optimizer or TinyPNG plugin

❏ In wp-admin settings media, set all the image file sizes for thumbnail, medium and large to 0 (zero). This prevents WordPress from automatically creating resized versions of the same image.

❏ Check the subfolder. When you migrate your site to another host, it’s better to have your files organized into subfolders to minimize errors. For my very first WordPress blog, I unchecked this box, and all my image files were under the uploads folder. This caused errors and stalls during site migrations.

❏ Use lazy load. Having this option on will make WordPress load images as a visitor scrolls down the page, rather than having all images attached to the page load when a visitor lands on the page for the first time.

❏ Use the server-side and browser cache—more on this topic on this page.

❏ Always back up. Click here for the list of WordPress back up methods.

Routine

Just as with most of the things I do, I like to follow a set of routines.

Every time I create a post and upload a featured image, this is what I do.

❏ Create an image with the dimension of the featured image as set by the theme. For example, if the theme’s featured image dimension is 600 x 400, I create all my images either in that dimension or in that ratio (like 1200 x 800).

❏ Compress the images using a desktop tool. For Mac, try uPic, Squash, or Photoshop. For web app solution, try tinypng.com or

❏ If a PNG file does not have a transparent background, convert it to JPG. If an image requires transparency, keep it as PNG.

❏ If the image will be embedded in a post, make the dimensions small as it makes sense. Usually I keep the width of the image between 600 to 800px if it’ll be embedded in a post, then either apply a class or do inline CSS to resize or style it as necessary. The embed image dimensions will also depend on the content width and image alignment. I’ve seen some of my client websites with 2048 x 1152 images uploaded and then resized down to fit in a post. That’s going to be huge file size, and it’s going to eat up space!

So that is how I deal with featured images and embedded images in WordPress. I’ll just make it a routine, so I know the images are optimized while keeping my uploads folder light and clean.

Advanced Tip: Remove Unused Images to Save Hosting Space

If you’re a neat freak like me, chances are you want to remove the unused images to keep your folder orderly and clean.

Removing unused images from your media library has the benefits of saving your hosting storage space and the number of inodes — which is a fancy way of saying the number of files and folders.

For example, SiteGround’s cheapest plan has 10 GB storage space. Even if you do not use all the available storage space, they will still impose an upper limit on the number of inodes (files or folders) you can host.

For most people, removing unused images from your /wp-content/uploads folder is not necessary since it won’t affect the page load speed (The images that are used on the website will affect the page load speed).

But for someone like me who wants things orderly and remove clutter just for the heck of it, go for it.

The manual way

Your first step to the spring cleaning of your media library is to identify which images are not being used.

Whenever you upload an image as a featured image, the image will get resized or cropped according to the image size ratio of the featured image set by your theme.

If you also happen to use other plugins that utilize auto-resizing or auto-cropping of your images, such as a slider plugin, then you’d want to take a note of those image size ratio as well.

Once you know what they are, you can go back to the /wp-content/uploads and remove the images in the sizes that are different from the featured image sizes and the image sizes used by other plugins. Make sure to keep the original, too.

Automated way

But why bother to go through each image one by one when there’s an automated way?

Use MeowApps’s Media Cleaner Pro plugin. This plugin will scan your system and identify the images that are not being used or attached to any posts.

Select the ones you want to remove, and you’re done! As always, make sure to back up before you perform this action!

Conclusion

So that is the recommended step-by-step guide to optimize images on WordPress.

1. Compress existing images
2. Set it up so that all future images are compressed automatically when uploaded
3. Consider using CDN or external storage
4. Use lazy load and cache
5. Compress and optimize the images using a desktop or web app before uploading to WordPress

I hope this guide helped you figure out the best way to optimize images on your WordPress site.

Let me know if you have any questions below!