Haven't been here in a while, but this is an interesting question...
Where I currently (and have previously) work(ed), we use(d) two methods after getting the devices dpi with JavaScript's window.devicePixelRatio: -
Method A - Preparing all image at "retina" quality, and performing image scaling/'downsampling' manually or on server then adding all images with JavaScript.
Method B - Pe-defining "retina" images in CSS with @media queries.
The latter's not ideal for a dynamic CMS, while the former's not so great for very large image or most PHP environments.
Also, for progressive enhancements sake, it's better not to add images with JavaScript (especially if they're not interactive galleries, etc).
So, here's a simple implementation idea on the backend/plugin implementation side of things: -
The upload page be updated to accept similarly named files as "standard" and "retina" images.
Example: - cool_picture.png and cool_picture@2.png would be "siblings".
Templates would have to be updated to understand this connection: -
HTML5 templates
<img src="./files/gimgs/photography.jpg" data-ndxz-retina="./files/gimgs/photography@2x.jpg" alt="" />
XHTML/HTML templates
<img src="./files/gimgs/photography.jpg" rel="./files/gimgs/photography@2x.jpg" alt="" />
…and a little client side JavaScript (for brevity): -
$(document).ready(function() {
if (window.devicePixelRatio >= 2) {
retinaImgs = $('body #content .container img[data-ndxz-retina]');
// Prevent downloading images
retinaImgs.removeAttr('src');
retinaImgs.each(function(i) {
$this = $(this);
$this.attr({
// New image
'src': $this.attr('data-ndxz-retina'),
// Keep a reference of non "retina" image
'data-ndxz-image': ($this.attr('data-ndxz-retina')).replace('@2x','')
});
});
}
});
A number of points: -
• The above code hasn't been tested (e.g. no error handling), but could (static or as a plugin/extension to Indexhibit) and there are obvious implementation steps missing
• For non-HTML5 templates/themes (XHTML/HTML ones), "data-ndxz-retina" could be "rel" instead.
• Browsers that don't support retina displays (or JavaScript) don't ever need to worry about all this high-resolution nonsense :-)
• Other tablets/phones with high(er) resolution screens could be supported by adjusting "devicePixelRatio" to something like 1.5~
• I kept a reference to the original image so an option to download or switch between the lower quality image could be presented
Hope this is a helpful addition to the discussion.