Responsive images, browsers, and network speed?

user_1003183 0
Viewed 919

I have an image that at the moment is only one size (600px x 300px), and I use CSS to make sure it responds to viewport widths. Under 600px it's width is 100%, over 600px it's fixed at 600px.

I now want to use:

<img src="" srcset="" sizes="" />

...to implement responsive images with the hope that mobile users can download smaller file-size images.

Very quickly I've run into the "small screen vs network speed" issue.

I can make multiple image sizes available, but the pixel density on some mobiles means that sometimes a mobile would request a much larger image than a desktop. I have two internet connected devices in front of me:

  1. Windows desktop, widescreen monitor, very fast network connection, pixel density x1.
  2. iPhone X, 3G connection, 375px viewport, pixel density x3.

Using srcset and sizes would mean the desktop downloads a 600px image, and the iPhone downloads a 1125px (375 * 3) image.

Question:

Do browsers take network speed into account (would my iPhone on a slow 3G connection select a smaller image from srcset, or would it always us 1125px)..?

I've searched online for an answer, I can't find anything, I'm happy to be pointed in the right direction from a link.

browser image html
1 Answers

I don't think this is yet possible. However, there's a proposal (draft) for a Network Information API from the W3C that is designed to provide a way for scripts to be notified if the connection changes (cellular, WiFi, ethernet, etc).

In the meantime perhaps you can use lazy-loading to load image resources on demand. Doesn't really solve the problem you're describing, but it does alleviate initial network load on from web applications on devices.

Update: Ok, so according to Pete LePage, this is not yet possible:

Last I heard, it does not. It's not out of the question for the future, check http://crbug.com for a feature request, and if there isn't one, file it!

user_37495760
Related