Retinise.js

Retinise.js is a really simple jQuery plugin which 'retinises' your inline images, and because it uses 'data-src' instead of 'src' it means it only ever serves up the image you need, saving you and your users bandwidth. It's really small and really easy, just follow the steps below. I'd love to know what you think of the plugin and what projects you are using it on, tweet me your URL and any comments @dahliacreative / #retinisejs.

Download

You can get the latest version, right here from GitHub!

How to use

Retinise.js is real easy to use. Just follow the steps below!

<script src=”/path/to/jquery.js”></script>
<script src=”/path/to/retinise.js”></script>

Head

First up, link to the plugin in the head of your document. Retinise.js is a jQuery plugin so you need to link to it after the jQuery library.

<img src="" alt="" data-src=”/img/path/non-retina.jpg” data-alt="My Image" class=”retina” />
<noscript>
  <img src=”/img/path/non-retina.jpg” alt="My Image” />
</noscript>

N.B. Devs using the rails asset pipeline.

Due to the asset pipeline changing the name of your images when they are served up to the client you need to include the path to your retina images including your prefix, by default the plugin uses data-ret but you can change this in the options when you call the script.

Example:

data-ret=”/img/path/retina@2x.jpg”

Html

Next step is to mark up your images in the HTML. If you are a PHP user, I suggest you use this awesome helper to save you writing out lots of markup: PHP Helper by @letsallplaygolf

$(’.retina’).retinise();

Options

$('.retina').retinise({
  suffix: “@2x”,
  srcattr: "data-src",
  retattr: "data-ret", // For developers using rails asset pipeline
  altattr: "data-alt"
}); 

JS

Finally, just initialise the script and customise, your options!