I'm trying to render different images in chrome and in safari. The problem is that we are using latest formats of images (like webp and jpeg2000) but safari won't accept webp. So what I would like to have is without js, if possible, a conditional rendering of sources. I pretty sure I can solve it using the "picture" tag of HTML5, or maybe a css solution but I haven't done it succesfully yet.
I tried this with picture tag:
<picture>
<source srcset="img_pink_flowers.webp">
<source srcset="img_white_flower.jp2">
<img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
More details about the project is that I am using React but I do not think this is relevant for the issue. Any more info you might required will be provided!
Thanks very much for the help!
