-
Posts
-
I’m raising a similar issue as described in this post: https://kriesi.at/support/topic/image-resizing-for-mobile/
Website: http://www.henleyherald.com
On the home page there is a Blog Posts element for Top Stories in a 2/3 column. Styling > Appearance is set for:
• 3 columns
• Choose the image size manually
• Image Size is Portfolio Small (260 x 185 px)In desktop mode, using Dev Tools, Elements shows the img src attribute for each image is the 260 px wide image. Using the Network tab, it is confirmed that the 260 px wide image is being downloaded.
The Lighthouse Performance score on desktop for the home page averages 97-98. Smush is used to compress images on upload. Lighthouse suggests further improvements could be achieved on the Top Story images, e.g. Efficiently encode images – Potential savings of 264 KiB. But I’m certainly not complaining about a score of 97.
Switch Dev Tools to Mobile mode however and something weird happens. The Performance score drops significantly to 68. The improvement suggestion changes to: Properly size images – Potential savings of 401 KiB. The emulator screen size is 400 px wide.
On analysing the Blog Posts via Elements and Network, the images being loaded in responsive mode are now the full size images.
Take the “Hurricanes Blow Away Opposition in Cup Final” story. The img src attribute is: src=https://www.henleyherald.com/wp-content/uploads/2024/05/AFC-Henley-Hurricanes-Oxford-FA-Cup-Final-e1716205297662-260×173.jpg, and in desktop mode this file is loaded, sized at 92.8kb.
When in mobile mode, Dev Tools says the rendered size is the same as desktop (260 x 173 px) and of course the src is as above, but the intrinsic size is now 700 x 467 px and the actual file loaded is
https://www.henleyherald.com/wp-content/uploads/2024/05/AFC-Henley-Hurricanes-Oxford-FA-Cup-Final-e1716205297662-700×467.jpg, file size 509kb.Why is the full size image being loaded in mobile mode? Or is Dev Tools reporting this incorrectly?
How do I get the correct smaller 260 x173 px image loaded instead?
NB. There’s the same problem on the Highlighted News stories. In desktop mode, all the images are loaded as 150 px wide; when in mobile mode, all the images loaded are larger at 260px wide.
The Top Story referenced has been moved off the home page. However you can see the same effect I raise on the “Fitting Farewell Finale for Fawley Hill Vintage Steam Festival” story. The ‘full size’ image loaded on mobile is 700 x 467 px but is only 86kb as opposed to 64kb for the 260 x 173 px image. So whilst the difference in image kb sizes is not as pronounced as the Hurricanes story, the fact remains that a 700 x 467 image is being loaded instead of a 260 x 173 px one.
[The site uses 700 x 467 px images as its main size for the individual stories (posts). An image might be uploaded in a larger size than that; Simple Image Sizes and Smush then create the 700 x 467 size (and others), hence that size might be 500kb or less.]
Hi,
Thank you for your patience, when I check your page as mobile the image src is 260px 153px
the other image sizes are in the srcset, which a available sizes for larger screens, so in this case the correct image size has been picked.
When I test in lighthouse, it only tests the full image size even though the correct image height & width is there 260px 153px
I researched this and found many comments like this, in this thread the lighthouse code serves up to 3x the image size in the test, and looks like they recommend changing it.
So since we can see that the correct image is the src image, this looks like a error in the lighthouse test. The only recommend that I found was to use atag for the test to work correctly, but this would not be effective just for the test. Best regards,
MikeThanks for checking, I think I misinterpreted something in Dev Tools, I can see now that the 260 px wide image is being loaded in mobile.
However your research has identified an issue – not the first I’ve come across – with Lighthouse, so that’s useful to know. What I couldn’t reconcile was the massive increases in First and Largest Contentful Paint times in a mobile Lighthouse test, given that when I load the site on my actual smartphone the pages display super quick. You’ve discovered that what causes this is that Lighthouse tests the full image, not the real smaller image, which is just bizarre. Why Google won’t fix this is crazy given their focus on mobile-first indexing.
Hi,
This is true, I also found that the artificially throttle the scroces to 3g, which is much lower that most users.
Since this is not a theme issue shall we close this thread then?Best regards,
MikeI also read up into this after your reply and just cannot understand Google’s rationale or stance here. Rhetorical question: how are we site owners supposed to try and tune our sites to get good mobile scores on Lighthouse when their tool doesn’t give accurate real-life results. e.g. Lighthouse says a Largest Contentful Paint on mobile of 6.2 secs vs 0.9 sec on desktop when on a real smartphone a new page displays in milli-seconds? Answers on a postcard… ;-)
So yes, close it please.
- The topic ‘Full size images loaded in mobile mode’ is closed to new replies.