Google’s PageSpeed Insights tells me I can improve the performance of my website’s loading by taking the opportunity to Properly size images. For the home page on oik-plugins.com it reckons it can save 1.2 seconds on mobile, and 0.16 seconds on desktop, were I to serve images that are appropriately-sized to save cellular data and improve load time.
For the oik-types banner image ( which it sees at 74.5KiB ) it suggests there’s a potential saving of 48.8 KiB. ie. It could be reduced to 25.7 KiB.
We’ve tried a range of qualities using Photoshop and GIMP. According to the chart below, using GIMP, I can achieve the image file size reduction by saving the image with a quality of 55%. But it looks like I could get away with 45%.
On oik-plugins.co.uk, where I’d already reduced the image to 70% quality (30 KiB), it reckons I can still save 22.7 KiB on Mobile. I assume that’s if I serve a file that’s already no wider than the user’s device.
It also suggests, Serve images in next-gen formats.
Image size by quality – JPEG and WebP
In the chart below I started with the original file ( oik-types-banner-772x250.jpg ) at 100% quality – it was 181157 bytes = 176KB ( where K is 1024 ). My chum Andrew Leonard saved it using Photoshop’s Save for web. I saved it using GIMP’s Export As JPEG image. For the third line I used PHP’s imagewebp() function to save the file in WebP format.
GIMP versions of the images
-
GIMP 10% – 8KB -
GIMP 45% – 21KB -
GIMP 50% – 22KB -
GIMP 75% – 33KB -
GIMP 100% – 177KB
Photoshop versions of the images
The versions saved by Photoshop are slightly larger than those saved by GIMP. On my screen it’s difficult to see the quality degradation, down to 45%.
-
10% – 17KB -
45% – 30KB -
50% – 34KB -
75% – 64KB -
100% – 144KB
Image size reduction by quality
The following chart shows the image sizes for over 100 images when saved with diffent qualities. Each image is a WordPress banner image 772 x 250 pixels.
Looks like I’ll be using 50% quality from now on.
WordPress and WebP format
I didn’t realise it, but GIMP already has support for WebP images. I saved the file in WebP format (extension .webp ) and tried to upload it. Then I discovered that WordPress doesn’t support this format. I found a couple of TRACs referenced in a final reply to a support request asking for WebP support.
- https://core.trac.wordpress.org/ticket/35725 – Add Mime type for WebP
- https://core.trac.wordpress.org/ticket/35726 – Add .webp support to WP_Image_Editor_GD
- https://core.trac.wordpress.org/ticket/43023 – Make Core Image Handling More Extensible
They’re not fun reading. It would appear that the core team are dragging their heels because some browsers don’t yet support WebP format, and some graphics libraries are built without it. I imagine Safari is the main sticking point.
There are plugins that support WebP. I tried WebP-express. My system ground to a halt. I can’t see why, it only took me a few seconds to run the same analysis for WebP image quality as I did for JPEGs. Here you can see the WebP images are smaller.
WebP image quality?
With regards to the quality of WebP images. Since I can’t create a Gallery using WordPress I’ll have to create it using custom HTML. This is the WebP format image with quality 45%. File size: 12,324. Compare this with the original JPEG: 181,157.
7% of the original size.
