Retina Images

Retina Images is very similar to adaptive images created by Matt Wilcox, however where adaptive images loads a larger version of an image if a larger device is detected, Retina Images loads a larger image if the pixel density of the device is greater than 1.

Retina Images serves different images based on the device being used by the viewer. Once setup on your website (very simple!) all you have to do is create a high-res version of each image you would like optimised for retina screens and all the work is done for you. You don’t even need to change any  <img />  tags (providing they have a height or width).

How it Works

1. When the page loads on the viewers device, a cookie holding the  devicePixelRatio  is set by either JavaScript or CSS (if JS is disabled).
2. When an image is requested by the server, the  .htaccess  file tells  retinaimages.php  to serve the image instead.
3. retinaimages.php  then checks for the following conditions:
   • A cookie holding  devicePixelRatio  exists.
   • The value set in the cookie is greater than 1.
   • A high-res version of the image exists.
4. If any of the above are false, it will send the regular image. Otherwise, the high-res image is sent in its place.

Installation & Examples

Visit http://retina-images.complexcompulsions.com for installation instructions and a set of demonstrations.

Benfits

• Only one image is downloaded by the viewer.
• All standard raster images (.jpg, .png, .gif & .bmp) are able to be served as high-res.
• Fallback to regular image if high-res image isn’t available.
• Fallback to regular image if JavaScript and CSS or Cookies are disabled.

Drawbacks

• <img>  tags must have either a width or height attribute specified.
• CSS background images must have a background-size property. See CSS Images for details.