On Tue, 18 Sep 2012 00:31:49 -0700, Brion Vibber brion@pobox.com wrote:
How to load up high-resolution imagery on high-density displays has been an open question for a while; we've wanted this for the mobile web site since the Nexus One and Droid brought 1.5x, and the iPhone 4 brought 2.0x density displays to the mobile world a couple years back.
More recently, tablets and a few laptops are bringing 1.5x and 2.0x density displays too, such as the new Retina iPad and MacBook Pro.
A properly responsive site should be able to detect when it's running on such a display and load higher-density image assets automatically...
Here's my first stab: https://bugzilla.wikimedia.org/show_bug.cgi?id=36198#c6 https://gerrit.wikimedia.org/r/#/c/24115/
- adds $wgResponsiveImages setting, defaulting to true, to enable the
feature
- adds jquery.hidpi plugin to check window.devicePixelRatio and replace
images with data-src-1-5 or data-src-2-0 depending on the ratio
- adds mediawiki.hidpi RL script to trigger hidpi loads after main images
load
- renders images from wiki image & thumb links at 1.5x and 2.0x and
includes data-src-1-5 and data-src-2-0 attributes with the targets
HTML5 has a new srcset attribute: http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content...
Maybe we should make our script support that syntax and blissfully await the day that browsers start implementing that part of html.
Note that this is a work in progress. There will be places where this doesn't yet work which output their imgs differently. If moving from a low to high-DPI screen on a MacBook Pro Retina display, you won't see images load until you reload.
Confirmed basic images and thumbs in wikitext appear to work in Safari 6 on MacBook Pro Retina display. (Should work in Chrome as well).
Same code loaded on MobileFrontend display should also work, but have not yet attempted that.
Note this does *not* attempt to use native SVGs, which is another potential tactic for improving display on high-density displays and zoomed windows. This loads higher-resolution raster images, including rasterized SVGs.
There may be loads of bugs; this is midnight hacking code and I make no guarantees of suitability for any purpose. ;)
-- brion