Do you know the
decoding attribute for images? You can combine it with the
loading attribute like that:
<img alt="" src="" decoding="async" loading="lazy">
There are 3 possible values:
sync: force synchronous decoding
async: force asynchronous decoding
auto: let the browser decides (~ no preference) - the defaut value
Browser support is not that bad (~ 66% at the time of writing).
Pratically speaking, when the
decoding attribute is set to
async, the browser can parallelize the image decoding process, which might significantly improve the page rendering, as it can be an expensive operation, especially with large images.
async puts image decoding off the main thread and can thus save some CPU. As far as I know, it’s safe to use even with browsers that do not support it yet.
async is not the default value probably because of some edge legacy issues, but I don’t see why you would not use it in most cases.