herb miller

WordPress plugin specialist

  • Home
  • About
    • Online CV
    • Contact
    • Find me
  • Shop
    • Seriously Bonkers – softback book
    • Seriously Bonkers – signed book
    • Seriously Bonkers – PDF
  • Dev env
    • Local development
    • WordPress plugins
    • Server environments
    • Development hardware
    • WAMP configuration
    • Tools and languages
    • What’s not in my development environment?
    • Anything else in your development toolkit?
  • Sites
Image size reduction by quality

Image size reduction by quality

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 10% – 8KB
  • GIMP 45% - 21KB
    GIMP 45% – 21KB
  • GIMP 50% - 22KB
    GIMP 50% – 22KB
  • GIMP 75% - 33KB
    GIMP 75% – 33KB
  • GIMP 100% - 177KB
    GIMP 100% – 177KB
oik-types banners – from 10% to 100% image quality – saved using GIMP – image dimensions 772×250 pixels.

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
    10% – 17KB
  • 45% - 30KB
    45% – 30KB
  • 50% - 34KB
    50% – 34KB
  • 75% - 64KB
    75% – 64KB
  • 100% - 144KB
    100% – 144KB
oik-types banners – from 10% to 100% image quality – saved using PhotoShop – image dimensions 772×250 pixels.

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.

References

  • PageSpeed Insights
  • CSS tricks – using WebP Images
  • oik-types – Custom post types, fields, taxonomies

Categories: PerformanceTags: images

Published: February 5, 2021 | Last updated: February 6, 2021

Products

  • Seriously Bonkers - signed book £8.99 £5.99
  • Seriously Bonkers - PDF £1.00
  • Seriously Bonkers - softback book £8.99 £4.99

Recent Posts

  • Slog-bloat – server performance testing
  • WebP for my iPad
  • Image size reduction by quality
  • Localization of Full Site Editing themes
  • Fizzie – an experimental Full Site Editing theme

Recent Comments

  • Aprende gutenberg #49 - Aprende gutenberg on SB Children block – my first Single Block plugin
  • Richard Cagle on Installing Imagick for PHP 7 on Windows 10
  • WordCamp Birmingham on bucket list – WordCamp Birmingham UK 2015 (#wcbrum)
  • mick on WordPress capabilities: How to restrict Add New while allowing Edit
  • mick on WooCommerce 2.2.4 – Dynamic API Reference

Archives

Categories

WordPress 5.6.1. PHP: 7.3.27

WordPress version: 5.6.1

Gutenberg version: 9.9.3

Tide times from tidetimes.co.uk

Tide Times & Heights for Northney onMonday, 01 March 2021
High Tide:00:52 ( 5.00m )
Low Tide:06:06 ( 0.10m )
High Tide:13:03 ( 5.00m )
Low Tide:18:28 ( -0.10m )

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on 1st March 2021
00:52 - High Tide ( 5.00m )
06:06 - Low Tide ( 0.07m )
13:03 - High Tide ( 4.98m )
18:28 - Low Tide ( -0.12m )

Follow me

  • Home
  • About
  • Blog
  • Contact
  • Find me
  • Privacy notice
  • Sitemap

Site:  herbmiller.me
© Copyright herb miller 2012-2021. All rights reserved.


Website designed and developed by Herb Miller of Bobbing Wide
Proudly powered by WordPress