Which images should a small business website lazy-load?

Use lazy loading for images that visitors don’t need when the page first opens. Keep an important image near the top of the page available for immediate loading. On a small business website, that usually means treating a main banner differently from a project gallery farther down.

The right choice depends on the actual layout. A photograph that sits below the opening text on a desktop screen may appear in a different position on a phone. Check the page before applying the same setting to every image.

Start With the First Visible Image

Consider an example repair-company homepage with a main photograph, introductory text and six project images below a services section. The main photograph helps explain the service as the page opens. The lower gallery can wait until the visitor approaches it.

Google’s web development documentation, browser-level image lazy loading, advises against lazy-loading images that are likely to be visible initially, particularly an image that contributes to Largest Contentful Paint. That metric concerns when the largest eligible image or text block becomes visible in the initial viewport.

Inspect the first screen at the widths your visitors are likely to use. Watch for banners hidden by a cookie notice, different mobile crops and galleries moved above the main text. The element that matters on one layout may change on another.

Use Native Loading for the Lower Gallery

The HTML loading attribute gives the browser a loading preference. For a gallery below the opening screen, loading="lazy" lets it defer image fetching until the image approaches the viewport. The browser chooses its own threshold, so don’t expect a request to start at one exact scroll position.

Here’s an original markup example. The file paths are illustrative and need to be replaced with images your site actually serves. Each pair of dimensions matches the aspect ratio of its example file.

<img src="/images/gate-repair-banner.jpg"
     width="1200" height="800"
     alt="Repaired timber gate beside a garden path"
     loading="eager">

<img src="/images/gate-hinge-detail.jpg"
     width="800" height="600"
     alt="New hinge fitted to the lower rail of a timber gate"
     loading="lazy">

Use the first description only if the picture really shows that scene. The descriptions demonstrate how an informative photograph can communicate its subject. A purely decorative image needs a different treatment, including an empty alternative-text value where appropriate.

Native lazy loading is a reasonable starting point for a simple gallery. If the website already has a script that replaces image sources or controls a carousel, ask the developer which system controls loading. Layering another mechanism onto it can make troubleshooting harder.

Reserve Space and Choose Sensible Files

Image loading and image sizing are separate decisions. Mozilla’s image element reference explains how width and height attributes let the browser calculate an aspect ratio before the file arrives. That helps it reserve space. The surrounding styles must still allow the image to fit its container.

img {
  max-width: 100%;
  height: auto;
}

Those rules are a simple responsive-image example, not a complete stylesheet for every design. If the layout deliberately crops photographs into fixed shapes, check the crop separately. Reserving a rectangle with the wrong proportions can still produce an awkward result.

Lazy loading also leaves the file’s byte size unchanged. A very large photograph remains a large download when the browser eventually fetches it. Prepare a version appropriate for the displayed size, inspect the exported quality and record its file size. Keep the original photograph somewhere separate so a smaller website export doesn’t become your only copy.

Compare the Page Under Repeatable Conditions

Make the change on a preview or staging version first. Use one comparison at a time, such as changing only the gallery’s loading attributes. If you replace images, alter the layout and remove scripts at the same time, it becomes difficult to identify which change produced an observed difference.

Use a short test log with the page address, browser, viewport, network setting and whether the cache was cleared. Then run the following checks:

• Open the page without scrolling and watch whether the main image appears promptly.
• Inspect the network requests to see which gallery files load initially.
• Scroll slowly through the gallery and look for images arriving too late.
• Watch whether text or buttons move as photographs appear.
• Repeat with a smaller viewport and a fresh navigation.

Repeat the comparison before drawing a conclusion from a single run. Browser caches and network variation can make two visits look very different. A local test also can’t establish how all real visitors experience the page.

If a gallery image repeatedly appears late, reconsider its position and loading setting. A short page with only one small photograph may gain little from additional loading controls. Keep the setting that supports the actual page, and retain the test notes so a later redesign can revisit the decision.