is it possible to add the “fetchpriority=high” attribute for hero banners / background images to elements?
lazyload for images exists. however, this attribute would be very useful for hero banners in terms of the loading speed of a website.
the fetchpriority attribute is a relatively new HTML attribute that you can use with an <img> tag, like this:
<img src="hero.jpg" fetchpriority="high" alt="Hero image">
purpose
with fetchpriority="high", you tell the browser:
“This element (usually an image) is very important—please load it as quickly as possible!”
typical usage
- hero images (large header images at the top of a page)
- above-the-fold images (everything visible without scrolling)
- not for small or less important images, for example, in the footer.