With the <picture> element you can easily serve up different file types depending on whether the browser supports them or not. This is really useful when it comes to WebP. WebP file sizes are 25-34% smaller in file size in comparison to jpegs, but are currently only supported by Chrome and Opera. So rather than using another javascript script to detect for webp browser support, the picture element can do it out of the box.

<picture>
<source srcset="/images/picture-demo/550_404.webp" type="image/webp">
<source srcset="/images/picture-demo/550_404.jpg" type="image/jpeg">
<img src="/images/picture-demo/fallback.jpeg" alt="fallback image">
</picture>