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.