Lazy loading images means delaying off-screen images until the browser thinks they are close enough to be needed. Used correctly, it can reduce initial page weight, save bandwidth, and let the most important above-the-fold content load sooner.
The rule is simple: lazy-load images that are not immediately needed, but do not lazy-load the hero or other image that becomes your Largest Contentful Paint.
What Image Lazy Loading Actually Does
By default, an image can be fetched as soon as the browser encounters it in the page.
Native lazy loading changes that behaviour with:
loading="lazy"
The browser can then defer downloading the image until it gets near the viewport.
MDN's current `img` element documentation explains that lazy loading avoids network and storage bandwidth until the image is reasonably likely to be needed.
That is especially useful on long pages containing:
- team galleries;
- case-study screenshots;
- blog images;
- portfolio sections;
- product grids;
- testimonial photos;
- maps or embedded media.
If a visitor never scrolls far enough to see an image, the browser may never need to download it.
Why Lazy Loading Can Make a Site Feel Faster
Images are often among the heaviest assets on a business website.
If a page contains 20 images but only three are visible when the page opens, downloading all 20 immediately can compete with resources that matter more.
Lazy loading can reduce that competition.
It can help:
- reduce initial network requests;
- lower the amount of data transferred;
- make the first view available sooner;
- reduce unnecessary mobile-data usage;
- prevent lower-page media from competing with critical assets.
This does not replace compression or responsive images. It is one part of a broader image-delivery strategy.
Do Not Lazy-Load the LCP Image
This is the most important rule.
On many websites, the hero image is the Largest Contentful Paint (LCP) element.
If that image uses loading="lazy", the browser may intentionally delay fetching the resource you actually need as early as possible.
That can make LCP worse.
Veil Vertex's guide to Largest Contentful Paint explains why the main visual should be discoverable and prioritised early.
For a hero/LCP image, use normal eager loading and, where appropriate, a higher fetch priority rather than lazy loading.
Lazy loading is for non-critical media.
Which Images Should Usually Be Lazy-Loaded?
Good candidates include images that begin below the initial viewport.
Examples:
- blog illustrations farther down the article;
- lower-page portfolio images;
- secondary staff photos;
- FAQ illustrations;
- long galleries;
- below-the-fold screenshots;
- logos inside deep content sections;
- images in cards that appear far below the hero.
If the user must scroll before the image becomes relevant, lazy loading is often appropriate.
Which Images Should Usually Stay Eager?
Do not automatically add lazy loading to every image.
Images that should usually load immediately include:
- the hero image;
- an above-the-fold service image;
- the first major product image;
- a prominent logo where its loading affects layout or brand presentation;
- any image confirmed as the LCP element.
The browser should receive critical visual information early.
The goal is not "lazy-load everything." The goal is to avoid spending bandwidth on images the visitor does not need yet.
Always Set Width and Height
Lazy-loaded images should still have explicit dimensions.
MDN recommends specifying width and height so the browser can calculate the image's aspect ratio before the file arrives.
That allows the browser to reserve space in advance.
Without reserved space, a delayed image can suddenly push surrounding text or buttons downward when it loads, causing layout shift.
A basic example is:
<img src="team.jpg" loading="lazy" width="800" height="600" alt="Our project team">
The dimensions establish the aspect ratio even if CSS later scales the image responsively.
Use Responsive Images as Well
Lazy loading controls when an image is fetched.
Responsive images control which size the browser downloads.
Use srcset and sizes where appropriate so a phone does not download the same oversized file intended for a large desktop screen.
A good image strategy combines:
- correct dimensions;
- efficient compression;
- modern formats where appropriate;
- responsive sizing;
- lazy loading for below-the-fold media;
- eager/high-priority loading for critical imagery.
Each solves a different problem.
Native Lazy Loading Is Usually Enough
Older websites often used JavaScript libraries or scroll listeners to implement lazy loading.
Modern browsers support native image lazy loading broadly, so many business websites can use the built-in loading="lazy" attribute instead.
That keeps the implementation simpler and avoids adding more JavaScript merely to delay images.
Custom lazy-loading logic can still make sense for unusual interfaces, but it should solve a real requirement rather than duplicate browser behaviour.
Use the FOLD Framework
Veil Vertex uses a simple framework for deciding whether to lazy-load an image:
F — First view: Is the image visible immediately? If yes, it probably should not be lazy-loaded.
O — Outcome: Would delaying it help reduce initial bandwidth or competition for critical resources?
L — Layout reserved: Are width and height defined so the delayed image will not shift the page?
D — Device-sized: Is the browser also receiving an appropriately sized image through responsive delivery?
This prevents lazy loading from becoming a checkbox that is applied blindly.
Common Lazy-Loading Mistakes
Lazy-loading every image
This can delay the hero and hurt LCP.
Using lazy loading instead of compression
A 3 MB image is still a 3 MB image when it finally loads.
Omitting dimensions
The image may create layout shift when it appears.
Lazy-loading content just below the fold too aggressively
If an image is almost immediately visible on common devices, delaying it may create a noticeable blank area.
Adding a heavy JavaScript library for basic image lazy loading
Native browser support can often do the same job with less code.
Lazy Loading Checklist for a Business Website
Before publishing, confirm:
- the hero/LCP image is not lazy-loaded;
- below-the-fold images use lazy loading where useful;
- every meaningful image has appropriate alt text;
- width and height reserve layout space;
- responsive images prevent oversized downloads;
- image files are compressed appropriately;
- lazy-loaded images do not appear as distracting blank gaps;
- galleries and long content pages defer non-critical media;
- mobile performance is tested;
- field performance improves rather than only a single lab score.
If image loading is still slowing the first view, a Veil Vertex website audit can identify whether the real bottleneck is the image itself, LCP priority, server response, or the page's broader loading path.
Load Less Now, Not Less Forever
Lazy loading does not magically make images smaller. It changes when the browser spends bandwidth on them.
Use it to keep off-screen images out of the critical loading path, combine it with responsive sizing and compression, and keep the hero image eager.
That gives visitors the content they need first without forcing every image on the page to compete for bandwidth immediately.
Veil Vertex builds performance-focused business websites where page speed, image delivery, and conversion design are planned together. Learn more about Veil Vertex or begin with a website audit.