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.
Actually, 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.