How to load different image formats according to browser support using HTML?
Tags: html
Published: 2022-12-12 05:31:34

---
  title: How to load different image formats according to browser support using HTML?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 11:01:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/load-different-image-formats-according-to-browser-support-html
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_917192d187.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/load-different-image-formats-according-to-browser-support-html)
  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
<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
<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
<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
<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.

![webp image format is loaded on the webpage](/uploads/Screenshot_2022_11_16_at_7_13_22_PM_161d9218df.png)

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](https://codesandbox.io/s/load-different-image-formats-according-browser-support-using-html-l8pe1o?file=/index.html).

That's all 😃.