Enter your search term

Search by title or post keyword

Optimize Images For WordPress Websites & Save Page Load Time

Our website is supported by our users. We sometimes earn affiliate links when you click through the affiliate links on our website

Contact us for Questions

Adding images to your posts is one of the surefire ways to get more attention and engagement on your website.

That said, images use a lot of resources, and can make your website sluggish.

The heavy memory usage of images is where the need for optimizing images for WordPress comes in.

It makes your website faster, irrespective of the number of images you have used.

Using lots of unoptimized images will lead to a slow website, which means your posts will not rank on page 1 of Google’s search results.

In this guide, you’ll find a comprehensive breakdown of everything you need to know about how to optimize images for WordPress.

We’ll cover:

  1. How to manually optimize images
  2. How to optimize images with plugins
  3. How to optimize images with Content Delivery Networks (CDN)
  4. How to enable lazy loading
  5. How to enable caching

Let’s get started.

What is Image Optimization?

Image optimization refers to the steps you can take to ensure adding images to your posts does not slow your website down.

Some of the steps you can take include:  

  • Making your images lightweight in size without a noticeable difference in quality.
  • Adding alt text to your images to make them discoverable by search engines.
  • Using tools and enabling WordPress features to improve how your visitors’ web browser renders images.  

Why is Image Optimization for WordPress Important?

Data shows that many web visitors will abandon a page if it takes longer than 3 seconds to load.

Images and media content contribute to page load times in a big way.

Adding images to your website without optimizing them is like asking peak Usain Bolt to carry 100kg weight and still run the 100 meters in less than 10 seconds.

It’s probably impossible, and the same applies to websites.

Image optimization is necessary to improve your website’s speed, retain more visitors, and ultimately rank higher on search engine results.

Asides from reducing page load times, the advantages of optimizing images for WordPress include:

  • Not exhausting your web hosting space, especially if you’re on a tight budget
  • Improving the user experience as images load faster
  • Ranking higher on Google Image search

Should you optimize images on your website?

The short answer is yes!

Even if it’s just a millisecond you can eke out by compressing a few images and implementing the other strategies in this post, it all adds up.

Your goal should be to gain every advantage possible for your website if you want to rank higher.

Optimizing your WordPress images is one such idea. 

How do I optimize WordPress images to speed up my website?

There are many ways you can improve how long it takes images to load on your visitor’s browser.

For best results, you will have to combine manual efforts with automation, using plugins and some features from your hosting provider and WordPress.

How to Optimize Images for WordPress Manually

In our interactions with new bloggers, one of the frequent questions we hear about images is, “Can you optimize images without a plugin to improve WordPress website performance?”

The answer is yes!

You can optimize your images before you upload them to your website. 

If you want to do this manually, there are three things you need to address:

  1. What size (dimension) or resolution should images be for WordPress?
  2. What file size should images be for WordPress?
  3. Which image format is best for website speed?

What size (dimension) should images be for WordPress?

There’s no universal rule for the size of images you should use on your website.

The goal, however, is to have a consistent layout for all your posts.

The WordPress theme you’re using and the width of the content area assigned to different layouts of each page, will determine the size of some of your images.

For example, if a layout is supposed to be 500 pixels in width and your image is 800 pixels in width, you’re likely to experience what is known as Cumulative Layout Shift (CLS).

Have you ever opened a page on your mobile phone, and it seems the image is larger than the screen?

That’s called CLS, and it hurts a visitor’s experience.

Web visitors can easily assume your web page is broken and exit speedily.

You can alter the dimension of your images using tools like Adobe Photoshop and free online image optimizers such as resizeimage.net.

What file size should images be for WordPress?

You want the file size of your images to be as small as possible without compromising quality.

Photoshop is also a handy tool for this purpose.

Other tools you can use to optimize images for your website online include TinyPNG and Compress JPEG.

screenshot of an optimize images for wordpress tool

Image description: manually optimize wordpress images by compressing file size

Both of these options have a free tier you can use with a few restrictions.

Both allow a maximum of 20 images per time, and the images must not surpass 5MB each.

Which image format is best for website speed?

Here, not one size fits all. There are different reasons why you may choose PNG or JPEG as your image format.

I’ve found that JPEG works well with photographs of people, places, and landscapes, while PNG works better with computer-generated graphics like logos.

Whether you choose JPEG or PNG, make sure you compress and resize the files before uploading them to your WordPress website.

