brion at pobox
Sep 23, 2012, 7:59 PM
Post #18 of 19
On Thu, Sep 20, 2012 at 12:42 PM, Krinkle <krinklemail [at] gmail> wrote:
Re: Initial stab at responsive images for high-density displays
[In reply to]
> 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
> 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
> 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
> implemented in some browser we could also opt to keep it without
> 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
> 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:
Patch in gerrit:
If it detects that the browser supports the 'srcset' attribute natively on
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).
Wikitech-l mailing list
Wikitech-l [at] lists