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 "/firstname.lastname@example.org". 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="/email@example.com"> </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 /firstname.lastname@example.org 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 /email@example.com dimensions could be 400px x 200px.