Nov 27, 2012
Coding for Retina Displays with RetinaJS Tutorial
With Retina displays quickly becoming the standard on phones, tablets and laptops, it is more important than ever to make sure your website looks great on high-resolution screens.
The cure for blurry and pixelated graphics on your website is to use high-resolution images. However, the problem with hi-res images is two-fold: by their nature, they carry a much larger filesize, and their benefits are lost on normal-resolution screens.
The solution is to only serve high-res images to hi-res devices. Unfortunately, web browsers currently don't have a built-in mechanism to request high-resolution images this way. RetinaJS helps solve this problem.
How to use RetinaJS
1. Download the script
2. Install the script
Add the script to your website by adding a <script> tag for retina.js to the bottom of the page, right before your closing </body> tag.
... <script src="/path/to/retina.js"></script>
3. Add high-resolution images to your website
By convention, RetinaJS looks for images on your server that use the "@2x" naming convention. To start using high-resolution graphics on your website, simply upload images that follow this naming pattern.
For example, if your logo image is located at "/images/logo.png" and the markup for this image looks like this:
<header> <img src="/images/logo.png"> </header>
RetinaJS will automatically look for a corresponding image located at "/email@example.com". If it finds the @2x image on your server then it will load that onto your web page, effectively transforming your logo's markup to look like this:
<header> <img src="/firstname.lastname@example.org"> </header>
- RetinaJS automatically scales down high-resolution images to the dimensions of the original image. Due to the nature of the scaling, your high-resolution image variants should have dimensions that are an even multiple of the original image's resolution. For example, if /images/header.png is 400px x 200px, then /email@example.com dimensions should be exactly 800px x 400px.
- For small images such as logos, it can be beneficial to use high-res variants that are 4x the original dimensions. On phones and tablets, this will keep the image sharp even if the user zooms into the page. For example, if /images/logo.png is 100px x 50px, then /firstname.lastname@example.org dimensions could be 400px x 200px.