Grabbed from NYStudio. This snippet provides: lazy loading if the browser supports it, webp if the browser supports it, and a srcset of optimized responsive images that the browser can choose from.
<picture>
<source
srcset="/path/_1170x658/man-with-a-dog.jpg 1170w,
/path/_970x545/man-with-a-dog.jpg 970w,
/path/_750x562/man-with-a-dog.jpg 750w,
/path/_320x240/man-with-a-dog.jpg 320w"
sizes="100vw" />
<source
srcset="/path/_1170x658/man-with-a-dog.webp 1170w,
/path/_970x545/man-with-a-dog.webp 970w,
/path/_750x562/man-with-a-dog.webp 750w,
/path/_320x240/man-with-a-dog.webp 320w"
sizes="100vw"
type="image/webp"
/>
<img
src="/path/man-with-a-dog-placeholder.jpg"
alt="Man with a dog"
style="object-fit: cover;"
loading="lazy"
/>
</picture>