Srcset attribute may load larger images on mobile than desktop

[jidanni (Dan Jacobson)]

File:President Trump Travels to Arizona (50040937841).jpg

Did anybody notice something funny as the above preview loaded onto your cellphone screen?

Why was the image taking so agonizingly long to finally fill in the entire preview square?

That’s because it’s a very large image!

So why does a very large image need to be gobbling up the user’s data plan, taking so long when an itsy bitsy preview would have shown up before you would have even noticed it?

No I’m not exactly sure who to blame.

No. It’s not a bug. The image gets there sooner or later. I’m just saying it’s bad User Experience. The user thinks nobody cares about his data plan, and the page doesn’t finish loading as fast as other pages.

[Stephen]

I didn’t really notice the loading time, which suggests it’s your browser or network.

First time from a different device:

That one was Chrome on iOS

[jidanni (Dan Jacobson)]

Not so fast. You, in your Ivory Tower in your first world country would never know the difference. But me in my non Ivory tower, in my non first world country, notice the difference very much!

Use Developer Tools, set Country to second or third world, , turn off the cache, and reload the page.

[Stephen]

So your complaint is with your ISP and their peering?

To be clear the original image is 3.4mb, that thumbnail is served from Cloudfront, is 690x460 and weighs in at 164Kb.

Either way, what are you proposing? That cloudfront makes for a bad CDN for users in your region? That Discourse didn’t download and create the optimized images quickly enough?

[jidanni (Dan Jacobson)]

All I know is those dimensions are larger than the entire cell phone screen itself!

[Moin]

@jidanni

those dimensions are larger than the entire cell phone screen

I have a small smartphone (4.6 inch | 720 x 1.280 pixel). My screen is not smaller that the thumbnail. How small is your screen?

@Stephen

that thumbnail is served from Cloudfront, is 690x460 and weighs in at 164Kb.

[RGJ (Richard - Communiteq)]

@jidanni

The user thinks nobody cares about his data plan

In your non ivory tower country where data is 8x cheaper than in the USA and still 2.5 times cheaper than in Europe? (source) or do you mean in your non ivory tower country with the fastest broadband internet in the world (source) ? Or maybe you meant your non ivory tower country that for mobile data still ranks 28th, way above many first world countries? (source)

Sounds like you just need a bigger phone.

[Stephen]

Judging by previous posts Jidanni has a Galaxy A13 5G and a Zenfone 3:

Galaxy A13 5G: 6.5”, 1600 x 720
Asus Zenfone 3: 5.5”, 1920 x 1080

As the optimized thumbnail is 690x460, and it’s dimensions are further restricted by the onebox, it isn’t bigger than their screen. They do use browser scaling though, so who knows

[Canapin (Coin-coin le Canapin)]

Something may be fishy here.

On desktop view, the onebox loads a 690x460px, 160 KB picture, whereas on mobile it loads a 1380x920, 500 KB picture.

I move the topic to Contribute > Bug. It seems like a bug to me, maybe it will be recategorized later

[Arkshine]

I may be wrong, but I think it makes sense.
If you look at the HTML srcset, the following images are served based on the device pixel ratio (x1, x1,5, x2).

https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_690x460.jpeg,
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1035x690.jpeg 1.5x, 
https://...2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1380x920.jpeg 2x

Usually, mobile has an x2 ratio (or more) because they have a higher pixel density.
So you would want to serve images with higher resolution.

Device Pixel Ratio

Device Pixel Ratio(DPR) is a number given by device manufacturers and it’s used for HiDPI(High Dots Per Inch) or Retina(Apple’s trademark) displays, which are part of modern smartphones, tablets and even some laptops and monitors.
DPR is in direct correlation with pixel density of the display, the higher the density the greater the DPR value.

DPR is the ratio between physical(device) pixels and logical(CSS) pixels in either horizontal(width) or vertical(height) direction of a screen.
In other words, DPR is a number used for calculating CSS resolution of the screen. From DPR we can directly see how many actual physical hardware pixels make up one CSS pixel.

Example:
Apple iPhone 12
Resolution in device(physical) pixels: 1170 x 2532
DPR: 3
Width: 1170/3 = 390, Height: 2532/3 = 844
Therefore, resolution in CSS pixels: 390 x 844

Since DPR is 3, in pixel grid: 3(width) x 3(height) = 9; 9 physical pixels are used to form one CSS pixel.

[Lilly (Lillian)]

yea i don’t believe this is a bug. my ipad on mobile view loads higher res photos than my desktop because it can. i could be wrong, but it was my understanding that it’s dependent on device capability, not screen size.

also, i’m still not clear on whether this topic is about the one box thumbnail itself or the actual photo loading when you click the one box link?

[Canapin (Coin-coin le Canapin)]

Good catch.

You likely won’t notice a lower resolution image on smartphones due to their screen size, and I think, in general, they are more likely to have a slower Internet connexion via the mobile network than a home Internet connexion. In this regard, I wouldn’t expect a mobile experience to load a larger image than on a desktop computer.

But scrset dictates which image to load for which pixel ratio.

It’s definitely not a bug, I’ll move it back to Contribute > UX

[jidanni (Dan Jacobson)]

@Lilly

also, i’m still not clear on whether this topic is about the one box thumbnail itself

The thumbnail.

Indeed here we see in the Kiwi browser the Developer Tools results,

Yes, we’re talking at 500 kilobyte thumbnail.
What would Tim Berners-Lee think?

Okay, I did a web search and indeed it’s a reasonable size for a thumbnail – if you are uploading it to YouTube.

I mean it must be a pretty fantastic hologram 50 dimensional thumbnail or something. Are you sure you couldn’t do the same one about 5000 bytes? Would the user be able to detect any difference? No I’m not blaming anybody for the energy crisis or slowing down the web. I just think with the destination being a small cellphone something could be done better.
I mean there has to be some point where just adding more bytes, no matter what cellphone sized device they have, won’t make any difference for human beings unless they have eagle eyes but they’re not eagles they’re humans.

[sam (Sam Saffron)]

I agree something is off here for sure … that image is way too big. Our onebox implementation is asking for a supersized image when a much smaller one would do.

We will have a look over the next month or so.

[blake (Blake Erickson)]

This PR has just been merged that addresses the onebox thumbnail size issue specifically for Wikimedia links.

https://github.com/discourse/discourse/pull/22620

And here is a Wikimedia link to test it out:

File:09232jfSaint Paul Chapel Novitiate Sindalan City of San Fernando, Pampangafvf 16.jpg

A more general fix applicable to all onebox thumbnail sizes will still need to be developed.

[blake (Blake Erickson)]

A more general fix for all oneboxes has been created:

https://github.com/discourse/discourse/pull/22621

For testing I used articles from this non-wikimedia site: Read the latest Great Reads stories from car lovers like you - Hagerty Media as they had fairly large images to onebox.

Before:

After:

Before this change onebox images were around 400kb. After my change they are around 100kb.

Here is a onebox example which is using the reduced thumbnail size

https://www.hagerty.com/media/car-profiles/driving-the-prodrive-p25-brought-out-my-inner-car-crazy-kid/