On Thu, Sep 20, 2012 at 12:42 PM, Krinkle krinklemail@gmail.com wrote:
I suggest we built-upon or write or own module further and integrate the "lazy-load" principle. In other words, on document ready fix the images above the fold, which may or may not have started downloading yet.
Then cancel the rest and set those appropriately just before they come into view. That saves bandwidth in general (by not loading images when they are not visible), and makes sure to download the right image based on the environment at that point in time.
Hmm... there are problems with this such as printing compatibility, but this will also be combated in the future (and on mobile) with collapsible sections and such. Worth considering...
When a standard for srcset (or whatever it will be called) is ready and actually implemented in some browser we could also opt to keep it without javascript.
Assuming plans won't get worse, the standard will include a natural fallback by storing the 1-0 ratio image in the src attribute. Which is what we'd want on older browsers/devices anyway.
I've updated the patch to use the 'srcset' attribute as defined in the current HTML 5 working group version, only using the density options and not the width/height options: http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content...
Patch in gerrit: https://gerrit.wikimedia.org/r/#/c/24115/ (core) https://gerrit.wikimedia.org/r/#/c/24147/ (MobileFrontend)
If it detects that the browser supports the 'srcset' attribute natively on img elements, the image replacement JavaScript code will be skipped -- in theory this should make us future-proof, assuming that the standard doesn't change and browsers implement it as written. :)
I've also extended the density detection to support IE 9/10 (only tested 10) using media queries to check the screen resolution in DPI and returning a density approximation of one of [1, 1.5, 2] -- the densities we're supporting so far.
This makes articles look a lot nicer on a Windows 8 tablet device (where default Metro IE viewport settings give us a 1.5 ratio on a 1366x768 tablet or 2.0 on a 1920x1080 tablet), as well as on desktop IE on a high-resolution screen when the desktop zoom level has been bumped up to 150% or 200%.
1.5 also covers lots of Android and Windows Phone mobile devices, including the Nexus 7 tablet and the upcoming Kindle Fire 7" HD and 8.9" HD tablets.
Other browsers report the ratio directly in window.devicePixelRatio: Safari, Chrome, Android stock browser, Opera, and in theory current nightlies of Firefox on Android (untested).
-- brion