Why should we optimise photographs for WordPress? Firstly, no one likes a slow-loading site. But more importantly, Google definitely does not like a slow loading site.
A page that loads fast will be given a higher ranking in the SERP (Search Engine Result Pages) all other things being equal.
Page loading speed comes under the umbrella of Usability. A slow-loading page will be a negative signal for Usability, which in turn will be a negative ranking for search.
Heads-up, this article will be only dealing with JPEG compression as that is the de-facto format for Photographs.
Whilst I’m here JPG and JPEG are one and the same. But officially JPEG (Joint Photographic Experts Group) is more correct.
Never use PNG for photos – it works – but the file size will be huge compared to JPG.
Check out my Video on Photo Optimisation
Summary of the Image Optimising methods for WordPress
No WordPress Plugin Method.
- Get the Pixels dimensions right. Going above 2000 pixels longest edge will give no benefit, and lead to large file sizes in bytes.
- Export your image in your favourite photo editing software. Going above 80 JPG quality is pointless. For me, the average JPEG quality is around 40. Always experiment, every photo is different. Stay below 500kB in file size if you can.
- Go to the Squoosh App on your favourite browser and compress the image even more. There are other web-based alternatives to Squoosh, but they are not as good IMO. And there are also standalone apps for both Windows & Mac.
- Upload your image to the WordPress or the web.
WordPress Image Optimising Plugin Method
- Same as No. 1 above, Get the pixel dimensions right.
- Same as No. 2 above, Export at lowest possible JPEg quality.
- Purchase a WordPress plugin like EWWW Image Optimizer or Short Pixel Image Optimizer There are others but these are the best IMO.
- No money? An excellent free alternative is reSmush.it
- Upload to WordPress.
One More Thing – Aspect Ratio
If you are planning to use a full-screen hero image, or a full-screen slider ensure the image or images look good on all devices. Keep the subject in the centre of the image, as cropping will take place especially on mobile devices.
The image on my front page has been cropped so that on mobile the sun and pier structure are still in the viewport on mobile devices in both portrait and landscape mode.
Bottom Line
- Keep the longest edge of the image below 2000 pixels.
- Export at 47-53 JPEG quality is fine for most images.
- No photos above 500kB in file size if you can possibly avoid it.
- Further compress your image with lossy, or lossless compression with either a WordPress plugin, Web App, or Standalone App.
WordPress Image Specifics
For everyone image you upload to WordPress, a further four other smaller (in pixel dimensions) sizes are created with the same aspect ratio.
WordPress will never create an image larger than original image in pixel dimensions. The original image is referred to as “Full Size”. You can check out your Large size dimensions via Settings>Media.
WordPress also does its own compression method using ImageMagick compression on the other images it creates using 82 per cent quality. Your original image is called the “Full-Sized Image” and will not be compressed.
This 82 per cent ImageMagick quality bears no relationship to let’s say Lightroom’s JPEG quality of 82. It’s important to understand that there are many different JPEG compression methods.
ImageMagick is apparently a very crude compression method.
WordPress Default Image Dimensions
These settings will vary depending on what version of WordPress you are using.
- Thumbnail size (150×150)
- Medium size (W 300 max x H 300 max)
- Medium Large (not seen in the settings)
- Large size (W 2000 max x H 2000 max)
- Full size (the original size of the image).
So, we will have normally four images created by WordPress. I say normally as we should not forget that WordPress will never create an image larger than your original (full size) image.
On top of the images that WordPress creates, our themes and plugins usually create even more sizes on top of WordPress’s normal four.
Also, themes and plugins usually create even more pixel dimension sizes on top of WordPress’s normal four.
For every one full-sized image on MY SITE, there are 10 others at smaller pixel dimensions. Some WordPress installations will have more some less.
Example of how many images are created from one image upload in WordPress
This is currently the number of images that get created for every one image I upload.
So, if you are using a Freemium Image Optimising Plugin that allows for 100 images optimised for free, be prepared to only optimise a fraction of what you expect if you are not aware of the way WordPress handles images.
Get JPG Quality Right on Export
Before we go to the methods, it’s important to that you always output your JPEG images at the lowest acceptable (to you) JPEG quality.
Finding the right quality setting is an eyeball exercise. Experiment with different quality settings.
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 – it takes time
Outputting at anything above 84 JPEG quality is counter-productive when your output medium is a screen. Jumping from 84 to 100 quality will increase the file size in bytes significantly, and show very little discernible improvement in image quality.
The 0-100 JPEG Quality Scale Is Not Accurate
The actual JPEG quality scale is 0-12. This 0-12 method is used when you try and save an image in Photoshop as a JPEG as opposed to exporting it.
So to map 0-12 to 0-100 the JPEG quality ranges are as follows:
- 0-7
- 8-15
- 16-23
- 24-30
- 31-38
- 39-46
- 47-53
- 54-61
- 62-69
- 70-76
- 77-84
- 85-92
- 93-100
When you go out from Export As in Photoshop you have no choice but to use deciles, i.e. 10, 20, 30 etc.
In Lightroom, there’s no point in lowering JPEG quality to 93 from 100 for instance, as you are not going to reduce the file size or change the quality of the JPEG.
Why Is Image Editing Software compression not enough?
For example, if I exported at let’s say 31 JPG quality from Photoshop 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 often it’s just using a different compression method to Adobe’s can deliver big savings.
So, why does image editing software not remove this data? I don’t know is the honest answer.
Online (WordPress Plugin) 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 in bytes 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 Jeffrey Friedl’s JPEG Quality Tester in Lightroom generated the infographic below.
Notice the significant rise in file size between a 77-84 quality setting and 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 JPEG Quality Tester – Lightroom Plugin
The JPEG quality you choose is personal and arbitrary. Don’t be frightened of having a small amount of posterization in the sky. Make the file size in bytes the deciding factor for your image quality selection.
Pixel Dimensions – It’s Your Choice
There’s not much guidance out there for pixel dimensions, I have covered the subject in another post:
Given the same image exported at two different pixel dimensions but at the same JPEG quality — the image with smaller pixel dimensions will have a smaller file size in bytes.
Deciding on your pixel dimensions for your photos is up to you. I export my photos at 1600 pixels on the longest edge. Some will say 1600 px is too large.
The decision about pixel dimensions should not be arbitrary. Check what pixel dimensions your gallery photos need to be, and stick to that size — at least on the longest edge.
So, if I chose 1900 pixels on the longest edge for my photos.
A web browser on a 5k iMac at full screen (2560 pixels x 1440pixels). The 1900 pixels longest image will be served to the browser.
Remember WordPress will never upscale the pixel dimensions of the original (full size) image.
The result will be that the image will be upscaled by the web browser.
Browser resizing is not ideal especially if it means upscaling an image. But it’s not the end of the world. And 5K iMacs are not that common.
Going below 1200px is not recommended by Google for a photo’s longest edge. As the image might be too small to be seen properly on a Retina screen.
There are various WordPress image optimising plugins some free, some paid for. I’m not going to list a top 10 here. So, I can only write in general terms here.
Try And Get A Plugin With a Content Delivery Network (CDN)
A CDN is a network of computers spread across the planet serving cached pages from a server closest to the person viewing the site. CDN’s use “Edge Technology” which is scalable and able to cope with spikes in demand.
Also, everything in a CDN is stored in a cache. Caches are much faster than data being dynamically downloaded from a hosting (origin) server.
Having a network of servers in different geographical locations worldwide serving a cached version of your website is a very efficient way of delivering web content.
Some Image Optimisation Plugins offer a CDN option not just for your images but all of your content.
Image Optimising plugins even offer a re-sizing service, via the CDN. This resizing is normally done by WordPress. CDN resizing is far more efficient.
Even given the geographical advantages of having servers across the planet. There are other advantages as CDN providers have very powerful servers compared to normal hosting providers.
My Image Optimising Method No WordPress Plugin using Lightroom
- I 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 a web browser. For me, this is by far and away, the best image optimisation tool I’ve seen.
- Upload to WordPress.
My Image Optimising method using a WordPress Plugin and Lightroom
- Run a plugin called JPEG Quality Tester which creates thirteen images at different JPEG quality settings.
- Assess the images to see which of them is a good compromise between quality and file size.
- Upload to the WordPress
- My Image Optimising plugin EWWW IO further compresses the images. Serves them from a CDN, and resizes the images on the fly.
- Also, EWWW IO creates WebP images on the fly for browsers that support WebP which is more efficient than JPG on average. If you want to read about WebP check this Wikipedia article about WebP.
Test Your Webpage Image Performance
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 on your webpage and take note about what it says about your image performance.
Another good online web performance service is GTmetrix.
A word about WordPress Caching Plugins
It’s vital that you utilise hosting (origin) server caching if it’s available. Some hosting providers give you a caching for free, some don’t. Even given that your hosting provider has provided caching. The caching can always be improved by using a Caching Plugin like WP Rocket.
If you have problems seeing your webpage updates. It’s sometimes caused by you not manually flushing your caches. So caching though great, can cause you problems with page updates. Having caches all other the place is hard to manage sometimes.
Check Out My Post on Optimising Plugins
You might also like
