Responsive Design Dynamic Loader
Switch branches/tags
Nothing to show
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.


Responsive Design Dynamic Loader experiment


A simple jQuery plugin to dynamically load images based on responsive screen size. The idea is that smaller screens should load lower res images to reduce bandwidth.

By default the plugin expects four image sizes (that follow the Bootstrap breakpoints):

* xs < 768px
* 768px >= sm < 992px
* 992px >= md < 1200px
* 1200px >= lg

To use:

  1. A version of the image should be created for each size: e.g. image-xs.jpg through image-lg.jpg
  2. Add a special class to all images you want dynamic (this example uses .adaptive-image)
  3. Set the src-basename and src-ext attributes

  // Bind the following:
  // process our images on load
  $(document).ready(function() {

  // process our images on a resize
  $(window).resize(function() {


  • Resizing on a large screen is inefficient
  • A new HTTP request happens on each image replacement
  • If a connection is slow, the image will be replaced once the new one is loaded
  • A task runner could be put into place to load the specified image sizes and batch process images