Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

The simple jQuery plugin for adaptive images in responsive web design

tree: bf979623df

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.md

HiSRC

A simple jQuery plugin for adaptive images in responsive web design

A twist on the old school LOWSRC IMG attribute, which would render a lower file size image first while a larger file size image would appears in its place later.

Back to the future, we set in the markup and leave the lower file size image.

However, if the HiSRC plugin detects fast network or high resolution, then a high resolution image takes the image's place.

How the HiSRC jQuery Plugin Works

The browser loads the low-resolution image first with an old-fashion IMG SRC attribute.

Then the HiSRC jQuery plugin checks the resolution of the browser.

If the browser resolution is wider than the default 640 pixels width, then the plugin overwrites the low-resolution image for the higher resolution image.

However, if mobile bandwidth is detected (like 3G), the low-resolutions stay in place.

Setting up

Associate jQuery to your web document as well as the HiSRC plugin as well.

In this code example, jQuery is link to Google's CDN and the HiSRC plugin is in the same directory as the web document:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="hisrc.js"></script>

Use basic jQuery to pick out which images should be HiSRC'd:

$(document).ready(function(){
  $(".hisrc img").hisrc();
  $(".hisrc img+img").hisrc({ minwidth: 800 });
})

The high-resolution image links should be placed as the value of data-hisrc in the markup of your web page:

<h1>HiSRC Images</h1>   
    <div class="hisrc">
        <img src="http://placehold.it/400x200.png" data-hisrc="http://placehold.it/640x200.png">
        <img src="http://placehold.it/400x200.png" data-hisrc="http://placehold.it/800x200.png">
    </div>

<h2>Regular images</h2> 
    <img src="http://placehold.it/400x200.png">
    <img src="http://placehold.it/400x200.png">

More Resources

  • Flashpix image format that stores multiple resolution versions.
  • Do you need a more robust, server-side solution? Try Responsive Images. Requires PHP and editing .htaccess files
Something went wrong with that request. Please try again.