Does native lazy loading work in all browsers?

Native lazy loading is supported by all major current browsers. No JavaScript fallback is needed for modern browsers.

Can I use fetchpriority high with a lazy-loaded image?

There is no point. The fetchpriority="high" attribute asks the browser to fetch the image early, which contradicts lazy loading. Use it only on the LCP hero image that is not lazy-loaded.

Should I lazy load images that are part of a carousel or slider?

Only if the carousel is below the fold and the visitor must scroll to see it. If the carousel is above the fold, do not lazy load any of its images.

Does lazy loading affect SEO?

Search engines can still discover lazy-loaded images as long as the <img> tag is present in the HTML with a valid src attribute. The loading="lazy" attribute does not hide the image from crawlers.

Lazy Loading Images the Right Way

Use the native loading="lazy" attribute to defer off-screen images. Skip it on the LCP hero image. Lazy loading cuts bytes for images visitors never scroll to, but visible images still need optimising. Lazy loading complements JPEG optimisation, it does not replace it. Do both for a fast, efficient page.

How Native Lazy Loading Works

Add loading="lazy" to <img> and <iframe> elements to defer loading until they approach the viewport. All major current browsers support native lazy loading. No JavaScript required. You add the attribute, and the browser handles the rest. This is the simplest way to implement lazy loading images.

Set width and height attributes on lazy images to prevent layout shift. The browser reserves the space before the image loads, so the page doesn't jump when the image appears.

The LCP Hero Image Mistake

The Largest Contentful Paint (LCP) image, usually the hero image, should not be lazy-loaded. Lazy loading delays the start of the image request. That pushes back the LCP event and hurts perceived performance. The browser needs that image early to paint the main content.

Use Fetchpriority High on the LCP Image

Add fetchpriority="high" on the LCP image to ask the browser to fetch it early, prioritising it over other resources. This attribute works alongside native lazy loading. Set fetchpriority="high" on the hero image without loading="lazy", and use loading="lazy" on images below the fold.

Decoding Async for Off-Main-Path Rendering

The decoding="async" attribute allows the browser to decode images off the main rendering path. Apply it to any image, including the LCP image, to avoid blocking the rendering thread. It does not affect when the image is fetched, only how it is decoded.

When to Use Native Lazy Loading

Images Worth Deferring

Below-the-fold images: Any image the visitor has to scroll to see is a candidate for lazy loading.
Image galleries or grids: If a page has many thumbnails, lazy loading prevents the browser from requesting all of them at once.
Long articles: Inline images that appear later in the text can be lazy-loaded.

Images to Load Normally

Avoid lazy loading the LCP hero image, logos, or any image that appears above the fold and contributes to the initial viewport. Defer only what the visitor may never scroll to.

How Lazy Loading Complements JPEG Optimisation

Lazy loading reduces bytes only for images the visitor never scrolls to. Visible images still need optimising. JPEG optimisation reduces the file size of every image, whether it is lazy-loaded or not. The two techniques work together. Lazy loading saves bandwidth on unseen images, and optimisation saves bandwidth on all images.

If a page has ten images and a visitor scrolls to three, lazy loading skips the seven unseen images entirely. The three visible images still need to be as small as possible. That is where JPEG optimisation comes in. Tools like jpegoptim.com compress JPEGs for the web without visible quality loss.

Lazy loading does not replace JPEG optimisation. Optimise every image before adding it to the page, then apply lazy loading selectively.

Common Mistakes to Avoid

Lazy loading the LCP hero image. This delays the Largest Contentful Paint. Keep the hero image as a standard <img> without loading="lazy", and consider adding fetchpriority="high".
Omitting width and height. Without dimensions, the browser cannot reserve space. Layout shifts when images load.
Lazy loading images above the fold. Only images the visitor must scroll to should be lazy-loaded. Above-the-fold images should load normally.
Relying solely on lazy loading for small file sizes. Lazy loading does not reduce the file size of visible images. You still need JPEG optimisation.

Putting it All Together

Follow these steps to implement lazy loading images the right way:

Optimise all JPEGs using a tool like jpegoptim.com before uploading them.
Identify the LCP hero image. Do not add loading="lazy" to it. Optionally add fetchpriority="high" and decoding="async".
For all other images below the fold, add loading="lazy" along with width and height attributes.
Test the page to confirm the LCP image loads early and lazy images load only as the visitor scrolls.

This combination of native lazy loading, proper LCP handling, and JPEG optimisation gives you a fast, efficient page without unnecessary bytes.