HTML loading Attribute
Description
The loading
attribute is an HTML attribute used to specify how a browser should load images and iframes on a webpage. It's designed to improve page load times and conserve bandwidth by instructing the browser on whether to load an image or iframe immediately or to defer its loading until certain conditions are met, such as when the element scrolls into the viewport. The attribute can take two values:
lazy
: When set tolazy
, the browser delays loading the image or iframe until it's about to enter the viewport. This behavior is beneficial for images and iframes that are off-screen at the time the page is loaded, as it allows the page to load faster by only loading visible content initially.eager
: Setting theloading
attribute toeager
instructs the browser to load the image or iframe as soon as possible, ignoring whether it's currently visible on the screen or not. This is the default behavior for images and iframes without a specifiedloading
attribute.
Implementing the loading
attribute is straightforward and only requires adding it to an <img>
or <iframe>
tag in the HTML code, like so:
<img src="example.jpg" loading="lazy" alt="An example image">
This attribute is particularly useful for improving the user experience on websites with many images or iframes, such as galleries or article pages, as it can significantly reduce initial load times and save data for users on limited bandwidth connections. However, it's important to ensure that critical images, such as logos or navigation icons, are set to load eagerly to avoid any impact on the usability of the site.
Syntax
<img loading="eager | lazy" />
Values
- eagerSetting the
loading
attribute toeager
instructs the browser to load the image or iframe as soon as possible, ignoring whether it's currently visible on the screen or not. This is the default behavior for images and iframes without a specifiedloading
attribute. - lazyWhen set to
lazy
, the browser delays loading the image or iframe until it's about to enter the viewport. This behavior is beneficial for images and iframes that are off-screen at the time the page is loaded, as it allows the page to load faster by only loading visible content initially.
Applies To
The loading
attribute can be used on the following html elements.
Example
<h1>Content above the fold</h1>
<img src="images/sunset.jpg" alt="Important Image" loading="eager">
<p>More content...</p>
<br><br>
<img src="images/pittsburgh.jpg" alt="Large Image" loading="lazy">
Browser Support
The following table will show you the current browser support for the HTML loading
Attribute.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 77 | 75 | 64 | 15.4 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
77 | 79 | 55 | 15.4 | 12 | 77 |
Last updated by CSSPortal on: 28th March 2024