Using Modern Image Formats

Modern Image Format, i.e. webp are more compressed than other formats like JPEG, but their qualities almost the same.

To convert, you can use Cloud Converter

However, some browsers don’t support webp format, To support modern image formats, we can use the picture element with multiple sources. The picture element should always contain an img element otherwise the image is not shown.

<body>
  <picture>
    <source type="image/webp" srcset="images/meal.webp" />
    <source type="image/jpeg" srcset="images/meal.jpg" />
    <img src="/images/meal.jpg" alt="A bowl of salmon and curry" />
  </picture>
</body>