I am using server-side image resizing dynamically through URLs like <img src="converter/500w/picture.jpg">
. This means that I have a practically infinite amount of image sizes I am able to serve. Right now I am using <img srcset="...">
(as well as <picture>
tags) to serve a variety of more or less randomly chosen image sizes. However, this leads to a lot of markup, and is not really flexible.
Is it possible to use
srcset
(or other HTML markup) to tell the browser how to request images of arbitrary size? If not, is it possible to do this using JavaScript/jQuery reliably across all browsers?Is it possible to be smart about what sizes to include in your
srcset
, or should you just include something like 5-10 resolutions ranging from small to large/original? I was thinking that widths relating to your breakpoints would be good candidates to include, but this doesn't account for high-DPI devices.
I realize the "infinite" srcset
would come at a cost. The processing may be heavy on the server, though this heavily depends on your visitors (amount and variation in screen specifications). Disk space is also a concern, but may be mitigated by garbage collection (though this would increase the impact of the first concern). Still, I'm wondering if it's possible, and if there is a smart choice of resolutions if not.
No you can't tell the browser a specific pattern to request different candidates. I also doubt it would be useful to generate infinite amount of image candidate.
Something that you can use client side to do the work for you, would be the following script: https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/rias
In case you have so much resources, I also highly recommend to deliver higher compressed images to retina devices. This can be done either with the RIaS plugin mentioned above (see documentation) or by using the "compressive picture pattern":