Skip to content
A jquery retina display via data plugin
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A jquery retina display via data plugin

View examples at


  • 600 bytes uncompressed
  • 238 bytes compressed (That is insane!!!)
  • Built to be small, fast, and simple

JS Usage

<script src="jquery.retinaData.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

The example above shows an attempt to replace all images with high resolutions versions. If you only want to attempt to replace some images (for better performance) you may specify a specific class: Eg.


To check if the image exists before showing use the jquery.retinaDataCheck.js file like so:

<script src="jquery.retinaDataCheck.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {

Image Usage

The image must have a src and data-retina set like so:

<img class="retina" src="100x100.jpg" data-retina="200x200.jpg" width="100" height="100" alt="Sample">

Then when retinaData runs you will have (if the display is retina):

<img class="retina" src="200x200.jpg" data-retina="200x200.jpg" width="100" height="100" alt="Sample">

Variable definitions

  • i = index
  • e = element
  • r = retina url
  • h = holder
You can’t perform that action at this time.