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.