4 Ways to Optimize Your Images in WordPress – Best Practices

Images form the largest part of modern web pages. Especially when you consider that Google likes “rich” web pages with lots of media. As a result, optimizing the delivery of your images is critical. Here are four ways to optimize your images in WordPress, with screenshots.

Method 1: At Least 1200 px in Width

When I first started writing, I would resize all images to a maximum of 550 px width. I thought that looked nicest on browser screens. However, one day I woke up to an error message in my Google search console regarding my AMP web pages like this:

Turns out that when Google offers up web pages via AMP, they want the images to be of a certain minimum size according to their guidelines. You can see here, that they recommend them all to be at least 1200 px in width:

So that’s what I’ve started doing. However, I don’t think it looks very nice on the screen, so I purposely specify image dimensions of 550 px in the HTML while displaying the images on a web page.

Method 2: Using Google’s “Squoosh” Service to Reduce Image Size

In November 2018, Google released its own “Squoosh” app to reduce images sizes, with a blog post explaining why. The website Squoosh.app blows away all other image compression plugins and tools I’ve used so far.

For example, here’s a screenshot of my desktop image with the size displayed when I open it in MS Pain:

Here, the size is 1.1 MB. That’s pretty huge. Now when I open the Squoosh website and select the image, it gives me the new size as shown here:

As you can see, in the screenshot it’s just 69 KB. That’s a reduction of 94% using just the default settings! You can further tweak the compression algorithm and increase or decrease the compression metrics. The website also has a “side by side” comparison pane system that lets you compare the compressed version with the original in great detail.

Ever since I discovered Squoosh, I use nothing else to reduce large image sizes. It’s truly amazing.

Method 3: Use Lazy Loading for Images

Not everyone scrolls all the way down to every page. So if you have images rendering below the fold, we don’t want the browser unnecessarily using up the visitor’s bandwidth by downloading unnecessary images. In addition, this slows the page down and reduces your pagespeed scores, which might have an impact on your Google rankings.

To combat this, we implement “Lazy Loading” of images. This means that we only download the image when the user has scrolled far enough down to see it. The easiest way to enable this is to use the Jetpack WordPress plugin, created by the developers of WordPress themselves. In the “Performance” section of the plugin, you can enable lazy loading like this:

And you’re done! It happens automatically. Which brings us to the last method.

Method 4: Using a CDN for Images

Images are static content. They don’t change. Ideally, we’d like to store then in servers around the world, so users can download them from the server closest to their geographic location. This is called a “Content Distribution Network” or CDN.

As seen in the previous screenshot, the Jetpack plugin already allows us to use their CDN network for images. To enable it, choose the option “Speed up image load times” and you’re done! Now your images will be served directly from a CDN instead of your origin server.

Personally however, I prefer to use Cloudflare instead of the Jetpack CDN. That’s because Cloudflare is a reverse proxy and doesn’t need an additional IP lookup, which slows everything down. It might not seem like much, but when rendering a web page, even a few hundred milliseconds of lookup time can make a huge difference.

But whether you use the Jetpack CDN or Cloudflare, your site will benefit from a CDN in general. There are also paid solutions for CDNs, and some web hosts include CDN functionality with their advanced hosting services like managed hosting for example.

If you follow these four methods to optimize your images and delivery, you’ll have done all you can. This will result in faster load times, lower bandwidth, and a far better overall browsing experience for your visitors. And in the end, that’s what matters most.