Image Optimization in WordPress

No matter how optimized your website is, images will always be one of the slowest-loading elements on the page. If you want to speed up WordPress to the max, you need to implement a strategy that targets images specifically – otherwise known as image optimization in WordPress.

Today’s post shares six quick tips for optimizing image by reducing file size – all in the name of speed. If you want a lightning quick WordPress website, read on!

Image optimization in WordPress tip #1: choose the right file type

When using Photoshop and other image editing software, you can specify the file type you want to save as. The overwhelming majority of online images fall under two file formats – JPEG and PNG.

So which one should you use? Well, that depends. Both options have advantages and disadvantages, and the choice largely depends on the scenario.

  • JPEG – JPEG is the best option for photographs and other images displaying a huge variety of colors. They can also be compressed, sacrificing quality for a reduction in file size.
  • PNG – PNGs win for graphics, drawings, text, and some screenshots. They also support transparency, unlike JPEGs. This format uses lossless compression, which results in higher quality but also bigger files.

Usually, the file format is determined by the type of image we are working with, as outlined above. However, what is the consequence of choosing the wrong file format, in terms of file size?

Well, let’s take a look at a few scenarios to test this.

This full-size screenshot of my WordPress dashboard was 150kb in PNG format, but 259kb as a JPEG. Remember, screenshots are usually the domain of the PNG – the JPEG is around 75% more bulky.

Image optimization in WordPress example - PNG screenshot

(Editor’s note. PNGs do a great job for most screenshots, but just not all of them. If you have a screenshot of something that uses more than a handful of colors – i.e. when your screenshot contains a photograph somewhere in it – you’re still better off with JPG.)

However, the full-size version of this photo I took on holiday returns the opposite results. The photo in JPEG format is 1.26mb; the PNG a whopping 7.23mb. That means the PNG is over 550% bigger (yikes!).

Image optimization in WordPress example - JPEG picture

This demonstrates how important the right file format is to the size of your images. If pressed, stick to the following rule:  Photos and stuff with multiple colors, JPEG; everything else, PNG. 

2. Resize images

When you shrink the dimensions of an image, you reduce its file size. Without exception.

To keep your site light and nimble, make sure you reduce the image’s physical size as much as you can – typically, to the dimensions you want to display your images at. If the maximum width of your website is, say, 1000 pixels, there’s no excuse for uploading an image that’s wider than 1000 pixels. Larger-than-necessary dimensions guarantee that the image is carrying unnecessary bulk, and thus making it harder for you to properly do image optimization in WordPress.

Even though the WordPress thumbnail feature can display images at smaller sizes, that doesn’t change the underlying file size of the image in question. Obviously, an exception can be made for photographers and other artists, who may want to display a thumbnail linking to their full-size, high-res work.

Again, allow me to demonstrate the sort of savings you can make.

The full-size version of my previous photograph has dimensions of 2592 x 1456 pixels and is 1.26mb. However, let’s see how much the file size shrinks when resizing the image to several popular widths.

An example of image optimization in WordPress:

  • 1200 pixels wide: 394kb
  • 1000 pixels wide: 298kb
  • 800 pixels wide: 219kb
  • 600 pixels wide: 154kb

As you can see, the size savings are truly staggering!

3. Crop images

Resizing images is the quick-and-easy way to reduce file size. It creates an exact replica of your image, but one where everything is smaller.

Shrinking an image beyond a certain point means some elements are barely visible. This is especially problematic when the focal point of an image is no longer clear.

Cropping is the alternative to resizing. Rather than shrinking the entire image, you are essentially trimming around the edges – like using a pair of scissors on a photograph. The part of the image you are trying to show becomes more prominent, and you cut away all the distractions from the background.

Here’s a demonstration of how cropping an image can be better than simply resizing it, using a trusty WordPress screenshot.

The resized image:

Resized Image

The cropped image:

Cropped Image

Of course, the benefit of cropping is that, just like resizing, it reduces image dimensions, cuts file size, and is therefore a great way of doing image optimization in WordPress.

4. Lower image quality (lossy compression)

When you’ve finished cropping and resizing your images, you can enjoy further file size reductions by compressing them. This technique is particularly effective and popular for JPEGs, although PNGs can also be compressed.

Now, JPEG supports a type of compression called lossy compression. This means that some of the image data is stripped away to reduce file size.

For example, if two adjacent pixels show the tiniest color difference, we can get away with making them the same. The change is barely detectable to the naked eye, but having fewer colors keeps file size low.

When saving a JPEG file using an image editing software, you’ll be asked to select a quality score from 0-100. This is essentially a trade-off between image quality and file size.

  • Higher score: lower compression; higher quality; bigger file size.
  • Lower score: higher compression; lower quality; smaller file size.

Generally speaking, small changes in quality score make little difference to the overall quality of your image. In fact, it’s unlikely that your visitors can tell the difference.

To illustrate this, see the two photos below. One has a quality score of 100, one of 80. Which is which?

Image optimization in WordPress photograph A:

Photograph A

Photograph B:

Photograph B

Click here to reveal
Photograph B has the quality score of 100.

It’s hard to tell the difference, right? However, when it comes to file sizes, the difference is night and day: 418kb versus 90kb.

You can’t keep lowering quality forever, though, as at some point, the drop in quality will show. The image below has a quality score of 20:

Lower Quality Image

Sure, it might only be 28kb, but I wouldn’t want this on my website, would you?

Now, there is no golden rule for the perfect compression level. However, counterintuitively, the more complex the image, the more you can get away with lowering the quality on your way to ultimate image optimization in WordPress.

5. Serve images on a CDN

Everything online happens in an instant, right? Well no, actually. Geographical distances between a visitor’s location and your website’s server have an impact on site speed – the larger the distance, the longer the wait.

To solve this latency problem, consider installing a CDN. CDNs store your website on multiple servers spread across the globe, then connect your visitors to the one geographically closest to them. Latency problems solved, your website is served more quickly.

If you want to speed up WordPress, you’ll be pleased to learn that the insanely popular Jetpack plugin ships with its own free CDN – just for images.

All you need to do is install Jetpack, connect it with a WordPress account, and then activate the Photon module. Voilà – your images will be displayed in record time.

For some more complex – and also better – CDN solutions please check out our other post.

6. Get lazy loading

By default, the WordPress software treats all images equally. However, this is quite clearly an inefficient use of resources, and especially if you want to do any image optimization in WordPress.

After all, an image at the bottom of the page won’t be seen until much later than the image at the top of the page – doesn’t the first image deserve priority?

Prioritizing images is exactly what lazy loading achieves. Images at the top of the page are prioritized, while images below the fold are loaded only when the visitor scrolls down the page. This makes lazy loading the “just in time” equivalent of web page loading.

If you want to use lazy loading to speed up WordPress, BJ Lazy Loading is the top plugin for the job. It’s completely free, too.

Over to you

And that concludes our rundown of six quick tips that will help you with image optimization in WordPress. As you can see, by combining several of these strategies, you can make big savings to your images’ file sizes. Your visitors will love you for this – and your website will load significantly faster!

If you have any image optimization questions, share them in the comments section below!

Want to make your website even quicker?  Don’t forget about our free email course on how to speed up WordPress: