Rob Davarnia

Javascript

Make your site HiDPI with Retina.js

Posted on .

Make your site HiDPI with Retina.js

Introduction

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.

Problem

Existing rasterized images look fuzzy when enlarged.

Solution

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.
    Example:
    robdvr.com/example.png
    robdvr.com/example@2x.png

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.

profile

Rob Davarnia

http://robdvr.com

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) ...
Navigation