Book Image

Instant Website Optimization for Retina Displays How-to

By : Kyle Larson
Book Image

Instant Website Optimization for Retina Displays How-to

By: Kyle Larson

Overview of this book

Apple launched its line of high-resolution, retina display products with the iPhone 4 and has continued to integrate the technology into its other products. These beautiful displays take computing to a new level with incredibly sharp text and graphics. As other manufacturers add similar displays to their devices, high-resolution graphics will become the new standard for the apps and websites of the future."Instant Website Optimization for Retina Displays How-to" is a comprehensive guide to building a website that will look fantastic on high-resolution displays. Helpful insights and simple instructions walk you through all the various methods of optimizing your site for the latest mobile and desktop devices.This book begins by covering the basics of retina images and dives right into practical advice so you can start improving your website's images. It continues building on the basic techniques with simple recipes covering all the tools you'll need to make an impressive high-resolution website.We will take a look at the techniques for adding retina backgrounds, sprites, border images, and loading large images only when needed to keep your website running fast. We will create a variety of basic shapes and styles using CSS that can be used instead of graphics in your user interface. We'll cover scalable image techniques, including using fonts as icons and implementing Scalable Vector Graphics (SVG), which make your graphics look great on any device.After reading "Instant Website Optimization for Retina Displays How-to" you'll have the techniques to make creating high-definition websites easy. You'll have an arsenal of tools for creating graphics on the web at your disposal, leading to superior websites that are beautiful and fast.
Table of Contents (7 chapters)

Server-side Retina solutions (Become an expert)

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.

Getting ready

To get started, download Jeremy Worboys' Retina Images project at 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.

How to do it...

  1. Extract the files from the Retina Images project and add retinaimages.php and the .htaccess file to the root directory of your web server. If you already have an existing .htaccess file you'll want to add the new code to it rather than replacing it.

  2. Create a new HTML document called serverSide.html inside the /retina/ folder. Inside the <head> tag of our HTML structure we'll add some JavaScript to set a cookie.

      var dpr=((w.devicePixelRatio===undefined)?1:w.devicePixelRatio);
        var r=new XMLHttpRequest();'GET','/retinaimages.php?devicePixelRatio=' + dpr,false);
      } else {
  3. Then inside the <body> tag of our HTML we'll add some CSS in case the user has JavaScript disabled.

      <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 {
  4. Then we'll add an image to test the code with.

      <img src="images/myImage.jpg" width="700" height="400" />
  5. Now you can open this page from your web server on your Retina device to test it out.

How it works...

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.