TL;DR
<img src="/path/to/foo-320w-240h-1x.jpg" width="320" height="240"
srcoptions="/path/to/foo-{width}-{height}-{dpr}.{format},
320w 480w 640w, 1x 1.33x 2x, webp jpg"/>
- DRY - Expose url pattern and avaliable options for images - not full urls - in markup. Browser picks best options - builds url.
- Responsive images need CSS to get layout. Browser preloading is a pre-RWD optimization. Preloading doesn't make sense with upcoming
postpone
andlazyload
attributes anyway. - Client Hints can't be used exclusively. Has server requirement and needs alt. way of handling CH - anyway - when server req. can't be met.