Responsive images for high-DPI displays in MediaWiki

I’ve been working on support for natively showing suitable images for high-DPI displays in MediaWiki, starting with basic content images.

On desktops and tablets there’s just a few devices like the Retina MacBook Pro that need this, but in the mobile world there are loads of devices at 1.5x or 2.0x the traditional resolutions.

You can see a live demo of this patch in action on these test articles:

Here are some screenshots from an iPhone 5 simulator showing fragments of the San Francisco Wikipedia article as currently displayed on en.m.wikipedia.org and with my responsive images patch…

These maps are absurdly sharper on the right side:

And this photograph is visibly much sharper on the right, showing detail of the building’s texture and patterns that wasn’t previously visible without clicking through to the detail page:

The current version of the patch uses the ‘srcset’ attribute as defined in the current HTML 5 working group version, only using the density options and not the width/height options. Since browsers don’t yet support this, I also include some JavaScript to check the display density and load the appropriate image from the srcset.

Patch in gerrit:

The current version has been tested with a number of devices and browsers, including:

  • iPhone 3Gs, Safari (low-res 1x)
  • Nexus One, Android browser (medium-res 1.5x)
  • iPod 5th-generation, Safari (high-res 2.0x)
  • Galaxy Nexus, default browser (high-res 2.0x)
  • Galaxy Nexus, Chrome (high-res 2x)
  • Galaxy Nexus, Opera Mobile (high-res 2x)
  • BlackBerry 10 dev alpha, default browser (high-res 2x)

And on a Retina MacBook Pro:

  • Mac OS X, Safari (2x)
  • Mac OS X, Chrome (2x)
  • Windows 8, IE desktop (2x, with desktop zooms set to 200%)
  • Windows 8, IE Metro (2x)

and on an 11″ 1366×768 Windows 8 tablet:

  • Windows 8, IE Metro (1.5x)

Currently unsupported:

  • Opera Mini (we don’t serve any JS)
  • Firefox (can’t yet detect resolution)
  • Windows Phone IE (can’t yet detect resolution)

 

One thought on “Responsive images for high-DPI displays in MediaWiki”

Comments are closed.