“Infinite” or “smart” srcset when using server-side resizing?

问题

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.

回答1:

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":

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
    <source
        srcset="image-w1600-q50.jpg 1600w,
            image-w1440-q50.jpg 1440w,
            image-w1200-q50.jpg 1200w,
            image-w800-q50.jpg 800w,
            image-w600-q50.jpg 600w,
            image-w400-q50.jpg 400w"
        sizes="(your sizes), 100vw"
        media="(-webkit-min-device-pixel-ratio: 1.9),
            (min-resolution: 1.9dppx)" />
    <source
        srcset="w1600-q80.jpg 1600w,
                image-w1440-q80.jpg 1440w,
                image-w1200-q80.jpg 1200w,
                image-w800-q80.jpg 800w,
                image-w600-q80.jpg 600w,
                image-w400-q80.jpg 400w"
        sizes="(your sizes), 100vw" />
<!--[if IE 9]></video><![endif]-->
<img
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    sizes="(your sizes), 100vw"
    alt="picture but without artdirection" />
</picture>

来源：https://stackoverflow.com/questions/30969869/infinite-or-smart-srcset-when-using-server-side-resizing

标签

html

srcset