Retina Image with jQuery

Thank you for downloading.

Get new freebies like this

in your inbox every other week. No spam

You may have a question like “how to replace images for retina display”. The answer is simple. We can do this in many ways. You can do it with CSS Media queries, with 3rd party plugins like retina.js or with jQuery. I found jQuery is very simple to use in any static websites. So here is a small tutorial on how to Change image for retina display.

How it works

The Script will first check the device whether it is retina display or not. Then it will replace all your images in the HTML with Retina images. Otherwise, do nothing.

File Structure

The first thing you have to do is, create a better folder structure. Here our structure is

Setting the Images

After that, you have to copy your normal images into “images” folder and your retina images in to “@2x” folder with the same name.

Ex: if you put dummy.png in “images” folder, you should also keep the same name in “@2x” folder too like dummy.png

Include jQuery Library

Please include jQuery in your </head> section. You can leave it if you already included it.

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

Including Retina Script

Next, Create a blank js file in your “js” folder. Then include it in your <head> section just after the jQuery Library. We can add our script in to this file later.

<script src="js/script.js"></script>

The HTML

Next, the HTML part. You can include the images in the following format in the HTML

<img src="images/dummy.png" alt="dummy image" >

Retina Script Part One

Copy and paste the following code to “script.js” that we have created early. This script will check the device whether it is retina or not.