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.
- Download Retina.js Script
- Include the script before closing your
- 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.