# Srcset attribute may load larger images on mobile than desktop
**URL:** https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039
**Category:** UX
**Tags:** mobile
**Created:** [May 6, 2023, 3:12am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039 "2023-05-06T03:12:51Z")
**Posts on this page:** 17
**Page:** 1
### Author:  [@jidanni](https://meta.discourse.org/u/jidanni)
#### Post date: [May 6, 2023, 3:12am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/1 "2023-05-06T03:12:51Z")
> **[File:President Trump Travels to Arizona (50040937841).jpg](https://commons.wikimedia.org/wiki/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.
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [May 6, 2023, 3:17am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/2 "2023-05-06T03:17:49Z")
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
---
### Author:  [@jidanni](https://meta.discourse.org/u/jidanni)
#### Post date: [May 6, 2023, 3:24am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/3 "2023-05-06T03:24:14Z")
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.
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [May 6, 2023, 3:31am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/4 "2023-05-06T03:31:01Z")
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?
---
### Author:  [@jidanni](https://meta.discourse.org/u/jidanni)
#### Post date: [May 6, 2023, 4:33am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/6 "2023-05-06T04:33:50Z")
All I know is those dimensions are larger than the entire cell phone screen itself!
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [May 6, 2023, 7:57am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/7 "2023-05-06T07:57:48Z")
> [@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.
---
### Author:  [@RGJ](https://meta.discourse.org/u/RGJ)
#### Post date: [May 6, 2023, 8:20am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/8 "2023-05-06T08:20:50Z")
> [@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](https://www.statista.com/chart/17247/the-average-cost-of-mobile-data-in-selected-countries/)) or do you mean in your non ivory tower country with the fastest broadband internet in the world ([source](https://www.statista.com/chart/7246/the-countries-with-the-fastest-internet/)) ? Or maybe you meant your non ivory tower country that for mobile data still ranks 28th, way above many first world countries? ([source](https://www.speedtest.net/global-index))
Sounds like you just need a bigger phone.
---
### Author:  [@Stephen](https://meta.discourse.org/u/Stephen)
#### Post date: [May 6, 2023, 11:27am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/9 "2023-05-06T11:27:33Z")
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 🤷🏻♂️
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [May 6, 2023, 11:43am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/10 "2023-05-06T11:43:19Z")
Something may be fishy here.
On desktop view, the onebox loads a [690x460px, 160 KB picture](https://global.discourse-cdn.com/meta/optimized/4X/2/f/5/2f50d4ad9f5f865b783b02d392de75bdceec01da_2_690x460.jpeg), whereas on mobile it loads a [1380x920, 500 KB](https://global.discourse-cdn.com/meta/optimized/4X/2/f/5/2f50d4ad9f5f865b783b02d392de75bdceec01da_2_1380x920.jpeg) picture. 🤔
I move the topic to #Contribute > Bug. It _seems_ like a bug to me, maybe it will be recategorized later 🙂
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [May 6, 2023, 1:12pm UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/11 "2023-05-06T13:12:16Z")
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).
```html
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.
---
### Author:  [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [May 6, 2023, 1:52pm UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/12 "2023-05-06T13:52:55Z")
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?
---
### Author:  [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [May 6, 2023, 6:24pm UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/13 "2023-05-06T18:24:07Z")
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 🤷
---
### Author:  [@jidanni](https://meta.discourse.org/u/jidanni)
#### Post date: [May 7, 2023, 2:47am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/14 "2023-05-07T02:47:44Z")
> [@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.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [May 8, 2023, 1:42am UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/15 "2023-05-08T01:42:44Z")
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.
---
### Author:  [@blake](https://meta.discourse.org/u/blake)
#### Post date: [July 14, 2023, 8:38pm UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/25 "2023-07-14T20:38:30Z")
This PR has just been merged that addresses the onebox thumbnail size issue specifically for Wikimedia links.
[https://github.com/discourse/discourse/pull/22620](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](https://commons.wikimedia.org/wiki/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.
---
### Author:  [@blake](https://meta.discourse.org/u/blake)
#### Post date: [July 20, 2023, 8:24pm UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/28 "2023-07-20T20:24:58Z")
A more general fix for all oneboxes has been created:
[https://github.com/discourse/discourse/pull/22621](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](https://www.hagerty.com/media/category/great-reads/) 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/](https://www.hagerty.com/media/car-profiles/driving-the-prodrive-p25-brought-out-my-inner-car-crazy-kid/)
---
### Author:  [@blake](https://meta.discourse.org/u/blake)
#### Post date: [July 22, 2023, 2:00pm UTC](https://meta.discourse.org/t/srcset-attribute-may-load-larger-images-on-mobile-than-desktop/264039/29 "2023-07-22T14:00:54Z")
This topic was automatically closed after 41 hours. New replies are no longer allowed.