Last modified: 2014-02-12 23:45:23 UTC
Loading http://en.m.wikipedia.org/wiki/Union_Square,_San_Francisco shows a very blurry image for "View of Union Square" on a retina display. Tapping through the image detail page shows a high quality image with the same physical dimensions. As Preilly points out ... this is because we load http://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Union_square_san_francisco.jpg/250px-Union_square_san_francisco.jpg while the detail page loads shttp://upload.wikimedia.org/wikipedia/commons/a/a5/Union_square_san_francisco.jpg
Second link should have been http://upload.wikimedia.org/wikipedia/commons/a/a5/Union_square_san_francisco.jpg
This is a tricky problem There are libraries that deal with this http://css-tricks.com/foresight-js/ but adding a library might be overkill for such a thing There are also various techniques we can use to serve the correct images including these: http://24ways.org/2011/adaptive-images-for-responsive-designs http://24ways.org/2011/adaptive-images-for-responsive-designs-again I don't know enough about how we choose the images to serve to comment any further on this... but we must bear in mind that an image loads as soon as it is encountered in markup. I had a little play myself with another idea which was to wrap images in a noscript tag and use some javascript to provide better resolution photos: http://jonrobson.me.uk/wikipedia/adaptive-images.html
*** Bug 35844 has been marked as a duplicate of this bug. ***
*** Bug 32096 has been marked as a duplicate of this bug. ***
Adding tracking bug 32101. Note that this issue affects the desktop site as well these days, with both tablets and laptops existing with 2.0x ratios (Apple's "Retina" iPad and MacBook Pro) and more 1920x1080 Android and Windows tablets and laptops coming soon. I'll see if I can devise a clean way to add a secondary image source or something...
I've got some general info at [[mw:HiDPI_display_support]] which I'll refresh shortly with updated documentation on best practices, etc. Went ahead with a test implementation of responsive images for the desktop site: 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. The same little jQuery plugin could be called from MobileFrontend as well, and should work though I haven't tested that yet.
This patch has evolved a bit since the above, now uses HTML5 'srcset' attribute and does the JS replacement magic only if native srcset support is not found. Also runs on DOM-ready rather than onload, so fewer images should end up with double-loading. Still waiting on full review: https://gerrit.wikimedia.org/r/#/c/24115/ - core https://gerrit.wikimedia.org/r/#/c/24147/ - MobileFrontend Also tweaks for MobileFrontend icons: https://gerrit.wikimedia.org/r/#/c/26570/
All changes have been merged. Marking as fixed.
