On Thu, Sep 20, 2012 at 12:42 PM, Krinkle <[email protected]> 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-1.html#attr-img-srcset 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 _______________________________________________ Wikitech-l mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/wikitech-l
