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.
Top comments (0)