javascript - GAE + Blobstore: Serve different image size depending on viewport width -

as know, can serve images blobstore using serving url, , append =sxx indicate image's width:

<!-- serving image of 600px width --> <img src="{{serving_url}}=s600" alt=""/> 

this works well, except want serve smaller image smaller screens obvious webperf reasons. how can serve different image width depending on screen size?

thanks tips.

you can pull off using javascript, basic technique change src attribute after evaluating media queries you're interested in.

for starters, avoid filling src of image until evaluation, full image doesn't load default; this:

<img data-src="{{serving_url}}" height="240" width="320"> 

here rendered url in data attribute have access later in script. i'm adding default size space reserved, that's optional of course.

now, can use window.matchmedia() evaluate our query strings:

var mql = window.matchmedia('(max-device-width: 667px)') if (mql.matches) {     // we're running on iphone6!     img.src = img.dataset.src + '=s667' } 

the image fetched using perfect size!

i'm including working snippet, can extended many query tests try.

var img = document.queryselector('img')    , mql = window.matchmedia('(max-device-width: 667px)')    , size = 1200  if (mql.matches) {      size = 667  }  img.src = img.dataset.src + '=s' + size

img {      object-fit: contain;  }

<img      data-src="http://lh4.ggpht.com/tgjdt-cprr6bjrpsvqeilk93o4ouzjo1ygmb6kpmnchhyh5vjkkrrqxcd2bc3t09crip6h5qfsv_l0hnhio5bn7z"      height="240"      width="320"      >

the test image kindly "provided" this question. i'm using object-fit because makes sense (to me).