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.
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)
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.
Apple iPhone 12
Resolution in device(physical) pixels: 1170 x 2532
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.
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?
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 ux
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.