This function loops through all images on the page, and serves the appropriately sized image file from a list in a data attribute.
example link: http://total.maloweb.com/responsive
example html:
<img src="default.png" data-widths="400,600,800,1023" data-srcsuffix="-foo.png">
example javascript:
onload=onresize=function(){
respImg("data-widths","data-srcsuffix")
}
example filenames:
400-foo.png
600-foo.png
800-foo.png
1023-foo.png
My idea 136 bytes: (posted from my phone, not tested)
function respImg(s,u,d,l){document.images.map(a=>{d=a.dataset,for(l=d[s].split(',');l.length||a.offsetWidth>w=l.shift();)a.src=w+d[u]})}