Surendra Mohan's Reviews > Instant Website Optimization for Retina Displays How-to

Instant Website Optimization for Retina Displays How-to written by Kyle J. Larson a self-taught web designer and front-end / UX developer who got his first modem at the age of 10. He studied art and design at the University of Minnesota while working with a job search startup. Kyle is currently a Senior Web Designer, designing for a variety of brands, at Milestone AV Technologies in Minnesota.

Instant Website Optimization for Retina Displays How-to is a 15 essential and good-to-know topics book. The book explains the topics in ascending complexity wise, ie. Start from basic and landing to the maximum complexity level which I believe is one of the essential factors to grab interest of a reader/developer. This book is not meant for a newbie / beginner in HTML, CSS and graphics editing; instead it is for the designers or developers who are familiar with the basics of HTML, CSS and graphics editing. This book covers how create images for the latest high-definition (HD Images) displays. This book has the specialty to understand and overcome the challenges presented by the new technology and learning the techniques (tips-and-tricks).

The author has explained each and every point in such a way that it can grab interest of the readers/web designers to major extent, irrespective of whether he/she is a newbie to web design or an experienced professional.

To justify my statements, I would like to pen-down my views topic wise.

Creating your first Retina image:
This section involves steps to create your retina image; criteria that need to be fulfilled in order to have HD resolution image displayed onto your website (ie. Image resolution should be double the desired resolution, etc.); instructions to file nomenclature to be followed to achieve the best result.

The steps have been demonstrated using sample codes to make it more readable and user-friendly.Tips-and-tricks have been explained in such a way that they are understandable to the developers who even have basic knowledge of graphics design, HTML and CSS. Retina display technique mainly plays with the pixel density; which is one of the basic ideas one should use to achieve better results in terms of resolution.

Retina Background images:
This section explains how to optimize your retina based images to have better and sharp resolution. It also explains how and why updating background images play a vital role when upgrading the display images. As you might be aware of that, to maintain the utmost quality of the image resolution, the retina display image and the background image should be in sync, aka, if we update the display image to some extent, the background image should also be updated proportionally.

The steps; tips-and-tricks; dos and don’t have been explained in a very clear manner so as to achieve the utmost quality display as the end result. Moreover, examples have been demonstrated in a comparative way, aka using both retina based as well as non-retina based so that the developers can judge the difference caused due to retina display methodology.

Upon each demonstrative example, the book explains what does each piece of code do and the base reason to why was it implemented in such a way and didn’t apply the other way.

Optimizing:
Applying above explained steps, it is noticed that the retina image file size gets quite larger than the normal image size; which is one of the important concerns in terms of the website performance. Thus, this section deals with how to tackle such situation and overcome efficiently even in slow network connection.

It also covers how to use better applications like Photoshop and GIMP to effectively edit and compress the image files keeping their quality in place. This section also suggests the preferred image file format to use for better and optimized result. The best part of this section is the way points have been described; in-depth information / details provided to explain each and every point or step; tips-and-tricks have been discussed in a user-friendly manner; helpful links to the documentation, tools etc has been specified with can be proven as a boon to the developers / readers; etc.

Creating Image Sprites:
This section mainly deals with how to create image sprites ie combining a group of images into a single image and how to make a Retina version out of it. The purpose of having image sprites is to minimize the number of HTTP requests; resulting in minimal page load time; hence improvement in terms of website performance.
Just to present the level of explanation / information used to describe this section, below is the sample paragraph used for better understand –

1. First take the four images that you've collected and make sure that they are of the same size. Then create a new image that is 2x as tall and 2x as wide as each image (for 80 x 80 icons the new image would be 160 x 160). Place each icon in a quadrant of the new image so they fill the space. Save this image as a PNG inside the /images/ folder within the /retina/ folder with the filename mySprite@2x.png. Then resize the image to 50 percent and save it as mySprite.png in the same folder.

In addition, author has explained and demonstrated with an example wherein a comparative study has been done for the developers / readers to understand the difference between the performance of the website using normal images and website using images bundled together. Alike the previous sections, tips-and-tricks have been explained effectively to make the section more user-friendly and easy for the developers to implement.

CSS Border Images:
Border images are a new concept which were introduced in CSS3 and are not widely used yet. This section deals with how to wrap a border around an HTML element using CSS and an image; instead of using standards dotted, dashed or solid line borders.
It also covers how to turn your border images into high-resolution retina images. Taking an example of the following border image; author has explained thoroughly on what are the basic criteria to kick-start with it’s implementation ie. Graphics and their specifications required, the detailed steps to follow so as to achieve the best results, etc.
Alike the explanation in the previous sections, author has compared the retina image display with the normal image display during the demonstration; so as to have a crystal clear comparative study of the difference between the implementation and the output.
-webkit vendor prefix has been used and the motive behind it is to have the retina display compatible with older versions of iOS.

