Responsive images using Drupal 7 image styles.

responsiveBanner.js

jQuery(document).ready(function ($) {
  /**
   * @param string site_url
   *  URL to Drupal site. Set in preprocess.
   * @param string image_filename
   *  Image name. Set in preprocess.
   */
  function responsiveBanner(site_url, image_filename) {
    // Trim image url
    var formatted_image_filename = image_filename.replace(/public\:\/\//, '');
 
    var onloadSize = $(window).width();
    checkSize(onloadSize, site_url, formatted_image_filename);
 
    // On window resize
    $(window).resize(function() {
      var resizeWidth = $(window).width();
      checkSize(resizeWidth, site_url, formatted_image_filename);
    });
  }
 
  // CHECKSIZE
  function checkSize(width, site_url, image_filename) {
    if (width >= 741 && width <= 980) {
      $('.view-banner img').eq(0).each(function() {
        $(this).attr('src', site_url+'sites/default/files/styles/banner_narrow/public/'+image_filename);
      });
    } else if (width >= 981 && width <= 1220) {
      $('.view-banner img').eq(0).each(function() {
        $(this).attr('src', site_url+'sites/default/files/styles/banner_normal/public/'+image_filename);
      });
    } else if (width >= 1221) {
      $('.view-banner img').eq(0).each(function() {
        $(this).attr('src', site_url+'sites/default/files/styles/banner_wide/public/'+image_filename);
      });
    } else {
      $('.view-banner img').eq(0).each(function() {
        $(this).attr('src', site_url+'sites/default/files/styles/banner_mobile/public/'+image_filename);
      });
    }
  }
  // Run
  responsiveBanner(bannerObj.site_url, bannerObj.image_filename);
});