Summary
The Offline (Semi-Free) Method.
I say semi-free as the JPEGmini plugin for Lightroom and Photoshop plugin is not free. JPEGmini is an option rather than a necessity though.
- Optimise your image in your favourite photo editing software. Going above 80 JPG quality is pointless. For me, the average JPG quality is around 50. Always experiment, every photo is different. Stay below 500kB JPG output file size if you can.
- There is a plugin for Lightroom and Photoshop called JPEGmini If you export a large number of photos every day this would be ideal. It’s not free though, and not cheap IMO.
- If you’ve not got JPEGmini or any other standalone compression software on your system. Go to the Squoosh App on your favourite browser and compress the image even more. There are web based alternatives to Squoosh, but they are not as good IMO.
- Upload your image to WordPress. Job done.
The Online WordPress Plugin Method
- Same as No. 1 above. Crush as much as you can in the image editing software.
- Purchase a WordPress plugin like EWWW Image Optimizer or Short Pixel Image Optimizer There are others but these are the best IMO.
- Upload to WordPress.
- Job Done.
Why Should you Optimise your images?
Let’s define Optimise
Generally, ‘optimisation’ of images means decreasing the file size without decreasing the quality significantly. This is not definitive but it is an accepted meaning in the web development world.
What Happens If You Don’t Optimise your Images?
- Google will push you down the SERP (Search Engine Results Pages), even if your site is more relevant to the search term.
- People will NOT stay on your site. So you are less likely to convert these users into paying customers.
Google freely admits that if a site is slow, that site will be pushed downwards in SERP. Quite how low you’ll go no one knows outside of Google. Why take the risk.
WordPress Image Specifics
Before I go any further for everyone image you upload, WordPress creates at least four other smaller sizes (with the same aspect ratio). And, it also does its own compression on your images using 82 per cent quality. This 82 per cent bears no relationship to let’s say Lightroom’s JPG quality of 82.
WordPress Default Image Dimensions
- thumbnail size (150×150)
- medium size (300 max x 300 max)
- large size (640 max x 640 max)
- full size (the original size of the image).
Also, themes and plugins usually create even more sizes on top of WordPress’s normal four.
Your original image is known as “Full Size” WordPress will never create any size larger than the full size original.
For every one full-sized image on MY SITE, there are 11 others at smaller sizes. Some WordPress installations will have more than 12 images, some less.
So one image does mean more than one in the WordPress world. So, if you are using an Image Optimising Plugin, be prepared to pay more than you thought.
Firstly Get JPG Quality Right on Export From Your Image Editing Software
Before we go to the methods, the first step no matter what is to get the smallest file size at the lowest acceptable JPG quality setting. Irrespective of what image editing software you are using.
Finding the right quality setting is an eyeball exercise. Experiment with different quality settings. Time spent getting this first step right is crucial to your site being ranked favourably by Google. Why have a website if you don’t want to be found?
Image Optimisation means more effort.
If it looks good at one quality setting, then try using a lower quality until you find that balance between file size and JPG quality. There are no shortcuts.
Don’t Go Above 80 JPG Quality
Outputting at anything above 80 JPEG quality is counter-productive when your output media is a screen. Jumping from 80 to 100 quality will increase the file size significantly, and show very little discernible improvement in image quality.
The Methods
Overview of the Online method using WordPress Plugins
Even if you use an image optimising plugin in WordPress you will still have to go through the process of finding an acceptable JPG quality setting in your image editing program.
Once you’ve exported the image from your image editing software you just upload to WordPress. Then your image optimisation plugin will do the rest.
Overview of the Offline Method
Here we use image editing software and various methods to export the JPG at the lowest possible quality setting that doesn’t compromise quality significantly
Then we utilise other standalone, or web-based applications to compress photos even more than Photoshop, or Lightroom can do alone.
In other words we do it all with our own system, or via web apps.
Why is Image Editing Software JPG compression not enough?
So, if I exported at let’s say 30 JPG quality this should be enough compression, shouldn’t it? No is the answer.
There’s a lot of data still in the file which is not needed. This can be the Metadata like IPTC and EXIF. But this is not all of the extra data which can be removed though.
There is still data in that JPG file that is extraneous to the visual quality of the file or would it have a very little discernible effect on quality.
This extra data is what the image optimisation plugins and other JPG compression software remove.
It’s a very technical subject and most web-developers could not explain this fully unless they studied mathematics to a high level.
So, why does image editing software not remove this data? I don’t know.
At a guess, I reckon there could be a very slight degradation in quality which likes of Adobe don’t want to risk removing this extra data.
Anyway, this is why image optimising plugins and application exist.
Online Optimisation Methods
In Lightroom and in Photoshop. Start at 50, or 40 Quality for JPEG and even drop the quality further until you get the right compromise between quality and file size.
There is a plugin which I use in Lightroom from Jeffrey Friedl which creates 14 images at different JPG quality settings. It’s called the JPEG Quality Tester. This plugin can speed up the decision-making process significantly.
The exponential rise in file size every time you go to a higher JPG quality range is very significant.
For instance, for a 2600 long-edge pixel image which I exported via JPEG Quality Tester in Lightroom generated the infographic below.
Notice the significant rise in file size between a 77-84 quality setting and a 93-100 quality settings. By staying with 77-84 and not using 93-100 we make a 37 per cent saving in file size.
There’s a very good article by Jeffrey Friedl on JPG compression here.
Infographic from Jeffrey Friedl’s Lightroom Plugin
The JPEG quality you choose is arbitrary. Don’t be frightened of having a small amount of posterization in the sky. Make file size the deciding factor for your image quality selection.
People are not stupid, they understand the image they see is a representation of your photo on their screen. And they understand the image is not the pristine 40-megapixel super sharp monster that it is in reality.
I’m starting to favour file size over quality as I now realise in recent years that Google has put slow loading sites as one of their top priorities in recent months.
Meaning Google will slap you down the search engine results if your site doesn’t load reasonably fast.
Plugins for Lightroom & Photoshop
There is a plugin for both Lightroom & Photoshop that can optimise images. And it’s the only plugin I know of that optimises an image both in Lightroom and Photoshop.
It’s called JPEGmini, and It’s good for sites that upload images in the hundreds rather than a handful every day.
Pixel Dimensions – It’s Your Choice
Deciding on your pixel dimensions for your photos is up to you. I export my photos at 2600 pixels on the longest edge. Some will say 2600 px is too large. There’s not much guidance out there for pixel dimensions, to be honest.
Some say 1900 pixels on the longest edge is fine for most devices that will look at your web page.
I use 2600px on the longest edge as I know I’ve covered all devices that might be looking at my images, including my 5K iMac which has a default screen resolution of 2560 x 1440 pixels.
So, if I chose 1900 pixels on longest edge and I had my browser on my 5k iMac at full screen. WordPress will serve up the 1900 pixel wide image, and my browser will do the re-sizing.
Browser resizing is not ideal especially if it upscaling an image.
But in the above scenario with a 1900 pixel wide image on a full screen browser on a 5K Imac is quite a rare scenario. This scenario is probably not worth catering for, especially if requires a larger file size as any increase in pixels dimensions at a given quality would create a larger file size.
Going below 1200px is not recommended by Google for a photo’s longest edge.
There are various plugins some free, some paid for. I’m not going to list a top 10 here. So, I can only write in general terms.
Many Image Optimising plugins work on a cloud basis. Meaning that the plugin takes your photos to their servers and they then compress your images. So do the compression on your server.
Some of this plugins can do more than just compression. Serving your images from a Content Delivery Network and even doing image re-sizing on the fly which WordPress does normally.
By resizing, it’s important to understand that serving up just one full-sized image would mean the browser doing the re-sizing which is not ideal for the quality of your image if the browser is up-sampling your images.
Content Delivery Network (CDN)
A CDN is a network of computers spread across the planet serving your photos and website from a server closest to the person viewing the site. And CDN’s use Edge Technology which is scalable and importantly, everything is stored in a cache. Caches are much, much faster than data dynamically download from a normal server.
So your photos are now being served wholly by the CDN servers, not your hosting servers.
Some Image Optimising plugins even offer a re-sizing service, which is normally done by WordPress.
I mentioned earlier that for every one image you upload, WordPress creates at least four more images at smaller sizes. Normally WordPress would deliver these images based upon the device screen size and ratio viewing.
So even the resizing process will be taken over by the CDN.
Effectively the plugin now does the resizing as well as the compression and serves everything via the CDN.
I use Cloudflare’s free CDN plan, unfortunately, it doesn’t serve the images – only the static things like the CSS.
CDN Is Better Than Normal Hosting Servers
The bottom-line is CDN’s are better than normal hosting providers. Both in terms of their technology used, and speed. Even given the geographical advantages of having servers across the planet. A CDN server actually stores your site or images in a cache similar to a browser cache which means your site will download much faster.
All this, of course, comes at a price $£€.
Caching
There are both browser and server caches. It’s vital that you utilise a caching plugin. Some hosting providers give you a cache service for free.
If you have problems not seeing your updates, on screen, in WordPress, it’s normally caused by you not manually flushing your caches. And that can mean your browser cache. Your server cache. And your CDN cache. Beware
Offline Method
Again, make sure your output JPG quality setting is a compromise between file size and quality.
Always favour a smaller file size over quality.
Most people will understand they are not looking at the final product only a representation of photo optimised for the screen. Don’t panic if there’s a bit posterisation in the sky.
There is one plugin I know of that can be used with both Lightroom and Photoshop – it’s called JPEG mini.
JPEGmini is both a standalone application and a Plugin for Lightroom and Photoshop. It’s not cheap, but if I were to output hundreds of photos a day I might consider buying JPEGmini.
My Lightroom Method
- Run a plugin called JPEG Quality Tester which creates thirteen images at different JPEG quality settings. See link below
- Assess the images to see which of them is a good compromise between quality and file size.
- Go to Squoosh App via my web browser. For me, this is by far and away, the best image optimisation tool I’ve seen.
- Upload to WordPress.
My Photoshop Method
- I have the JPEGmini plugin but I prefer to go down the following route.
- I use file Export/Export As. Starting normally at about 50 quality.
- If it looks good at 50 quality, maybe drop it to 40 quality.
- Go to Squoosh to shrink your photo file size even more
- Upload to WordPress
Once you’ve added images to a page or post. Go to Google Chrome and download from the Chrome Store, the Lighthouse extension from the Google Web Development team.
Run the extension and take note about what it says about your image performance.
Bottom Line
No photos above 500kB if you can possibly avoid it.
Final Word
Always consider the aspect ratio of your image. Think to yourself how will this image will look on a mobile phone in Landscape Mode. image.
With Galleries and normal pages this won’t be a massive issue. As galleries are geared to resizing the image to fit into a window usually smaller than the Viewport. But, if you are planning to use a full-screen hero image, or a full-screen slider make sure the image works on all devices.
YouTube Video on Image Optimisation
Leave a reply