I have a site with loads of images. At first I show them in low quality to save bandwidth for the visitor. If you hover over an image the image should be replaced by a high-quality image of the same size. My site runs without jQuery.
I tried onmouseover on both the srcset tag and the img tag, but this does only work on the img tag if the browser has no avif support:
<picture>
<source onmouseover="this.srcset='test.avif'" loading="lazy" data-srcset="lq.avif" type="image/avif" srcset="lq.avif">
<img onmouseover="this.src='test.jpg'" loading="lazy" src="lq.jpg`" data-src="lq.jpg">
</picture>
How do I prevent the image from changing immediately and showing an empty frame while loading the hq image?