Initial stab at responsive images for screen densities.

Authored by brion.


Initial stab at responsive images for screen densities.

  • adds $wgResponsiveImages setting, defaulting to true, to enable the feature
  • adds 'srcset' attribute with 1.5x and 2x URLs to image links and image thumbs
  • adds jquery.hidpi plugin to check pixel density and implement partial 'srcset' polyfill
    • $.devicePixelRatio() returns window.devicePixelRatio, with compat fallback for IE 10
    • $().hidpi() performs a 'srcset' polyfill for browsers with no native 'srcset' support
  • adds mediawiki.hidpi RL script to trigger hidpi loads after main images load

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, Chrome 21, Firefox 18 nightly on MacBook Pro Retina display, and IE 10 in Windows 8 at 150% zoom, 200% zoom, and 140% and 180%-ratio Metro tablet sizes.

Internally this is still a bit of a hack; Linker::makeImageLink and Linker::makeThumbLink explicitly ask for 1.5x and 2x scaled versions and insert their URLs, if different, into the original thumbnail object which (in default handler) outputs the srcset. This means that a number of places that handle images differently won't see the higher-resolution versions, such as <gallery> and the large thumbnail on the File: description page.

At some point we may wish to redo some of how the MediaHandler stuff works so that requesting a single thumbnail automatically produces the extra sizes in all circumstances. We might also consider outputting a 'srcset' or multiple src sizes in 'imageinfo' API requests, which would make ApiForeignRepo/InstantCommons more efficient. (Currently it has to make three requests for each image to get the three sizes.)

Change-Id: Id80ebd07a1a9f401a2c2bfeb21aae987e5aa863b