(function(window, document) { // Test if it already supports srcset if ('srcset' in document.createElement('img')) return true; // We want to get the device pixel ratio var maxWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width, maxHeight = (window.innerHeight > 0) ? window.innerHeight : screen.height, maxDensity = window.devicePixelRatio || 1; // Implement srcset function srcset(image) { if (!image.attributes['srcset']) return false; var candidates = image.attributes['srcset'].nodeValue.split(','); for (var i = 0; i < candidates.length; i++) { // The following regular expression was created based on the rules // in the srcset W3C specification available at: // http://www.w3.org/html/wg/drafts/srcset/w3c-srcset/ var descriptors = candidates[i].match( /^\s*([^\s]+)\s*(\s(\d+)w)?\s*(\s(\d+)h)?\s*(\s(\d+)x)?\s*$/ ), filename = descriptors[1], width = descriptors[3] || false, height = descriptors[5] || false, density = descriptors[7] || 1; if (width && width > maxWidth) { continue; } if (height && height > maxHeight) { continue; } if (density && density > maxDensity) { continue; } image.src = filename; } } var images = document.getElementsByTagName('img'); for (var i=0; i < images.length; i++) { srcset(images[i]); } })(window, document);