There is also another image format blossoming, WebP.

Of all the mentioned formats, WebP images are the lightest, sometimes as much as 50% less than the size of JPEG and PNG.

The only drawback is that iOS does not currently support WebP, which means the image won’t render on the Safari internet browser.

Optimizing Image SEO with Alt Tags

Alt or alternate text are substitutes for images if they fail to load or render.

It is the description you input into the image alt tags that the website shows the user. Alt tags provide search engines with information about the content of the image.

Search engines use this information to see if the image matches a user’s query.

This could help your website rank higher for the keywords you add to image alt tags.

Be careful, as Google frowns on keyword stuffing.

Use a simple phrase relevant to the content and one that describes the image succinctly.

For example, let’s say you have a picture of a dog playing fetch.

You could describe the picture as ”dog playing fetch,” but a more descriptive alt text would include the type of dog and the location, to read ”German Shepherd playing fetch in the park.”

The best practice is to add the appropriate alt text for each image when you upload them to your website.

You can always edit alt text if the need arises.

screenshot of a tool that lets you optimize images for wordpress

Image description: Media Library on WordPress

ct1fN57FT546lTMs7y HqnJYGtkRDrSka6M3c3a8ZbATvoTddHI64dHFrGNnJcCdgFmwciiNz6FUqsUmW7AG6jpppuFOhUc5OEGV4cLneRw6t PpU8oo4rlIH1AfWkcN6uihy tWj FNn9p1S2nPKv0alCoQ1XHcvqliDOnpGFi kqOWYkkMDZgzUIyCKmHUUcrZ0Q

Image description: Optimize images for wordpress by editing alt text

How to Automatically Optimize WordPress Images

There are many ways to optimize images for WordPress, this includes:  

  • Optimizing new and existing images for WordPress with plugins
  • Serving images and web content through CDNs
  • Optimizing images with caching
  • Implementing lazy loading

Optimizing new and existing images with plugins

Individually optimizing each image you intend to upload to your WordPress website is tedious.

There are image optimizer plugins that streamline this process and enable you to compress the images you upload to your website. Most of these plugins also allow you to optimize the images already on your website in bulk for free.

Once you’ve installed and activated your preferred plugin, you can optimize images from the “Media” tab of the WordPress dashboard. For example, EWWW Image Optimizer will add “Bulk Optimize” as an option under the “Media” tab.

o3OtNi sWuJXkftMw2i62jN1FvMUQFj Bcjmj8k4HYeU86DMp8LDD1a8 wXOw10qZWakcNj1pPB1N2wEkhl8AJvpquhSQtkiUgrK0ztUxdqljSS2o UbmTQqNc

Image description: Bulk optimize with EWWW Image Optimizer plugin

You can then scan for unoptimized images from the next window.

AKPm8Xd4yfcj4rGYfB0n 9qH wX2IzTmRYtbBn F0OLPCk8lfE5Ak3TN gkpC70PrcN5g TenOV4R aeNCTWsoubs fPT8aeIZhMyDSGNUhytkU90rTylJRGLkJxCZ86kFxa7yInhA LxQnVMsbS3SsHhcojT 1Dz KeHzaX3YrpYzDOcULf5XY0nD ijt5fUpMjQ

Image description: Scan for unoptimized images with EWWW Image Optimizer plugin

Five of the Best Image Optimization Plugins for WordPress

So what are the best image optimization plugins for WordPress to speed up your site? Here are our top five:

  1. EWWW Image Optimizer plugin
  2. Smush
  3. Imagify
  4. ShortPixel Image Optimizer
  5. Optimole

All of these options have a free tier with certain limitations. The table below summarizes the difference between the five WordPress image optimization plugins.

PluginMaximum Image SizeSupported File TypesPricing
EWWW Image Optimizer plugin
  • Maximum of 150MB
  • PNG, JPG, GIF, and PDF
  • Free to use.
  •  The pro version starts at $5/month
Smush
  • 5 MB max for the free tier
  • As much as 32 MB for Smush Pro
  • PNG, JPG, GIF
  • Free to use.
  • The pro version starts at $7/month.
Imagify
  • 2 MB for the free tier.
  • There’s no limit to paid subscribers.
  • JPG, PNG, GIF, PDF, WebP
  • 25MB of images on the free plan.
  • Pricing starts at $4.99/month.
ShortPixel Image Optimizer
  • 100MB for all plans
  • JPG, PNG, GIF, PDF, WebP
  • 100 free credits per month on the free plan.
  • Pricing starts at $4/month
