Optimise Photographs for WordPress & The Web

Why should we optimise photographs for WordPress & the web? Firstly, no one likes a slow-loading site. Google definitely does not like a slow loading site.

Google will decrease your SERP (Search Engine Result Page), ranking at the very least if your page takes too long to load.

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

Summary

Offline Free (No WordPress Plugin) Method.

1. Optimise your image in your favourite photo editing software. Going above 80 JPG quality is pointless. For me, the average JPEG quality is around 50. Always experiment, every photo is different. Stay below 500kB in file size.
2. 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.
3. Upload your image to the WordPress or the web.

Online WordPress Plugin Method

1. Same as No. 1 above. Crush as much as you can in the image editing software by lowering the JPEG quality as much as you can get away with.
2. Purchase a WordPress plugin like EWWW Image Optimizer or Short Pixel Image Optimizer There are others but these are the best IMO.
3. A good free alternative is reSmush.it
4. Upload to WordPress.

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 of Image Optimisation in the web development world.

WordPress Image Specifics

For everyone image you upload to WordPress, a further three other smaller (in pixel dimensions) sizes are created with the same aspect ratio. It will never make an image larger than original Full Size image in pixel dimensions. Check out your Large size dimensions via Settings/Media

WordPress also does uses its own compression method (ImageMagick) on the 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 bears no relationship to let’s say Lightroom’s JPEG quality of 82. There are many different JPEG compression methods.

ImageMagick according to those who know is 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)
• large size (W 2000 max x H 2000 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.

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

So, if you are using an Image Optimising Plugin that charges per image, be prepared to pay more than you thought.

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 let’s say Adobe 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 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 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 file size in bytes the deciding factor for your image quality selection.

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.

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 the longest edge and I had my browser on my 5k iMac at full screen (2560px x 1440px). 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 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.

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. But, I will be covering Image Optimising Plugins in more detail soon.

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 Offline (No Plugin) Lightroom Method In Full

• 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 or the web.

My Offline (No Plugin) Photoshop Method In Full

• 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 or the web.

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.

Bottom Line

• No photos above 500kB in file size if you can possibly avoid it.
• 2000 pixels longest edge. There’s no need to go longer.
• 47-53 JPEG quality is fine for most images.

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

One More Thing – Aspect Ratio

Always consider the aspect ratio of your image. Think to yourself how your image will look on a mobile phone in Landscape Mode.

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 and make sure the image or images work on all devices by keeping the subject in the centre of the image, cropping will take place especially on mobile devices.