Firefox 75 adds native lazy loading for images. Web developers can tell the browser to hold back an image until the reader scrolls near it, instead of fetching every picture on the page as soon as it opens. Chrome already supported the same loading attribute, so a page written for one browser now behaves the same way in the other.
What lazy loading does
A long article or a product listing can carry dozens of images, and most of them sit far below the part of the page you first see. Without lazy loading, the browser downloads all of them up front. That costs data and memory and slows the first paint of the page.
Mozilla’s release notes for Firefox 75 sum up the benefit: you save bandwidth and reduce browser memory by using the loading attribute on the <img> element. The default value, eager, loads images immediately. The lazy value delays loading until the image is within range of the viewport.
How to use the loading attribute
There is nothing to switch on for readers. The feature is used by the page author, and it takes one attribute:
- Find the images that sit below the first screen of the page.
- Add
loading="lazy"to each of those<img>tags, for example<img src="photo.jpg" loading="lazy" alt="...">. - Leave the images at the top of the page as they are (or set
loading="eager"), so the first view still appears at once. - Keep
widthandheighton lazy images so the layout does not jump when they arrive. - Reload the page and scroll: images below the fold are now requested only as you approach them.
Browsers that do not know the attribute simply ignore it and load the image normally, so adding it is safe.
When it reached Firefox
The feature shipped to everyone with Firefox 75, which Mozilla released on April 7, 2020. MDN’s developer notes for that version list it as the loading attribute on HTMLImageElement, with the lazy value (Firefox bug 1542784).
Firefox 75 itself was mostly known for its redesigned address bar: a cleaner search view, top sites shown as soon as you select the bar, and better search suggestions. If you like to tune the browser yourself, many of these behaviours have switches you can change with Firefox’s about:config page.
What about iframes?
Firefox 75 covered images only. Lazy loading of <iframe> elements, such as embedded videos and maps, came much later: MDN lists it in the developer notes for Firefox 121. The hint is the same loading="lazy" attribute, and it can speed up the first load because some frames never need to be fetched at all.
Today
Native lazy loading is now standard across Firefox, Chrome and Edge, and it has largely replaced the JavaScript lazy-load libraries that sites used before. For a reader there is still nothing to configure. If a page feels heavy on a slow connection, the fixes are on the site’s side; on your side, a stale cache can still cause odd loading, which a hard refresh usually clears.
