I'm trying to implement responsive images on our site using and tags with references to web, jp2 and jpeg images. This works fine in Chrome, it downloads the webp images as it should.
Trouble is Safari. It downloads jp2 pictures AND the fallback which is usually in jpeg causing a duplicate of images downloaded, and therefore affecting performance badly.
As an example, I found this codepen where this issue occurs: https://codepen.io/jeremyfrank/pen/pjmJyg
<picture>
<source
srcset="https://s3.amazonaws.com/vigesharing-is-vigecaring/jfrank/pb/rebel-80.webp"
type="image/webp">
<source
srcset="https://s3.amazonaws.com/vigesharing-is-vigecaring/jfrank/pb/rebel-prev-2k-80.jp2"
type="image/jp2">
<source
srcset="https://s3.amazonaws.com/vigesharing-is-vigecaring/jfrank/pb/rebel-ps-xr-80.jxr"
type="image/vnd.ms-photo">
<img
src="https://s3.amazonaws.com/vigesharing-is-vigecaring/jfrank/pb/rebel.png"
width="278"
height="383"
alt="Rebel">
</picture>
If you open this example in safari you'll see jp2 and png being downloaded.
Has anyone found a solution to this?
Or is the solution not using jp2 and sticking to jpeg? (If the selected sourceset is the same as fallback Safari wont download it twice)