Rob Davarnia


Make your site HiDPI with Retina.js

Posted on .

Make your site HiDPI with Retina.js


As Retina Displays are getting more and more popular, websites with low resolution graphics look pixelated. One way to prepare your website, is using Retina.js plugin.

What’s a HiDPI – Retina Display?

Pixel-dense display that eyes can’t distinguish the pixels. For example, iPhone’s display has 326 pixels per inch, which makes text look like a printed piece.


Existing rasterized images look fuzzy when enlarged.


Create a higher quality (4x the pixels), setup Retina.js, and you are done! Retina.js will automatically check your server for @2x image, and serve the higher resolution image instead.

  1. Download Retina.js Script
  2. Include the script before closing your </body> tag
    <script type="text/javascript" src="/js/retina.js"></script>
  3. Upload the @2x file.

You just have to include the base image in your HTML:
<img src="/images/example.png" />

Icons, Fonts, and Vectors

Font Icons, and Vectors are great. They look just as sharp in any size. Font Icons also help reduce costly HTTP Requests.


Rob Davarnia

I’m a Developer from Orange County, California. I'm a huge supporter of Open Source Projects, and making Web a better place.

There are no comments.

Leave a Reply

View Comments (0) ...