Apple retina support for images in HTML

Question

On Apple's website it looks like they have support for retina displays. Does it work the same way that it does on iOS with a @2x image?

Answer 1

• Store your images in /img/logo.png (regular version) and /img/[email protected] (retina version)

JS for Head-Tag

var retina = 0;
try {
    retina = Number(window.devicePixelRatio);
} catch(e) {}
retina = (retina > 1) ? 1 : 0;

var dt = new Date();
dt.setTime(dt.getTime()+(30*24*60*60*1000));
document.cookie = [
    '_r=' + retina,
    'expires=' + dt.toGMTString(),
    'path=/img/'
].join(';');

mod_rewrite for images

RewriteCond %{HTTP_COOKIE} _r=1
RewriteCond %{REQUEST_URI} img/
RewriteRule ^(.*)(.gif|.jpg|.png)$ $1@2x$2 [NC,L]