How to load different image formats according to browser support using HTML?

November 17, 2022 - 4 min read

To load different image formats according to the browser using HTML, you can use the picture HTML tag, and inside that, you need to use the source and the img HTML tags.

The source HTML element is used to provide the sources for the different image formats. We one or more source HTML tags to define different image formats. The source tag needs the following attributes:

  • the srcset attribute to set the path to a particular image format url
  • the type attribute to set the type of the image.

The img HTML element tag is the important tag that should be placed inside the picture HTML element, without the img tag the picture tag will not render anything on the webpage.

It needs the following minimum attributes:

  • the src attribute to set the url for the default image that should be rendered if none of the image formats are supported by the browser.
  • In addition to the src attribute, we can also set the alt, width, height, loading, decoding, etc. for better performance of the webpage.

TL;DR

<html>
  <body>
    <!--
  The `picture` HTML tag is used to define
  different image formats and their sources
-->
    <picture>
      <!-- The `source` HTML tag to define different image formats and its type -->
      <source srcset="myImage.webp" type="image/webp" />
      <source srcset="myImage.webp" type="image/webp" />
      <!-- The `img` HTML tag to define the default image url -->
      <img src="myImage.jpeg" />
    </picture>
  </body>
</html>

For example, let's say we have 3 image formats that are accessible at three different URLs.

  • the first image format is the avif type
  • the second image format is the webp type
  • and the third image format is the default jpeg type.

We aim to load these image formats according to the support for rendering the image formats offered by the browser. (avif and webp image formats are the best image formats to render on a webpage since it offers more performance and less loading times without degradation in quality).

To do this, first, we can use the picture HTML tag like this,

<html>
  <body>
    <!--
  The `picture` HTML tag is used to define
  different image formats and their sources
-->
    <picture> </picture>
  </body>
</html>

Now we can define some image formats and their sources using the source HTML tag inside the picture HTML tag. The source HTML tag needs 2 attributes such as the srcset as well as the type attribute to set the image format url and its type respectively.

We have 2 image formats that are hosted in the root folder of the web page's index.html file:

  • 'myImage.webp' image with the type of image/webp
  • 'myImage.avif' image with the type of image/avif

These both look visually similar but the image formats are different.

The image format source and its type can be set using the source HTML tag like this,

<html>
  <body>
    <!--
  The `picture` HTML tag is used to define
  different image formats and their sources
-->
    <picture>
      <!-- The `source` HTML tag to define different image formats and its type -->
      <source srcset="myImage.webp" type="image/webp" />
      <source srcset="myImage.webp" type="image/webp" />
    </picture>
  </body>
</html>

Now, this alone won't work, we also need the img HTML tag inside the picture HTML tag to define the default image url if none of the image formats are supported by the browser.

it can be done like this,

<html>
  <body>
    <!--
  The `picture` HTML tag is used to define
  different image formats and their sources
-->
    <picture>
      <!-- The `source` HTML tag to define different image formats and its type -->
      <source srcset="myImage.webp" type="image/webp" />
      <source srcset="myImage.webp" type="image/webp" />
      <!-- The `img` HTML tag to define the default image url -->
      <img src="myImage.jpeg" />
    </picture>
  </body>
</html>

If any of the image formats are supported by the browser, then the browser will replace the default url defined in the img tag's src attribute with the supported image format url. Pretty cool right 😃!

Now let's load the webpage and go to the networks tab to see which image format is loaded by the browser.

As you can see from the above image that the webp image format is loaded by the browser as it supports which in turn improves the performance and is less in file size.

See the above code live in the codesandbox.

That's all 😃.