page insights not using mobile images for mobile score, and frustration with image optimization in general

[Emily]

Problem 1

When I run a test on my webpage using Page Insights, it is not using my mobile optimized images to produce the mobile score, and thus, telling me I need to further optimize my images. My image code.

<img width="800" height="686" src="https://www.example.com/wp-content/uploads/t11.jpg" class="attachment-large size-large wp-post-image" alt="" srcset="https://www.example.com/wp-content/uploads/t11.jpg 800w, https://www.example.com/wp-content/uploads/t11-150x129.jpg 150w, https://www.example.com/wp-content/uploads/t11-350x300.jpg 350w, https://www.example.com/wp-content/uploads/t11-768x659.jpg 768w" sizes="(max-width: 800px) 100vw, 800px">

One would think that page insights supports srcset but apparently this is not the case??? Quite frustrating to get a low score on mobile when I have fully optimized images for various sizes of mobile devices. I've tested my webpage(s) on Chrome, Firefox, and IE on Win 8 using Web Dev tools and my webpage is serving up mobile images properly when in mobile mode. Additionally, I tested my webpage on Safari using my iPad and iPhone, and again, the mobile images are served up properly.

Why is page insights not using my mobile images? Do I need to change add HTML5's picture tag, as this thread seems to suggest? Frustrating to get the 'optimize your images' note on Page Insight for mobile score when the tool is grabbing the using the wrong images. FYI, it's always using the failsafe image, which is also my larger image. Can you please advise. 

Problem 2

Further frustrating is that even on desktop score, Page Insights is telling me I need to compress my images further. Oh sure, page insights kindly offers a download link for optimized images, but I have 1000's of images on my website on 1000's of pages.

Note, I'm aware on December 12, 2016, Google changed image optimization library for Page Insights to use mod_pagespeed instead. This is another headache as TinyPNG and similar image compression sources are no longer adequate to satisfy the Page Insights Tool (it would seem. Even for desktop mode where Page Insights is actually using the correct image for analyzing, I get the 'optimize your images' notes. I have 1000's of images on my website so it's been a big headache.

What would be the proper workflow for compressing images before uploading to my website, in order to satisfy Page Insights? This would be amazing if Google would tell us. Where is the free tool from google where I can bulk upload all of my images for compression, and then download them before I upload to my website?

Note. Website is WP on NGINX.

Thank you.

[Rick Steinwand]

Try using a <picture> element instead.

<picture><source type=image/webp media="(min-width:1441px)" srcset="/images/slider2/Welcome_1700.webp 1700w">
   <source type=image/webp media="(min-width:1281px)" srcset="/images/slider2/Welcome_1440.webp 1440w">
   <source type=image/webp media="(min-width:1025px)" srcset="/images/slider2/Welcome_1280.webp 1280w">
   <source type=image/webp media="(min-width:801px)" srcset="/images/slider2/Welcome_1024.webp 1024w">
   <source type=image/webp media="(min-width:401px)" srcset="/images/slider2/Welcome_800.webp 800w">
   <source type=image/webp srcset="/images/slider2/Welcome_400.webp 400w">
   <source media="(min-width:1441px)" srcset="/images/slider2/Welcome_1700.jpg 1700w">
   <source media="(min-width:1281px)" srcset="/images/slider2/Welcome_1440.jpg 1440w">
   <source media="(min-width:1025px)" srcset="/images/slider2/Welcome_1280.jpg 1280w">
   <source media="(min-width:801px)" srcset="/images/slider2/Welcome_1024.jpg 1024w">
   <source media="(min-width:401px)" srcset="/images/slider2/Welcome_800.jpg 800w">
   <source srcset="/images/slider2/Welcome_400.jpg 400w">
   <img src="/images/slider2/Welcome_1700.jpg" alt="Welcome Video" width=1700 height=398>
</picture>

[Rick Steinwand]

Problem#2:

I've had great luck saving my jpgs as progressive encoding and upload them and pngs to https://tinypng.com/

[Rick Steinwand]

Did you read mine? = )

SAVE THEM AS PROGRESSIVE FIRST.

[Emily]

Did you actually read any of my post? Just curious.

I've seen that you post the TinyPNG answer to nearly every post regarding image optimization. I already stated in my post that I use TinyPNG so your suggestion is unhelpful.

