Instant Website Optimization for Retina Displays How-to [Instant]

This title is available as an eBook only
Instant Website Optimization for Retina Displays How-to [Instant]
eBook: $12.99
Formats: PDF, PacktLib, ePub and Mobi formats
save 15%!
Print & eBook also available on:
Learn in an Instant - Short, Fast, Focused
Table of Contents
Sample Chapters


  • Learn something new in an Instant! A short, fast, focused guide delivering immediate results.
  • Create high-resolution graphics for websites
  • Learn to create scalable graphics using CSS, SVG, and Canvas
  • Embed fonts from the web for creating unique typography and graphics
  • Learn how to add high-resolution icons and startup images to your web apps
  • Implement scripting techniques to replace your images with high-resolution versions


Book Details

Language : English
eBook : 56 pages
Release Date : January 2013
ISBN : 1849695121
ISBN 13 : 9781849695121
Author(s) : Kyle J. Larson
Topics and Technologies : All Books, Instant, Mobile Application Development, iOS

Table of Contents

Instant Website Optimization for Retina Displays How-to
  • Instant Website Optimization for Retina Displays How-to
    • Creating your first Retina image (Must know)
    • Retina background images (Must know)
    • Optimizing (Must know)
    • Creating image sprites (Should know)
    • CSS border images (Should know)
    • CSS media queries (Should know)
    • CSS image-set (Become an expert)
    • Using code instead of images (Must know)
    • Embedding fonts (Should know)
    • Fonts as icons (Should know)
    • High-resolution web apps (Should know)
    • Scalable Vector Graphics (Become an expert)
    • Canvas (Become an expert)
    • Pixel ratio detection with JavaScript (Become an expert)
    • Server-side Retina solutions (Become an expert)

Kyle J. Larson

Kyle Larson is a self-taught web designer and front-end developer who has been passionate about the power of networks since he got his first modem at the age of 10. He studied art and design at the University of Minnesota while working for, a job search start-up. Kyle is currently a Senior Web Designer, designing for a variety of brands, at Milestone AV Technologies in Minnesota. He also does freelance work with Emergent Networks and a variety of small businesses. When he's not buried in a web project, Kyle blogs about what he learns at

Code Downloads

Download the code and support files for this book.

Submit Errata

Please let us know if you have found any errors not listed on this list by completing our errata submission form. Our editors will check them and add them to this list. Thank you.

Sorry, there are currently no downloads available for this title.

Frequently bought together

Instant Website Optimization for Retina Displays How-to [Instant] +    Mastering phpMyAdmin 3.4 for Effective MySQL Management =
50% Off
the second eBook
Price for both: £16.75

Buy both these recommended eBooks together and get 50% off the cheapest eBook.

What you will learn from this book


  • Create retina images, backgrounds, and borders
  • Use CSS to create shapes and buttons for user interfaces
  • Design retina image sprites to speed up your site
  • Embed unique fonts and use them as graphics
  • Make your web apps high-resolution with icons and startup images
  • Use JavaScript and PHP to detect retina displays and target them
  • Create resolution independent images using SVG
  • Use media queries and the image-set property to provide multiple versions of your images


In Detail

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.


Filled with practical, step-by-step instructions and clear explanations for the most important and useful tasks. Get the job done and learn as you go. Written in an accessible and practical manner which quickly imparts the knowledge you want to know. As a How-to book it will use applied examples and teach you to optimize websites for retina displays.

Who this book is for

This book is for web designers and developers who are familiar with HTML, CSS, and editing graphics who would like to improve their existing website or their next web project with high-resolution images. You’ll need to have a high-definition device to be able to test the examples in this book and a server to upload your code to if you’re not developing it on that device.

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software