This page will load and display a webp image based on the size of the browser; loading multiple images only as the browser width is changed; and only loading/showing the jpg if the users browser doesn't support WebP. The page uses responsive design to show everything properly sized for the browser on all device sizes. The page also uses adaptive design to only load the image needed. Generally you would create multiple sizes of an image and would probably only show one based on the width of the browser, but for this page multiple images are shown to demonstrate how it works.
To see behind the scenes, right-click and "inspect", select "Network", and reload the page. You'll see at least one of the images below in the network area of the inspect window. Then resize the window to see more images appear in the network area of the inspect windo.
The idea is to show an image sized appropriately for the browser. Larger browsers need higher quality images at larger file sizes which take longer to download. JPG and PNG image formats have been the standard on the web since it began. WebP is a higher compression format created by Google in 2010 and began getting main stream browser support in 2021. It's recommended to use the picture tag, one or more source media's, then a standard image tag (img src=) for an image these days. WebP's can be compressed at multiple quality levels. These images were compressed at 50%.