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)

Scalable Vector Graphics (Become an expert)

Scalable Vector Graphics (SVG) are a great solution for creating high-definition images for your website. SVG images are an XML-based file format that use code to create graphics. Because SVGs are defined in XML they remain sharp at any size you scale them to. Additionally, they can be animated using JavaScript or Synchronized Multimedia Integration Language (SMIL). This provides a wide range of possibilities that aren't available in traditional images.

Vector graphics are best suited to images that are made up of easily definable shapes. These images could include icons, buttons, illustrations, and user-interface elements.

There are two methods to create an SVG. You can code it directly into an SVG or HTML file or you can create it using a compatible graphics editor. This recipe will show you how to create an SVG using both methods and display them in your browser.

Getting ready

To get started we'll need a graphics editor that works with SVG. If you have Adobe Illustrator or CorelDRAW you can use those applications to create an image and save it as an SVG. If you don't have one of these editors, I recommend using the open source editor Inkscape to create your SVG. You can download it for free at

How to do it...

  1. First create a simple vector image within your graphics editor and save the file as vector.svg inside of your /images/ folder within the /retina/ folder.

  2. Then create an HTML document called svg.html inside the /retina/ folder. Inside the basic HTML structure, we'll embed the SVG graphic that we created in our image editor.

    <object data="images/vector.svg" type="image/svg+xml"></object>
  3. Next we'll create a circle and a rectangle using SVG.

    <svg xmlns="" version="1.1">
      <circle cx="100" cy="300" r="100" stroke="black" stroke-width="1" fill="orange" />
      <rect x="300" y="200" width="200" height="200" fill="#009933" />
  4. If you open the page within your browser you'll see the graphics we just added. Try zooming in or resizing the page to see how sharp they remain.

How it works...

The first SVG image that we created in our graphics program generated an XML-based file. If you'd like to, you can open it in your code editor and take a look at it. To add it to our page we used an object element. The object element is supported in all major browsers that display SVG images (Safari, Chrome, Firefox, IE 9+, Opera, and more). The disadvantage of this method is that it doesn't allow scripting in old versions of Internet Explorer.

If you'd like to use scripting with your SVG image you can use the <embed> tag. The embed tag (<embed src="vector.svg" type="image/svg+xml" />) still works with the same set of browsers, but if you're using an HTML4 or XHTML doctype at the beginning of your page it is invalid code. This code is allowed if you are using HTML5. More information on this topic is available at

Next we created some SVG shapes directly in our page. In most cases you'll want to have your SVG stored as a separate file, but this is a good way to see how the code works.

First, we added the SVG element and referenced its specification. Then we created a circle and defined the x-axis center (cx), the y-axis center (cy), the radius (r), stroke, stroke-width, and color (fill). The two axis values are not required, but they will help position the shape on your page.

Next we created a rectangle with some similar properties. The axis values (x and y) are based on the top-left corner of the rectangle unlike the circle, which is based on the center point. Notice that in the rectangle we used a hexadecimal value for the color. You can add colors by name, hex code, or RGB just like in CSS.

There's more...

SVG is not supported in some older browsers, primarily Internet Explorer (below Version 9). If you're concerned about supporting these browsers there are a few solutions available. You could detect support using Modernizr (, use Google Chrome Frame (, or use the Raphael JavaScript Library (