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. 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. Download Retina.js Script Include the script before closing your </body> tag<script type="text/javascript" src="/js/retina.js"></script> Upload the @2x file. Example: robdvr.com/example.pngrobdvr.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.

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.

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.