Downloads multiple images
michrome opened this issue · 4 comments
A word of warning...
One strong reason to use srcset is to reduce the downloading of large images on mobile devices.
A major issue with this solution is that it downloads the image defined in src as well as an additional image defined in srcset. This effectively increases the amount of downloading a mobile device has to do.
From the project's demo:
Because, the w attribute is defined by whatwg as maximum viewport width you cannot simply put the smaller file into src and larger files into srcset.
On the plus side...
If you're using this polyfill to provide HiDPI users on fast connections with higher quality images this solution is a good solution as long as you're aware that two images will be downloaded.
Hi @michrome,
Everything you have stated is absolutely correct. My understanding of the intent of this library is to implement the SrcSet spec as an interim patch, until official browser support is added.
Unfortunately the only way to prevent all browsers from downloading the 'src' image, would be to not specify one or to specify a dummy placeholder, this would mean sites would no longer function with browser supported SrcSet, and browsers without Javascript would no longer get a default image.
I guess the warning to users of this library is that it should be used for critical images only, logos, brand point, etc. to immediately improve their quality, and not as site-wide mechanism. It will also be useful into the future in mixed client scenarios, until all modern browsers natively support SrcSet or similar.
C.
I have created a pull request so that this issue can be closed. (My first ever pull request! Baby steps…)
One thing we are looking at doing is putting a placeholder item, allowing this polyfill to load the image, and in the case of no javascript we just put a <noscript><img /></noscript> right next to it. Then w/the use of modernizr, we hide the 1 pixel image placeholder with css when nojs is detected.
Then your initial hit is so negligent at less than 1KB (and repeated across all images that use srcset so it's really a one time hit on the site with the right caching) that it doesn't really matter.
And this is how we reduce bandwidth for a mobile site.
But this doesn't necessarily get us to how it would work for browsers that work with srcset. You would have to always have an image in srcset that would replace the default, which I think you would get if you include an image w/out width and height descriptors, but you might have to specify it twice (once for 1x and once for 2x).
@ferventcoder there is no need for a placeholder since in the event of failure, the @src will be loaded as usual. You should always provide a src attribute in your image, with or without srcset support (especially while srcset support is so sparse).
Regarding bandwidth usage, it's true that this approach will always download the src image. We need native browser support to do better, but it's coming!