Search code examples
htmlimagepngbrowser-supportavif

How do display .avif images in not supporting browsers?

i want to all my big .png files to .avif . But Browsers like MS Edge etc. do not support .avif images. Is there any way to display .avif files in f.e. Edge, or provide the Browser two images (.png and .avif) and the browser decides, which image to display?

My Code:

<a href="./"><img src="img/logo.avif" alt="Logo – Test"></a>

Solution

  • There is no way to display .avif file in MS Edge, but there is a way for the browser to decide which format to display.

    <a href="./">
  <picture>
    <source srcset="img/logo.avif" type="image/avif">
    <source srcset="img/logo.png" type="image/png">
    <img src="img/logo.png" alt="Logo – Test">
  </picture>
</a>