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 border images (Should know)

Border images were introduced in CSS3 and are not widely used yet. This topic has been included in case you'd like to experiment with border images, but be aware that they are not supported in Internet Explorer. To find more about CSS support in various browsers take a look at Border images allow you to wrap a border around an HTML element using CSS and an image instead of the standard dotted, dashed, or solid line border. This can be especially useful when applying a border to a group of images or calling out specific content. This recipe will cover how to turn your border images into high-resolution Retina images.

Getting ready

To get started we'll need to gather a couple of images. First, get a high quality image you'd like to use as a border. It should be a full square and could be a picture frame, torn paper, or some other repeating pattern. For our demo we'll be placing the border on an image, and any photo will work. After you've gathered these two graphics we're ready to build a Retina border image.

How to do it...

  1. First, open the border image you chose in your graphics editor. Just like other Retina images, you'll want the initial graphic to be 2x as large as it will be displayed on screen. Save this image as [email protected] into the /images/ folder that is within the /retina/ folder. Then resize the image to 50 percent and save it as myBorder.png into the same folder.

  2. Next save the photo you've selected into the /images/ folder within the /retina/ folder as myBorderPhoto.jpg. Now we've got all the images ready to start writing our CSS and HTML code.

  3. Create a new HTML document called borderTest.html inside of the /retina/ folder. Add some CSS to create the border.

    .imageBorder {
      border-width: 10px; 
      -webkit-border-image: url(images/myBorder.png) 10 repeat;
      border-image: url(images/myBorder.png) 10 repeat;
    .imageBorderRetina {
      border-width: 10px; 
      -webkit-border-image: url(images/[email protected]) 10 repeat;
      border-image: url(images/[email protected]) 20 repeat;
  4. Then add your photo in HTML and apply the CSS styles to create both a Retina and non-Retina border image.

    <img class="imageBorder" src="images/myBorderPhoto.jpg />
    <img class="imageBorderRetina" src="images/myBorderPhoto.jpg />
  5. If you are working on a Retina device 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 border is much sharper than the first.

How it works...

To create our border, first we set the border-width property in CSS to specify how wide the border will be on each side of our image. If we wanted different widths, we could list out each side starting at the top and continuing clockwise, ending on the left-hand side (for example, border-width: 5px 10px 15px 5px;).

Next we add in two border-image statements to create the border. The first includes the –webkit vendor prefix, which allows the code to work in older versions of iOS. The first part of the property sets the image URL. The following numerical value tells the browser where to slice the image. You can include a value for each side of the border just like the border-width property. We've used pixels, but this can also be a percentage. The final value in the property determines the method of generating the border (repeat, round, or stretch).

The trick to getting the Retina border to work is doubling the slice value. This is because the Retina image is twice as large as the original and has double the pixels. If you were using a percentage value instead of pixels you would leave the value the same for each border image.