Let's say I have one page
big.html that uses
<img alt="big image" src="big.jpg" width="300" height="300" />
big.jpg is indeed an image of 300 by 300 pixels.
And on a different page
small.html I want to use the same image in half its size. This could be achieved in two ways:
<img alt="small image" src="big.jpg" width="150" height="150" />
<img alt="small image" src="small.jpg" width="150" height="150" />, where
small.jpgis a precomputed scaled-down version of 150 by 150 pixels.
The advantage if variant 1 is: If the user recently visited
big.html, they presumably already have
big.jpg in cache and hence no additional image download is needed for
small.html. The disadvantage is: If the image is not yet cached, page
small.html is unnecessarily slow because it loads a much bigger image than needed (and accordingly, tools such as PageSpeed Insights complain). Then again, this loss is compensated in case they later visit
big.html and do not need to download the big version again.
Conversely, the disadvantage of variant 2 is that the small image needs to be downloaded even if a just as useful larger version is already available, and its advantage is that a small image is faster when the cached big image is not available. Then again, visiting
big.hmtl later will need to download
big.jpg instead of reusing something from cache. (And in addition, it might be possible to optimize the precomputed scaled-down version further, beyond a mere automated out-of-the-box scaling)
Q: Is it possible to get the best of both worlds in something similar to the negotiation of media types ("If you understand webp, download this small *.webp file; otherwise, download the original *.jpg file"), i.e. something like "If you have A.jpg in your cache, use it; otherwise download B.jpg"?