Optimole
  • No Limit
  • JPG, PNG, WebP, SVG
  • Free for websites with 5000 monthly visitors or less.
  • Pricing starts at $22.52/month for more visitors.

Serving and optimizing WordPress images and web content through CDNs

Amazon has 1,137 fulfillment centers (packing warehouses) in the United States alone.

The fulfillment centers allow it to make faster deliveries in record time.

The fulfillment center closest to the customer processes the customer’s order.

The same logic applies to CDNs.

CDNs are like fulfillment centers for your website content.

With CDNs, your website content, including images, is uploaded to different servers around the World.

CDNs reduce page load time and bandwidth costs and keep your website available even if the origin server is enduring downtime.

Let’s assume someone from Africa visits your website, housed in a server in the United States.

Rather than sending the website content from the United States, a local server in Nigeria or West Africa storing a copy of your website sends it directly to the visitor.

Cloudflare is an example of a great CDN.

They also have a free WordPress plugin you can install and activate.

Cloudflare also provides the extra benefit of a free SSL certification, which can also be a boon for your website’s SEO.

Optimizing images for WordPress with caching

Caching is a way of storing some of your website files, including images and CSS, on a visitor’s web browser after their first visit.

The next time the user visits your website, the browser will load files locally rather than the server hosting your website.

Except, of course, if the user has cleared their cache.

Every time the user visits your website, their browser will ping the server to see if there has been any change on the website.

If there haven’t been any changes, it renders the files stored on the user’s browser.

It’s important to note that cached data is different from cookies.

Some WordPress caching plugins include W3 Total Cache, Cache Enabler, and Hyper Cache.

You can read our exhaustive guide on the top 10 WordPress cache plugins in 2022.

Implementing lazy loading

Lazy loading speeds up loading time by only loading the media content visible to the visitor.

Rather than loading all images and media content at once, it gradually loads the images as the visitor scrolls down.

As long as the image is not in view, lazy loading ensures the browser does not load it.

Thus, reducing initial load time.

This optimization is handy for websites that use many images in their posts.

If you only post one or two images, the difference in performance with lazy loading may be insignificant.

However, if you run a review site, then this is a fantastic way to minimize loading time.

So how do you implement lazy loading on WordPress?

Lazy loading comes shipped with WordPress from version 5.4 and above by default.

The only drawdown with using the lazy loading feature shipped with WordPress is that you cannot choose which images to lazy load.

For the freedom to choose which images to lazy load, you can go with a plugin.

Some plugins used to compress and optimize images for WordPress mentioned above also support lazy loading.

EWWW Image Optimizer plugin and Smush offer lazy loading features that allow you to choose which images to lazy load.

Other plugins you can use include Optimole and a3 Lazy Load.

4Mw xfreZx4zl7sYs5YNhX8xYlLZ5Zg5slxmEE6JafEdnMioUJyPV3 FF6rrE7u2hIj3ULd2OxQ8g9f87VMBaYwW vdXfuAqkfkew7MAlAspgmIbG4Jr3u42oI ITbfnjUiKQrphWOKaQMmbmkB9zBa9i YGrufTgibWY5PlkkUlvBgwJKdC QknNsUW7ytReSutMg

Image description: Implementing lazy loading with EWWW Image Optimizer plugin

Wrapping up: Image Optimization for WordPress Key Takeaways

The image optimization strategies above can make your website faster and deliver tangible SEO gains.

One of the most important things you can remember is that images are resource-intensive and need proper management.

You do that by:

  • Compressing and optimizing images to reduce file size.
  • Editing images to the exact dimensions they will appear on the website.
  • Ensuring you use the appropriate image format for the right purposes.
  • Ensuring all images have alt text describing the content of the image.
  • Using CDNs to deliver content closer to each visitor’s location.
  • Implementing lazy loading if your posts use a lot of images.
  • Enabling caching to store and render images and files from your visitors’ web browser.

Before you implement these steps, it’s a good idea to track your website’s loading time so you can get a clear idea of how much time you gained with each implementation.

It’s important to stress that optimizing images for WordPress is only one of the numerous factors that affect the speed of your website.

Let’s know in the comments which of these strategies you’ve tried before and what the results were.

Which one are you trying next?

If you have any questions or comments, kindly post them below, and we’ll get in touch as soon as possible.

Leave a Comment