Additionally, I clearly referenced another forum post regarding  <picture> tag question. Just saying 'use picture tags' doesn't really answer my questions.

Thanks for your time though. Perhaps a google engineer can chime in on my questions.

[Rick Steinwand]

To be honest I found it wordy and hard to follow so skimmed it. Nice use of language, just too much of it.

The <picture> code I posted works great. Never was a fan of <img srcset> and found <picture> easier to use. I didn't just say "use picture tags", I posted a working mobile example, including webp code, which you won't find everywhere. It took me awhile to figure it out and there were few good examples out there and none for what I wanted. Obviously a lot more work than what you'll want to use for every image on your site tho.

Last I checked, my home page with that banner (8 slides, 96 images of varying resolutions) scored 99% for mobile and 98% for desktop and loads in in less than 2 seconds. I'm being penalized for Google scripts, which I didn't think worth messing with. 

I optimized my slider images using progressive encoding last year and it survived the image change Google created several months ago.

Good luck finding a Google Engineer to show up here. Once in awhile one from mod-pagespeed will show up but for the most part it's volunteers. Oh they DO monitor it and if you get an error, they'll probably fix it, but usually no replies to posts.

I did chuckle when I read your "just curious" statement. I had one guy tell me, "thanks dad!". I prefer your version.

[Emily]

Thank you for your reply. I agree, it was wordy. But every time I try to go short, everyone comes back with 'we need this information to help you' and 'did you look here' and ... so I was trying to provide as much info as possible.

Ran two image tests ...

Photoshop - Progressive vs. Optimized

TEST 1

Photoshop > Save for Web > (JPG quality = 85, Progressive)

20-pro.jpg

File size before TinyPNG - 291.1kb

File size after TinyPNG - 204.6kb

Results from page insights:

Compressing https://www.example.com/wp-content/uploads/20-pro.jpg could save 59.6KiB (30% reduction).

21-pro.jpg

File size before TinyPNG - 207.7kb

File size after TinyPNG - 61.9kb

Compressing https://www.example.com/wp-content/uploads/21-pro.jpg could save 98.8KiB (49% reduction).

TEST 2

Photoshop > Save for Web > (JPG quality = 85, Optimized)

20-opt.jpg

File size before TinyPNG - 281.4kb

File size after TinyPNG - 204.6kb

Results from page insights:

Compressing https://www.example.com/wp-content/uploads/20-opt.jpg could save 59.6KiB (30% reduction).

21-opt.jpg

File size before TinyPNG - 211.6kb

File size after TinyPNG - 61.9kb

Results from page insights:

Compressing https://www.example.com/wp-content/uploads/21-opt.jpg could save 102.6KiB (50% reduction).

****

Note the file sizes for 20-opt.jpg and 20-pro.jpg are exact same after TinyPNG compression. And the same result occurred with the other jpgs I tested. So it would appear from this part of the test it absolutely does not matter whether its optimized or progressive out of Photoshop, at least in the eyes of TinyPNG. I'm curious if you've also tested this with similar results.

Although, in 21-pro vs 21-opt, there was a slight advantage when to using the progressive version, when analyzed by pagespeed insights, but less than 4kb saved feels insignificant. 

However, the problem remains is that page insights is still suggesting (for desktop score) an incredible amount of compression (save 50% !).

I tried the same test using lower JPG quality settings and the problem remains that page insights still suggests further compression, although not as much as the quality 85, which makes sense for this having a linear relationship.

Thanks. 

[Rick Steinwand]

I think a better test would be optimizing a simple image that doesn't use srcset or <picture>, with a mobile friendly size not associated with a banner.

[Emily]

No idea what you're talking about except that it makes no sense. Wordpress has been using srcset since 4.4 was released in 2015 and thus, millions of websites around the world use srcset, including my own. Testing some setup I have no intention of using is a waste of time, but thanks for the suggestion.

Also, you never stated whether you've actually tested the progressive vs. optimized. You mention on all of your posts here to use progressive with TinyPNG and yet I find it makes no significant difference at all in the final compressed image that gets served up online. Thanks for trying to help but I'll head over to stack exchange for a more thorough answer from actual devs.