Every current browser shows WebP, so a plain img works. A picture element keeps the JPG for email clients and apps that save the file instead of showing it. Width and height come from each image, so nothing jumps while loading.
<picture> <source srcset="hero-banner.webp" type="image/webp"> <!-- 360 KB --> <img src="hero-banner.jpg" width="1920" height="1080" alt="" loading="lazy"> <!-- 342 KB --></picture><picture> <source srcset="team-photo.webp" type="image/webp"> <!-- 387 KB --> <img src="team-photo.jpg" width="1600" height="1067" alt="" loading="lazy"> <!-- 417 KB --></picture><picture> <source srcset="product-red.webp" type="image/webp"> <!-- 9.4 KB --> <img src="product-red.jpg" width="1200" height="1200" alt="" loading="lazy"> <!-- 34 KB --></picture>