The images on your WordPress website is slowing down your site.
The more files you upload to your WordPress media library (stored under the /wp-content/uploads folder), the clutterer your website becomes.
If you want to speed up your WordPress website, you need to optimize your images .
In this post, you’ll learn how to optimize your images in WordPress to get a faster page load.
Compress Your Existing Images
For most people, comprising the existing images alone would significantly improve the site speed.
Simply compress all your existing images in the media library so that the file sizes become smaller.
Use these plugins to compress the images without losing the pixel quality.
ShortPixel Image Optimizer is an excellent plugin that does this. The free version comes with 100 image credits a month (that’s about 100 images you can compress). Additional credits can be bought for $4.99 for 5,000 image credits. I use the paid version. It helped me reduce the image file size without sacrificing quality.
TinyPNG is also another excellent choice with the option for bulk optimization. They also offer 100 images each month for free, with an opportunity to switch to a paid account to remove the limits.
Make sure to back up your files before you perform bulk optimization. A few images could unexpectedly go missing or end up being too compressed and losing quality.
Automatically Optimize New Images on Upload
Using one of those plugins will allow you to optimize any image that you upload in the future. That way, you don’t have to think to worry too much the next time you upload an image.
Check this page for ShortPixel and TinyPNG’s guide on setting it up correctly. Also, do not forget to automate your backups.
The Best Way to Serve Your Images on WordPress
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 your media library in conjunction with one of the image optimization plugins mentioned above would be good enough.
The downside is that it might get cluttered. If there are too many files in the uploads folder, backups or migration to another site might take a while.
The images don’t have to be served from the uploads folder. Here are different ways to serve images on your WordPress site.
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 are served from. Let’s say for this example. Your website host server is in New York.
A CDN service creates copies of your website files in numerous server locations all around the world.
For example, one CDN service has servers located in London and Tokyo. When someone in Oxford visits your website, she’ll view the copy of your site from the server location nearest to her, which is London. In this scenario, accessing your website from a server in London would be much faster than accessing a server in New York or Tokyo.
You can set it up so that your images (arguably the biggest files among all your other website assets) are served via CDN.
Pros: This gives the website visitors an optimal experience of images loading fast. It’ll also help lessen the traffic bandwidth to your website since the images are not being served from their original server location.
Cons: Depending on which CDN you use, the set up can be complicated. Good CDNs incur some costs. When images are served from CDN, their URL is routed through the CDN service providers’ URL.
It is recommended for: a high traffic website with many images.
There are free and paid CDNs for WordPress.
Bunny CDN 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 CDN offers free plans, but the setup is a bit complicated and the performance pales compared to the paid plans.
Considerations: 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.
It is possible to rewrite the above URL so that it appears that your image is served from your subdomain, such as media.yourwebsite.com/my-image.jpg.
From the SEO (search engine optimization) standpoint, using a subdomain instead of CDN’s URL is preferable since it gives more authority back to your main domain address.
Use AWS S3.
Similarly to CDN, instead of serving your images from the uploads folder, you can choose to serve images from S3 storage.
AWS S3 is a file cloud storage provided by Amazon. You can think of it as a Dropbox of Amazon. For short, we’ll call it 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.
Pros: less burden on your WordPress website, and depending on your configuration, you could save your hosting space.
For developers who work with 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.
Cons: Depending on the backup plugin or migration tool you use, the URL might not get copied properly.
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.
S3 does cost a little bit depending on the storage space and traffic bandwidth (I spend $1 a month for S3). If your website’s primary goal is to give information to your visitors, then it won’t be expensive. But if your website receives user-generated content (such as submitting images), then you’d want to discuss that issue separately with a professional.
Consideration: It is possible to enable CDN for the images stored and served from S3. But I think that’s a bit redundant. If you’re going to end up using CDN anyway, you might as well skip S3, but that’s my opinion.
Recommendation: Only use this if you have a particular need. You also need to be aware that serving all images from S3 and not leaving any original copies in the uploads folder, especially for the featured images, may cause a technical difficulty when changing the WordPress theme or migrating to another host.
Upload and serve the images as 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.
Pros: WebP file sizes are small and help your site load fast.
Cons: 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 these tools to convert your images to WebP.
Recommended Practices with WordPress Images
This is what I do for almost all the blogs that I own to optimize for speed.
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!
Comments are closed.