• 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

    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%.

    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.

    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



    Published:

    Last updated:

    February 6, 2021

Categories

Tide times from tidetimes.org.uk

Tide Times & Heights for Langstone Harbour on
4th December 2023
03:48 High Tide ( 4.09m )
08:48 Low Tide ( 2.03m )
15:46 High Tide ( 3.84m )
21:15 Low Tide ( 1.91m )

Tide times from tidetimes.org.uk

Tide Times & Heights for Northney on
4th December 2023
04:09 High Tide ( 3.96m )
09:06 Low Tide ( 1.86m )
16:13 High Tide ( 3.74m )
21:39 Low Tide ( 1.7m )