Alike the other sections, author has also discussed about the tricks-and-tips so as to achieve display with utmost quality.

CSS Media queries:
This section deals on how to overcome the situation where there are retina images which takes ample of time to load; effecting the content display and the load time and how to use media queries for each of the images targeting only retina displays.
Author explains the concept and way to apply, demonstrating with the previous example as a continuation; ie. Using a background image, image sprite and a border.

Author has strictly instructed about the order of the code to be followed; ie. Code bundle for non-retina image, then media query statement, etc. due to the fact that CSS is cascading; aka, the code is read top to bottom and the previous code would be overwritten by the later.
Alike the previous sections, each and every step has been explained, demonstrating with the example to grab interest and better understanding of the readers / developers . The section also deals about the dos-and-donts so as to achieve the best and expected output.

CSS image-set:
The previous section dealt about how to use “Media queries”. In section deals with the use of image-set property instead of media queries (ie. An alternate method to overcome the image and content load time of a website). An additional feature which tempts the developers to use this alternative property instead of using media queries is that the two images (one of higher resolution and the other of low resolution) are listed next to each other, so that it is easy to debug and updated; and the web browser decides which image to load; based on the whether image is being loaded in a high speed network or a slow speed network.

To demonstrate the usage of image-set; author has carry forwarded the same example which have been described in the previous sections. Alike other sections, author has explained the implemented with a comparative study taking both retina display and non-retina display images into consideration; making the topic more exciting and easy to learn.
In the code snippet stated in the example, author has used –webkit browser prefix with image-set property to wrap the two images together, so as to avoid the potential issues with might arise due to further upgrade in image-set property.

The point in this section I would like to highlight is that image-set property is highly dynamic and robust; in the sense that based on the network connection speed, it decides and executes what resolution of the image should be loaded; so that overall page load doesn’t get impacted even in slow network connection.

Using code instead of images:
As you would be aware of that the web page consisting of huge number of graphics and images have comparatively lower performance in terms of page load time. To avoid using too many graphics and images; author has recommended to use CSS wherever applicable in this section.
Why use CSS to major extend instead of using images and graphics? Firstly, for faster page load; and secondly, the graphics created using CSS are always of high-definition. Moreover, creating graphics using CSS, you don’t need to worry about the retina version; and ofcourse minimizes the development time in case of modification or upgrades.
As an example, author has demonstrated to create a “Click Me” graphics using various methods just by using CSS.

Author demonstrates the example by creating different CSS classes with different properties to create the button like diamond, circle, triangle, etc shapes possessing different gradients, background color, etc.
Each and every CSS property used in the CSS to achieve the above button, have been explained in depth along with some tips-and-tricks of it’s implementation.
For instance; (Page 25, 2nd paragraph)

