Friday, September 22, 2023
HomeWeb DesignRetina.js - To Make Your Websites Retina Graphics Ready!

Retina.js – To Make Your Websites Retina Graphics Ready!

Retina and high-resolution displays in general are like HD TV, and sooner than later everyone will have one. Why you should consider to get Retina ready your websites. Because your website will look really bad on a high-res display. How bad? Zoom about 200% on your website or one of your images, that’s exactly what it looks like on a Retina display. In this article, I’m going to show you how to make your websites Retina Graphics Ready.

Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

Retina.js To Make Your Websites Retina Graphics Ready

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

 How Retina.js Works?

The JavaScript helper script automatically replaces images on your page that high-resolution variants (if they exist). To use it, download the script and include it at the bottom of your page.

1. Upload the retina.js file on your server
2. Just load the script on your webpage, by add the following code inside of body section of your blog

<script type="text/javascript" src="/scripts/retina.js"></script>

3. That’s it!

Muhammad Haroon
Truly yours, Muhammad Haroon is my name. Living in Karachi, Pakistan and enjoying my life playing with codes and blogging frequently, my most popular guides on Best WordPress Plugins. I founded Softstribe in 2012, when I was about to leave College. Find me on



Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular