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 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 _______________________________________________ Wikitech-l mailing list [email protected] https://lists.wikimedia.org/mailman/listinfo/wikitech-l
