Images Optimization: decoding attribute

When you are programmatically optimizing images on your website, the decoding attribute can be a helpful tool, depending on your use case, in addition to other optimization techniques.

Simply, you add this attribute to the image and it can have 3 values:

1. decoding="sync" :
When the website loads, the main thread loads everything in order. When it encounters the image, it waits for the image to load and decode before continuing. This can be useful if images are essential to your use case, and it is better to wait for them to load. However, this will result in a longer loading time.

2. decoding="async" :
In this case, the main thread loads the image, but then continues to load the rest of the page and displays it. The image is displayed later, when it has loaded. This is suitable if images are not essential and will make the page load faster. However, it can cause layout shifting, which can affect your CLS performance metric. Therefore, if you know the dimensions of the image, it is a good idea to leave a blank space or skeleton for the image until it loads.

3. decoding="auto" :
Here, the browser is left to choose one of the other two options. This varies from browser to browser and is the default option if you do not specify it.