Page Speed Optimised Images

[DJ]

Hi,

I've run PSI and been given a list of images to optimise. Google gives you the option to download the resized images which I've used, and then re-uploaded them (with a different file name) and re-run PSI - however it's still showing all the same images:

• Compressing …res/1/kookaburra-background-homepage.jpg could save 319.5KiB (61% reduction). - however the image Google supplied is only 197kb. It displays the amended file name so I know the change has been made. 

It's a Magento website and I'm not a developer, changing images/backgrounds/banners is about the length of my expertise, just curious as to whether it's Pagespeed that's not working correctly or whether the website is doing something to somehow increase the file size.

Many thanks. 

[Carlos Lizaga Anadon]

Hi,

We cannot help much without an URL.

Best,
Carlos.

[DJ]

Sorry, www.3dsports.co.uk 

[Carlos Lizaga Anadon]

Hi,

<div class="wrapper" style="background-image: url('https://www.3dsports.co.uk/media/wysiwyg/backgroundimage/stores/1/kookaburra-background-homepage.jpg'); ?>">

1. Accept-Ranges:
   bytes
2. Cache-Control:
   max-age=31536000
3. Connection:
   Keep-Alive
4. Content-Length:
   529845
5. Content-Type:
   image/jpeg
6. Date:
   Wed, 13 Sep 2017 13:40:05 GMT
7. Expires:
   Thu, 13 Sep 2018 13:40:05 GMT
8. Keep-Alive:
   timeout=15, max=100
9. Last-Modified:
   Mon, 11 Sep 2017 09:54:26 GMT
10. Server:
    Apache

518 KB looks like uncompressed resource.

I just downloaded the image and ran both guetzli and webp compression / convert.

Results are the following:

$ guetzli --verbose kookaburra-background-homepage.jpg kookaburra-background-homepage.jpg

$ ls -lh kookaburra-background-homepage.jpg

-rw-r--r--@ 1 carlos.lizaga  xxx\xxx   229K 13 sep 15:44 kookaburra-background-homepage.jpg

$ cwebp kookaburra-background-homepage.jpg -o kookaburra-background-homepage.webp

$ ls -lh kookaburra-background-homepage.webp

-rw-r--r--  1 carlos.lizaga  xxx\xxx    90K 13 sep 15:47 kookaburra-background-homepage.webp

That is basically a +50% reduction in jpg format and -600% reduction in webp.

So yes, it can still be compressed and that is why PSI is showing you the tip.
In what Magento refers, AFAIK it's using directly the resource that you uploaded via wysiwyg, for products it's quite different since Magento rebuilds catalog images to different resolutions in order to show the images in the category view or product view.

Best,
Carlos.

[Rick Steinwand]

I had good results saving jpg as progressive-encoded and uploading them and png's to https://tinypng.com/

[DJ]

Hi,

I've tried using tinypng to reduce the file sizes. As an example, the background image once resized was 116kb. However, I've uploaded this back into Magento but Pagespeed is saying:

Compressing https://www.3dsports.co.uk/…ckgroundimage/stores/1/resized-116kb.jpg could save 241KiB (62% reduction).

How can it be saying a 116kb image can be resized by 241kb?

What I'm trying to work out is; Is Magento adjusting the file size, or is Pagespeed listing it incorrectly? 

[DJ]

It seem's I've stumped everyone! Casual bump for more help I hope. 

[Rick Steinwand]

Here's part of your problem:

The following images are resized in HTML or CSS. Serving scaled images could save 56.1KiB (93% reduction).

• https://www.3dsports.co.uk/media/wysiwyg/GNlogo_1.png is resized in HTML or CSS from 695x826 to 70x83. Serving a scaled image could save 33.5KiB (98% reduction).
• https://www.3dsports.co.uk/media/wysiwyg/Rose_Logo_Black_Clear_BG.png is resized in HTML or CSS from 400x192 to 125x60. Serving a scaled image could save 15.0KiB (90% reduction).
• https://www.3dsports.co.uk/media/wysiwyg/brands/kookaburra-icon.png is resized in HTML or CSS from 140x249 to 40x71. Serving a scaled image could save 2.0KiB (91% reduction).
• https://www.3dsports.co.uk/media/wysiwyg/usps/international-delivery-icon.png is resized in HTML or CSS from 100x100 to 30x30. Serving a scaled image could save 1.3KiB (91% reduction).
• https://www.3dsports.co.uk/media/wysiwyg/brands/adidas-icon.png is resized in HTML or CSS from 140x90 to 55x35. Serving a scaled image could save 1.1KiB (84% reduction).
• https://www.3dsports.co.uk/skin/frontend/star-3d-package/star-3d-theme/images/logo.png is resized in HTML or CSS from 173x113 to 85x113. Serving a scaled image could save 958B (50% reduction).
• https://www.3dsports.co.uk/media/wysiwyg/brands/gunn-and-moore-icon.png is resized in HTML or CSS from 140x72 to 65x33. Serving a scaled image could save 811B (78% reduction).
• https://www.3dsports.co.uk/media/wysiwyg/usps/free-delivery-icon.png is resized in HTML or CSS from 100x100 to 30x30. Serving a scaled image could save 613B (91% reduction).
• https://www.3dsports.co.uk/media/wysiwyg/usps/next-day-delivery-icon.png is resized in HTML or CSS from 100x100 to 30x30. Serving a scaled image could save 568B (91% reduction).
• https://www.3dsports.co.uk/media/wysiwyg/usps/hand-picked-bats-icon.png is resized in HTML or CSS from 100x100 to 30x30. Serving a scaled image could save 340B (91% reduction).

Don't put all your eggs in one basket. These are also very good tools:

https://gtmetrix.com/reports/www.3dsports.co.uk/Hju1YyIR

https://www.webpagetest.org/

The above was from gtmetrix.

BTW, you need to go through your scripts and see what you really need or combine them into less scripst.