Deliver High-Res Images on Mobile Devices with RetinaJS

High-resolution screens on mobile devices is now a norm. The images give users a sharper and crispier look, and once they have gotten used to this high level quality, web developers are pressed to produce high-quality imagery for their users as well. Most images that we use a decade ago will definitely turn blurry on a retina display screen, thus we need a new way to present graphics on the Web.

The ways we can adopt vary depending on the purpose of the image. Font Icon and SVG is now the better way to serve icons or logo, while Media Queries is the way to serve image from CSS.

But if you want to serve hi-res image within the body content, Retina.js is the way to go. Retina.js, a JavaScript library that makes serving high-resolution images a breeze. You don’t even have to modify much of your code. Let’s check it out.

Recommended Reading: Retina Display Ready With Media Query

Getting Started

Retina.js does not rely on any sort of third-party libraries. All you need is to download the retina.js file and link it in your document. Alternately, you can link the file from CDNJS.com, like so.

 <script src="//cdnjs.cloudflare.com/ajax/libs/retina.js/1.0.1/retina.js"></script>

Retina.js offers two methods to serve high-resolution images.

Method 1

In its initial release, Retina.js adopts the same method as Apple did in its devices, which attaches the hi-resolution image with @2x suffix. So if you have an image named autumn.jpg, you name the high-res version as autumn@2x.jpg. In version 1.3.0, Retina.js introduces a new suffix, _2x. So aside from @2x you can name the image as autumn_2x.jpg.

Retina.js will check your server for images with these suffixes when your website is viewed on a high-resolution screen, and will replace the regular image with it. To ensure Retina.js picks up the image successfully, you have to save the high-resolution image in the same directory where your regular version is saved.

Method 2

Another way is by using the data-at2x within the img tag, like so.

 <img src="img/autumn.jpg" data-at2x="img-hi-res/image-autumn.jpg" alt="">

By using this data- attribute you can set the name of the folder or the image differently, and Retina.js will not perform a server check; this will speed up the process.

Open your website in a separate screen; one in regular screen and another in high-resolution. Compare them, and you should see the difference (like below).

LESS Mixins

Retina.js also provides a LESS Mixins, .at2x, to serve image through CSS. This example:

 .social-icons { .at2x('image/icons.jpg'); }

…will turn into the following when compiled into regular CSS.

 .social-icons { background-image: url('image/icons.jpg'); } @media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx) { .social-icons { background-image: url("image/icons@2x.jpg"); background-size: auto auto; } }

Quite handy, right?

Using Retina.js In WordPress

WordPress users can use a plugin called WP Retina 2x to utilize Retina.js in their website. Assuming that you have installed the plugin and also uploaded images, you can go to Media > WP Retina 2x menu. You should see the list of images that you have uploaded, as follows.

Click the Generate button. It will generate images with @2x suffix for Thumbnail, Medium, Large, and the other custom image sizes that you have specified.

Final Thought

Seeing the increasing number of devices with high resolutions, it is only a matter of time before web developers cannot avoid supporting it. Retina.js is the all-in-one library to serve high-resolution images. You can use images with the@2x or data-* attribute within your body content, use .at2x Mixins for serving your website image through CSS, and there is a plugin available for WordPress.