Website Optimization for Retina Displays

Learn simple techniques to make websites look stunning on high-definition Retina Displays.

retina graphics book cover

WHAT YOU'LL LEARN

retina image

Create Retina images, backgrounds, borders and image sprites.

css button

Use CSS to create shapes and buttons for user interfaces.

custom css font

Embed fonts from the web to create unique typography and graphics.

svg graphic

Learn to create scalable graphics using CSS, SVG, and Canvas.

ios app icon

Add high-resolution icons and startup images to your web apps.

retina script

Use JavaScript and PHP to detect Retina Displays and swap images.

TABLE OF CONTENTS

  • 5
  • 8
  • 9
  • 12
  • 15
  • 17
  • 20
  • 22
  • Creating your first Retina image
  • Retina background images
  • Optimizing
  • Creating image sprites
  • CSS border images
  • CSS media queries
  • CSS image-set
  • Using code instead of images
  • 26
  • 28
  • 30
  • 34
  • 36
  • 39
  • 42
  • Embedding fonts
  • Fonts as icons
  • High-resolution web apps
  • Scalable Vector Graphics
  • Canvas
  • Pixel ratio detection with JavaScript
  • Server-side Retina solutions
download code samples

ABOUT THE AUTHOR

Kyle Larson is Senior Web Designer with more than 10 years of professional experience designing and developing web sites, managing web projects, and working with clients.

He runs a successful blog where he writes about web technologies. His article "Creating Retina Images for Your Website" led to the creation of this book.

View his portfolio and blog at http://www.kylejlarson.com

Contact Kyle

Your Name:

Your Email:

Message:

close