WordPress Image Optimisation Plugins for Photographers

Bottom Line

Image optimising plugins remove data from image files to make the file size smaller.

They use either lossy or lossless compression.

Lossless does not affect the quality of the image at all.

Lossy removes more data than lossless with the risk of degrading image quality.

Why doesn’t Adobe, for instance, remove this extraneous data when we export our images. The simple answer is Adobe use less aggressive compression methods.

JPEG Only

Although most plugins will compress PNG, GIF and PDF, I will only be talking about JPEG as this is the best format for photographs.

P.S. never use PNG for photographs as this will make for very large file sizes.

Default WordPress Image Sizes

For every one image uploaded to a WordPress site, there are at least another four smaller pixel dimension images created.

• Thumbnail (150 x 150px)
• Medium (300 x 300px)
• Medium Large (varies)
• Large (varies)

Your original file is referred to as: Full Size.

Besides these four extra images, your theme and plugins will add even more images.

On my site for every one full-size image, there are eleven other images at smaller pixel dimensions.

WordPress Does JPEG Compression

WordPress by default compresses the images it creates to 82 per cent quality using the ImageMagick compression method – which is fast but crude. Your full-size original image is not compressed.

What Pixel Dimensions should I use?

This is the “How long is a piece of string question”.

People often get confused about this pixel dimensions because WordPress does not make this subject easy.

Your theme might say that 2000 pixels on the longest edge is the largest size you can upload.

You can ignore this and upload images larger than 2000 pixels on the longest edge.

The bottom line is – it’s your choice.

Think of how many different devices there are now, from mobile phones to tablets and desktops. They all have different screen resolutions and there is also landscape, or portrait mode thrown into the mix.

I used to export at 2600 pixels on the longest edge. I now think that is probably too big.

How many screens out there have a resolution of greater than 2600 pixels on the longest edge? Even a 5k iMac with a browser on full-screen has 2560 pixels on the longest edge by default.

So if I exported at let’s say 2000 pixels on the longest edge there would be an upscaling by the browser to make my image fit on a 5k iMac with a browser on full screen. And this would only apply to hero image designed to fill the screen.

Two thousand pixels on the longest edge is acceptable because the 5k iMac scenario with a hero image is a rarity rather than the norm.

Going forward I intend to use 1900 pixels on the longest edge. I think the off-chance that a browser might re-size my image is far out-weighed by the file size reduction of using smaller pixel dimensions.

Get The Foundations Right

WordPress Image optimising plugins aside. You should pick the lowest JPG quality setting that’s a compromise between file size and image quality in your image editing program.

That takes a bit of work and eyeballing. Start at 50 quality and revise up, or down till you get an acceptable compromise between quality and file size.

There’s an excellent plugin for Lightroom that can output 14 images at differing quality settings. This makes the selection process easier. The plugin can be downloaded HERE

Terminology

• JPEG or JPG = (Joint Experts Photographic Group)
• Image Optimisation in the web development world means getting the right balance between file size and image quality.
• JPEG or JPG Quality refers to the JPG quality export settings in any image editing app.
• Lossy Compression means that some of the original image information is lost and cannot be restored, possibly affecting image quality. Using Lossy will decrease file size more than Lossless
• Lossless Compression does not degrade quality.
• WebP An alternative to JPG which can lead to smaller file sizes. Only supported by Google Chrome and Opera browsers.

Heads Up (Optional Read)

• Officially it is called JPEG when referring to the method of compression. There are many file extensions associated with JPEG – JPG being the most common.
• JPEG is a lossy compression method for digital images.
• Lossy compression is irreversible
• JPEG It is best suited to continuous tone images like photographs.
• The amount of compression is usually referred to as ‘Quality’ in many programs.
• Every time you save a JPEG file you are re-compressing it.
• There are many ways to work non-destructively with JPG files. For instance, using a raw editor like Lightroom. Working with a copy. Using ‘Save As’ and not saving the original JPG. Just try not to save a JPG.
• The JPG Quality settings are program specific and not shared across image editing software. So Lightroom’s 80 JPG Quality is not the same as Affinity’s JPG 80 Quality Setting.
• The actual JPG quality setting is 0 – 12 but expressed as 0 – 100 in many programs. There’s an excellent very readable article by Jeffrey Friedl which can found HERE. The upshot of converting from 0 – 12 to 0 -100 is that quality will now be in ranges like 0-7, 8-15, 16-23 etc. So, for instance, dropping from 23 to 16 quality will not make any difference in terms of size and quality.
• There are many different methods of JPEG compression.

