Instead of using JavaScript to display Retina images, you could implement a server-side Retina image solution. These solutions use JavaScript to determine if the user is on a Retina device and then use PHP to send a high-definition image instead of a normal one. The benefit of using one of these solutions is that the server automatically sends the correct version once the cookie is set, instead of needing to request it from the browser.
There are several open source solutions that have already been written to accomplish this task. In this recipe we will cover one such solution to see how it is implemented.
To get started, download Jeremy Worboys' Retina Images project at http://retina-images.complexcompulsions.com/. For this project to work you'll need a server that is running PHP. If you're using another language you may be able to find a similar script or use Jeremy's code as a reference to create your own solution.
We'll also need an image to test. You can use the myImage.jpg and [email protected] images we used in earlier recipes. If you don't have these images use a large photo at 1400 x 800 pixels for [email protected] and resize to 50 percent for myImage.jpg. Save them both inside the images folder within the /retina/ folder.
Extract the files from the Retina Images project and add
retinaimages.phpand the.htaccessfile to the root directory of your web server. If you already have an existing.htaccessfile you'll want to add the new code to it rather than replacing it.Create a new HTML document called
serverSide.htmlinside the/retina/folder. Inside the<head>tag of our HTML structure we'll add some JavaScript to set a cookie.<head> <script> (function(w){ var dpr=((w.devicePixelRatio===undefined)?1:w.devicePixelRatio); if(!!w.navigator.standalone){ var r=new XMLHttpRequest(); r.open('GET','/retinaimages.php?devicePixelRatio=' + dpr,false); r.send() } else { document.cookie='devicePixelRatio='+dpr+'; path=/' } })(window) </script> </head>Then inside the
<body>tag of our HTML we'll add some CSS in case the user has JavaScript disabled.<body> <noscript> <style id="devicePixelRatio" media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"> #devicePixelRatio { background-image:url("/retinaimages.php?devicePixelRatio=2") } </style> </noscript>Then we'll add an image to test the code with.
<img src="images/myImage.jpg" width="700" height="400" /> </body>
Now you can open this page from your web server on your Retina device to test it out.
Jeremy's code works by detecting the devicePixelRatio in JavaScript to determine if the user has a Retina Display. Then it sets a cookie with this data so that the PHP code can reference it. If the user has JavaScript disabled, the CSS code within the <noscript> tag creates a fallback reference. Make sure this code is above the stylesheets in your page so that any images that they contain are processed correctly after the cookie has been set.
We made sure to set the height and width attribute of the non-Retina image in our HTML <img> tag so that it is sized correctly when our high-definition image is served. You'll need to ensure this is set for all images and that CSS images have a background-size set. Any image you want served in high-definition will need to have the same filename as the original image with the addition of @2x as we've done here. They will also need to be in the same folder so the script can find them.
When the image is requested from the server the .htaccess file we added (or modified) will use the retinaimages.php file instead of serving it directly. This PHP code checks if the cookie for a Retina device is set and that there is an @2x version of the image. If these are both true, the high-definition image will be served. If it is not true, then the regular version is served.