“The box-shadow property creates a drop-shadow on the element. The values for this property from left to right are the horizontal offset, the vertical offset, the blur radius, and the color. The first two properties change the distance of the shadow from your element, and the blur radius will determine how sharp your shadow appears. To create a shadow inside of your shape you can add inset before your other properties (box-shadow: inset 1px 1px 4px #666).”

Embedding fonts:
This section mainly discusses about the typography concepts; how to implement, ie how to embed custom fonts to the website contents, etc. This method is used primarily to overcome the issues wherein developers / designers are forced to use images in the content sections, even in titles; or even more complicated alternatives, due to lack of implementation of custom fonts in the website which makes the page load worst and worst impacting the overall performance of the site.
Moreover, this section also concentrates on how to embed your font so as to achieve a high-definition display which is adaptive enough to adjust itself; maintaining the quality of the display.
Author has also discussed the ways to choose the correct font format to achieve the best quality display. For the same, the designer first needs to check with the foundry whether the specific font (which the designer wishes to implement) is available as web fonts or not.

To demonstrate, author has chosen font Bevan within the slab serif section as an example. Usage of @font-face tag has been shown alongwith the detailed instruction and steps to follow to achieve the best and high-definition results. Author has also discussed about some of the tips-and-tricks to make the design task more easy and convenient for the designers. For instance;
Instead of struggling to find the font package online; which may include purchase online and converting fonts; author has suggested an alternate technique to use a font service, using which you can use them free of cost, hosted at their server. Moreover, font service is responsible for the font’s updates and availability to work on different browsers and licensing. However, author has also discussed about the disadvantage of using font service, ie since the fonts are hosted on their server; they might be unavailable to your website incase there is a downtime (scheduled or unexpected) at their server.

Fonts as icons:
This section covers how to use fonts (discussed in the previous section – Embedding fonts) as high-definition icons; also called as dingbats. For eg. Icons like Social media, shopping cart, email, zoom, print, RSS, etc.
Alike the previous sections, author has explained step-wise implementation so that the readers / designers would have better understand of what and their associated purpose of doing so.

Benefits of using fonts instead of an image have been discussed very clearly and in a to-the-point manner. For instance, author explains, fonts are vector graphics; thus can be scaled to any size without affecting it’s sharpness and resolution due to the fact that they are code based instead of pixel based.

High-resolution web apps:
This section deals on how to add retina favicons, app icons and startup image for your website. Author has explained various steps to be followed and minute level instructions to be taken care, like the pixel level resolution for the graphics or images which needs to be created, etc to achieve high-definition end product.

The best part of this section is that, author has also discussed about the probable issues and their resolution. For instance, in iPhone 5, there are chances that the web app might not load in a full screen. Reason for this is that the viewport value of the tag, wherein the width of this tag is set which prevents the scaling of the web app on iPhone 5. Author has suggested removing this width setting, so as to eradicate this issue permanently.

Scalable Vector Graphics (aka, SVG):
This section explains about the great XML based file format solution of creating high-definition images for your website. Moreover, these HD images can be animated using JavaScript or Synchronized Multimedia Integration Language (SMIL). Two methods have been discussed how to create an SVG. Firstly, directly code into an SVG or HTML file; secondly, creating it using a compatible graphics editor. Following is the expected outcome considered as the example for demonstration.
The best part of this section is that, author has explained both the above methods of creating an SVG, demonstrating with the relevant examples. SVG can be created by using tools like Adobe Illustrator or CorelDRAW; however, author has recommended to use Inkscape which is actually an open source tool to work with.

Author has also pointed out that SVG is not supported by some older browsers, primarily IE version older than 9. However, the good part of it as that he has shared the solution to overcome this issue; ie. Solution has been provided to support all the browsers including IE versions below 9.

Canvas:
This section talks about how to use Canvas, which is an HTML5 element used to create graphics using JavaScript. Canvas is raster-based; which mean, the graphics created using canvas will not be updated while zooming, resulting in pixilation. Moreover, it might not work where javascript is disabled due to the fact that it is drawn using javascript.
Author states that it is not a proper solution for most of the scenarios for creating Retina images as canvas has a huge dependency over javascript. Due to this limitation, author has instructed to try out other solutions to create high-density graphics. However, in few of the scenarios like creating games and animations where huge amount of data manipulation is required, using canvas is highly recommended.

First, a canvas element is added, which is populated by drawing the graphics with the desired properties using javascript. Stepwise and detailed explanation has provided for each and every step to provide a better understanding of the concept and each and every minute level element used, to the readers / designers.

Pixel ratio detection with JavaScript:
This section explains how to use JavaScript so as to replace your normal images with high-resolution images incase a Retina Display is detected. The best part of this section is that it explains how to work on [image error] tag itself to achieve high-definition image instead of using any other complex alternate method. Playing with and extending [image error] is recommended by the author as using [image error] is considered as one of the simplest solutions.
To provide better understanding to the designers, author has demonstrated the implementation and concept using an example wherein the images have been chosen from the demonstrations considered in the previous sections. Alike other sections, the example contains both types of images ie. Retina display and non-retina display for a comparative study and understanding.

First of all, jQuery is included in the HTML file; both types of images are displayed using [image error] tag; and then JavaScript is added to wrap out the high-definition images.
Additional tips have been shared with the designer / readers. For instance; Loading only correct image- It talks about how to make the page load faster by using data-src instead of using src in the [image error] tag. Targeting other high-density devices-Different high-density devices have different window.devicePixelRatio values; which is an identifier for the specific retina device.

Server-side Retina solutions:
This section explains how to use various server-side retina image solutions instead of using javascript.
Alike previous sections, the author has explained the implementation of one of such solution, demonstrating with a example which again uses a comparative study for the readers / designers to have a proper understanding.

Reading the book, I interpret that it is Easy to read, valuable tips-and-tricks have been shared, impressive Layout has been included and the best part is that the topics have been demonstrated by appropriate examples and comparative study, making the book more readable and understandable to the readers / designers. Moreover, a list of related book references have been provided for the readers / designers to explore further on topics like iOS 5, HTML5 Canvas, Responsive web design with HTML5 and CSS3, and HTML5 mobile development.

Conclusion:
'Instant Website Optimization for Retina Displays How-To' is a must for any serious web designer. It will definitely serve as a handy resource. It will teach you how to convert a simple image into a Retina display effectively, applying some spice of Animation into it; enhance your site’s page load by minimizing the image load time, etc just in short duration.

Disclaimer:
I volunteered to review this book and received a free copy from Packt Publishing.

This review has been cross-posted at Surendra Mohan