Short answer: Lazy loading waits to download an image until the visitor scrolls near it. You turn it on by adding loading="lazy" to an img tag, with no JavaScript library. Use it for images further down the page, not for images in the first screen. The main image at the top should load right away with fetchpriority="high".
The attributes that control image loading
| Attribute | What it does | Use it on |
|---|---|---|
loading= | Waits until the image is near the screen | Images further down the page |
loading= | Loads the image right away, the default | Images in the first screen |
fetch | Raises the priority of the download | The main image, often the LCP |
width and height | Reserves the space before the image arrives | Every image |
Without the attribute, an image loads eagerly, the browser’s default. An image with loading="lazy" and fetchpriority="high" still waits while it’s off-screen, so the two together rarely make sense.
From web.dev, “Browser-level image lazy loading for the web”, read November 3, 2026.
Which images to lazy-load
Images below the first screen are good candidates: if nobody scrolls that far, the browser never downloads them. Chrome starts fetching a lazy image before it becomes visible. In its tests on Android, 97.5% of lazy images on 4G had fully loaded within 10 milliseconds of appearing.
The risk is at the top of the page. web.dev warns against lazy-loading images likely to be in the first screen, especially the image that becomes the Largest Contentful Paint. Its analysis found that loading first-screen images eagerly and lazy-loading the rest gives fewer bytes and better Core Web Vitals. Our guide to Core Web Vitals explains LCP.
Hidden images and carousels
Chrome, Safari and Firefox don’t load images hidden with display: none, on the image or on a parent. Other ways of hiding an image, such as opacity: 0, still make the browser download it.
Test carousels and images you hide on some screen sizes after you change how images load.
How to lazy-load your images
- Open the page and note which images show in the first screen, on a phone and on a computer.
- Leave those images without loading="lazy", or set loading="eager".
- Add fetchpriority="high" to the main image at the top.
- Add loading="lazy" to the images further down the page.
- Give every image its width and height attributes.
- Check that hidden or carousel images still appear when they should.
- Run the page through PageSpeed Insights and compare the LCP before and after.
How our home page loads its images
At 1:41 AM on November 3 we read our home page as a visitor. It has 23 img tags. The first image of the opening wall loads eagerly with fetchpriority="high", and the page preloads one image.
The next three images of that wall load eagerly too, the two header logos have no loading attribute, and the other 17 images use loading="lazy".
Before you publish a page
- No image in the first screen has loading="lazy".
- The main image at the top has fetchpriority="high".
- Images further down use loading="lazy".
- Every image has width and height.
- Hidden and carousel images still show when they should.
- PageSpeed Insights shows no slower LCP after the change.
RememberLazy-load what sits below the first screen and load the top image right away with high priority. Give every image its size, so nothing jumps while it loads.
If you want a site that loads fast on phones, see our web design service. Our guide to alt text covers the other attribute every image needs.
Quick answers about lazy loading
Does lazy loading help SEO?
It can help page speed by not fetching images nobody scrolls to, and faster pages are easier on visitors. Used on the main image at the top, it can slow down the Largest Contentful Paint, so leave that image eager.
Do I still need JavaScript for lazy loading?
No. The loading attribute lets the browser lazy-load images without custom code or a separate library. web.dev adds that the images still load if JavaScript is off, although the loading is only deferred when JavaScript is enabled.
How far from the screen does Chrome start loading a lazy image?
web.dev says Chrome uses about 1,250 pixels on fast 4G connections and 2,500 pixels on 3G or slower ones. That way most images are ready by the time someone scrolls to them.
Should I set width and height on lazy images?
Yes. The browser doesn’t know an image’s size before it loads it, so web.dev recommends width and height attributes on every img tag. That reserves the space and avoids layout shifts.
Can I lazy-load videos and maps too?
Iframes, which many video and map embeds use, accept the same loading attribute: loading="lazy" on an iframe defers it the same way. Test the page afterwards to check that the embed still appears.
Sources
Read on November 3, 2026. web.dev: Browser-level image lazy loading for the web and The performance effects of too much lazy loading. Our own case: the img tags of our home page, on November 3, 2026.