What Do WordPress Image Optimisation Plugins Do?
- 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 three, or 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” by WordPress
If your original (full-size) image is smaller than the other sizes listed, it will never upscale an image. WordPress will only create the smaller sizes that are smaller than the original (full-size) image.
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 PPI (Pixels Per Inch). Plus 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 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 a hero image, or slider designed to fill the screen.
Two thousand pixels on the longest edge is acceptable because the 5k iMac scenario with a hero image or full-screen slider is a rarity rather than the norm.
Going forward I intend to use 2000 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 Image Optimising Foundations Right
WordPress Image optimising plugins aside. You should output your images at the lowest JPG quality setting.
Aim for a JPEG quality that is a compromise between file size and image quality.
That takes a bit of work and eyeballing. Start at 50 quality and revise upwards, or downwards till you get an acceptable compromise between quality and file size.
There’s an excellent Lightroom plugin that can output 14 images at differing quality settings. This makes the selection process easier. The plugin can be downloaded below.
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 about JPEG Format (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 image editing 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. Or, 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.
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.
WebP
WebP is an alternative image format developed by Google. It normally produces images that are smaller in byte size. It’s supported by Google Chrome and Microsoft Edge web browsers.
It can be used as a replacement format for any raster image format.
Some image optimising plugins offer to serve WebP images to browsers that support WebP.
To be honest, the jury is out as to whether WebP produces files that are significantly smaller in bytes, and of equivalent quality as their JPG counterparts.
Personally, I do serve up WebP images to browsers that support it.
The DIY offline Image Optimisation 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 WordPress image optimisation plugin, you’d be mad not to use it if you can’t afford the paid for image optimisation plugins.
So don’t create more work for yourself, just use reSmush.it
The Image Optimisation Plugin Method
Totally Free Image Optimisation 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.
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 a Freemium plugin. At the very least use the free version.
I realise this a big bit of meat to chew if you are new to all of this.
WordPress Image Optimisation Plugins, do you need them?
It’s vital to serve images as quickly as possible. 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
You might also like
