highsrc

jquery.highsrc.js

// A very mini jQuery highsrc/lowsrc plugin
// 
// By Zach Inglis (zachinglis.com)
// With credits to Ian Norton ()
//
// Example:
//    <img src="logo.png" highsrc="logo.svg" />
// 
jQuery(document).ready(function () {
  // Retina Change
  var pixels = (window.devicePixelRatio || 1);
  
  jQuery("img[highsrc]").each(function() {
    high_src  = jQuery(this).attr('highsrc');

    if (!(isAndroid() || isIE8orLess() || isChrome() || isKindleFire())) {
      jQuery(this).attr('src', high_src);
    }
  });
  
  jQuery("img[lowsrc]").each(function(index) {
    low_src = jQuery(this).attr('lowsrc');
    
    if (isAndroid() || isIE8orLess() || isChrome() || isKindleFire())
      jQuery(this).attr('src', low_src);
  });
  
});

// ------------

function userAgent () {
  return navigator.userAgent.toLowerCase();
}

function isIE() {
  return userAgent().indexOf("msie") > -1;
}

function isIE7() {
  return userAgent().indexOf("msie 7") > -1;
}

function isIE8() {
  return userAgent().indexOf("msie 8") > -1;
}

function isIE8orLess() {
  return (isIE7() || isIE8());
}

function isAndroid() {
  return userAgent().indexOf("android") > -1;
}

function isChrome() {
  return userAgent().indexOf('chrome') > -1;
}

function isKindleFire() {
  return userAgent().indexOf("Silk-Accelerated") > -1;
}

(This solves the problem I was having where Chrome gives me jaggies on SVG, and Android refuses to even understand what an SVG is.)