Compression Confusion

How can you Losslessly Compress a JPG that’s already been Lossy compressed? The simple answer is you just use a different compression method to the original compression used by your image editing program.

The Gotcha’s with Image Optimising Plugins

• Some free, or freemium plugins only offer lossless compression only which does not reduce the file size as much as Lossy Compression.
• Some free or freemium plugins have file size limitations. For instance the free version of reSmush.it limits the original file size to 5MB or less and only uses lossless compression.
• Some freemium plugins offer to do the first 100 images free. Now that you know that WordPress creates at least four other images to your one – that’s not going to do many images.
• If you want to the compression savings of let’s say a 50% reduction in file size you will have to pay for it. Though reSmush.it does a damn good job with lossless compression.

Other Considerations

Content Delivery Network (CDN)

Some Image Optimisation plugins offer this service, and it’s definitely worth considering.

A CDN if you don’t know is a network of servers holding a cached version of websites around the world. Normally this is a paid for service. Though Cloudflare offers a free service it will not cache images, only static files like HTML and CSS.

With a CDN someone accessing your website in Outer Mongolia doesn’t have to access your hosting server in let’s say London. But from a server actually in Ulaanbaatar.

You might say “Well, I don’t care because all my customers are in the UK. You should care because the CDN servers are far more powerful than the hosting provider’s servers. They also are very scaleable in terms of coping spikes in traffic.

If you can afford CDN it’s well worth it.

Resizing

In tandem with the CDN facility, you can opt to have your images resized on the fly the CDN servers (this would normally be done on your server). The resizing by the CDN is normally more efficient.

The DIY offline method

Well, if you’ve got very little money then do the optimising yourself. I’ve covered it in the link below.

To be honest, having used reSmush.it which is a free plugin you’d be mad not to use it.

The Image Optimisation Plugin Method

Totally Free Plugins I Recommend

reSmush.it

I honestly don’t know why they offer this service for free. But free it is.

As it stands today this is a no brainer if you don’t want a plugin with a built-in CDN.

The only restrictions are:

• 5MB file size restriction (Hopefully you are not exporting anywhere near that size with your JPG’s
• Lossless compression only but it’s very efficient as it uses ImageOptim compression which is very efficient.

Paid for Image Optimisation Plugins I Recommend

ShortPixel

• Either Subscription or Pay-as-you-go.
• Three undefined compression methods for JPEG (Lossless, Lossy, & Glossy). Glossy being a proprietary name. ShortPixel seems to come out well on tests against its competitors. They don’t actually state what compression methods they are using though.
• WebP support for the browsers that support WebP.
• Lazy Loading support.
• Image conversion (PNG to JPG)
• PDF, PNG, GIF compression
• Removes or keeps EXIF data (your choice)
• Supports Retina 2x plugin. (see below)
• Works well with some well known Gallery Plugins.
• Allows for Bulk Optimisation of images already in your media folder.
• Does offer a CDN via another plugin called Adaptive Images WP with dynamic resizing This uses a fair-use model tied into their optimisation plans.

EWWW Image Optimizer

• Either Subscription or Pay-as-you-go.
• Uses four different JPEG compression methods. Lossless (Jpegtran, mozJPEG), and two more undefined lossy methods.
• WebP support for browsers that support it.
• Lazy Loading support
• Image conversion (PNG to JPG)
• PDF, PNG, GIF compression
• Removes all Metadata – your choice. But will preserve embedded colour profiles. But, If using the strongest compression called Premium Plus mode. Then for both JPG and PNG, the only fields that are preserved are copyright, location, and the creation date.
• Works well with some well known Gallery Plugins.
• Allows for Bulk Optimisation of images already in your media folder.
• Offers a built-in CDN called ExactDN with a dynamic resizing and your whole site will be delivered via the CDN. This is on a 9$ monthly subscription but with a 400GB bandwidth cap.
• Comes with a Cloud and Non-Cloud version.

WP Retina x2 Image Plugin

Why you need this plugin is difficult to explain in a few paragraphs. But you do need it.

It’s Freemium. At the very least use the free version.

Conclusion

I realise this a big bit of meat to chew if you are new to all of this.

But it’s vital to serve images as quickly as possible as Google is now making page loading speed as one of the major factors affecting your ranking in Search Engine Result Pages (SERP).

Even, if you don’t care about Search Engine Optimisation. No one is going to linger on your site if it takes too long to download.

Even given the reasons above, and you still don’t care. Why bother having a website at all?

Video on Image Optimising Plugins