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)

CSS image-set (Become an expert)

In Safari 6 (included in iOS 6) Apple added a new method of adding Retina images to websites. The new image-set specification is an alternative to using media queries that makes formatting easier and allows for potential future benefits. This recipe is only for experimental use, as it will only work in new versions of Chrome and Safari.

The immediate benefit of using image-set is that the two images are listed next to each other in your CSS code, making it easier to read and update. The potential future benefit is that, according to the specification, the browser is able to make the decision about which image should be displayed. Once it is fully implemented in browsers, the browser may choose the lower resolution image in cases where there is a slow connection, or the user could specify which images they prefer.

The image-set specification works with image sprites and background images. This recipe will cover how to use the image-set property to provide the browser with image resolution options for background images.

Getting ready

To get started we'll be using the Retina and standard resolution background images we created in the Retina background images recipe. You'll need a large Retina background pattern and one half its size.

How to do it...

  1. First, we'll create an HTML document called imagesetTest.html inside the /retina/ folder to test our images. Inside of the basic HTML structure, add the CSS code to create a box and backgrounds to apply to it.

    .box {
      height: 200px; 
      width: 700px;
      .background {
      background: url(images/myBackground.jpg);
      background: -webkit-image-set(url(images/myBackground.jpg) 1x, url(images/[email protected]) 2x);
    .backgroundNormal {
      background: url(images/myBackground.jpg);
  2. Then create some div tags in HTML with your two backgrounds to test them out.

    <div class="box backgroundNormal" />
    <div class="box background" />
  3. If you are working on a Retina device (running Safari 6+, Chrome 21+, or another browser with image-set support) you will be able to open this page locally; if not, upload the folder to your web server and open the page on your device. You'll notice that the second background is much sharper than the first.

How it works...

To test out the CSS image-set, we first used a div tag with a set height and width to hold our background image. Then we applied a normal background property with a single image. This was created as a fallback for browsers that do not support the image-set property.

Then we added a second background property with -webkit-image-set() wrapping our two images. We used the -webkit browser prefix because image-set has not been finalized yet. This way we avoid any potential issue that could arise if there are changes to the final specification when it is released.

Within the image-set tag, we add the normal URL structure for both our background images separated by a comma. After each URL we include a value to specify the density of each image, the first being 1x and the Retina image being 2x.

Notice that when using this specification you don't need to include the background-size property that was necessary for other Retina background images.

There's more...

It's very important to keep in mind that the CSS image-set specification has not been finalized yet, and this code will not work on every high-definition device. I felt that it was important to include it here because, once the final version is agreed upon, this could be the preferred method of implementing Retina images in the future. It is recommended only for testing or if you feel that a high percentage of your users have upgraded their browsers and it is fine to allow others to see the standard resolution images.

Speed detection

The image-set specification leaves the choice of which image to display to the browser, which means that a variety of factors including connection speed could be used in the future to make this decision. Currently, connection speed isn't taken into account for any of these Retina solutions, but there are some projects that are experimenting with this approach. If you'd like to experiment with these projects you can check out Nathan Ford's pngy ( or Yahoo's boomerang (