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)

Retina background images (Must know)

When creating a website that is optimized for Retina Displays, you'll want to make sure that you are updating all the images on your site so everything looks sharp. In addition to updating your images in HTML, you'll also want to update any background images that you have set in CSS. Background images are often used to create the template that is used throughout a website, so they are critical in optimizing for Retina Displays.

How to do it...

  1. We'll start working with background images by creating two versions of an image just like we did for regular images. If you don't already have a good background texture to use there are a lot of great options at In your graphics editor resize the image to double the size that you'd like a single tile to be and save the file in the /images/ folder within the /retina/ folder as [email protected]. For our example we'll use 250 x 150 pixels. Next, resize the image to 50 percent and save it as myBackground.jpg in the same folder.

  2. Now let's add our background images to a web page to test them out. Create a new HTML document in your editor called backgroundTest.html and save it in the /retina/ folder. First, we'll add our CSS code into the file (it is typically a good idea to create a separate CSS file but for the example we'll add it in our HTML page).

    .box { 
      height: 200px;
      width: 700px;
    .bgRetina { 
      background: url(images/[email protected]) repeat;
      background-size: 250px 150px;
    .bgNormal {
      background: url(images/myBackground.jpg) repeat;
      background-size: 250px 150px;
  3. This CSS code will create a box to display the background within and then apply our image to it. Make sure you enter the correct background-size dimensions for your image (based on the smaller of the two images). Next we'll add the HTML code as follows to our CSS:

    <div class="box bgRetina">Retina</div>
    <div class="box bgNormal">Normal</div>
  4. Now we're ready to test out our Retina background. If you're on a Retina device load the page in your browser, otherwise copy the new files to your server and open them up in your browser. The first background will look much sharper on the Retina Display.

How it works...

The background image example works based on the same concept as creating a normal Retina image. You are filling an area with an image that contains double the amount of pixels needed for a normal display. The background-size property tells the browser what size each tile of the background should be. The same principles apply to all background images, even if they are not a repeating pattern.

There's more...

The background-size CSS property was added in CSS Version 3. This means it is not supported in older browsers such as Internet Explorer 7 and 8. In these browsers the background will be larger than intended, which is still functional but not ideal. To support these browsers, you'll want to only use Retina background images as part of a media query. We will cover this in more detail in the CSS Media Queries recipe.