For should you lazy load images, file size is only one part of performance. Discovery, request priority, responsive selection, intrinsic dimensions, caching, decode, and paint can matter just as much as the number of kilobytes in the file.
Lazy loading is a scheduling tool, not an optimization badge. It works well for content that starts outside the viewport because those bytes can wait until they are likely to be needed.
Applying lazy loading indiscriminately to above-the-fold imagery can delay a resource the user is waiting to see, especially when that image becomes the LCP element.
Short version: Start with the image’s actual job, remove waste the layout cannot use, encode once from a good source, and verify the result in the real page. Smaller is useful only while the image remains visually and technically fit for purpose.
What browser lazy loading does
Native lazy loading delays image fetches that are not immediately needed. That is useful below the fold, where the visitor may never scroll far enough to see the resource.
For images already visible on load—especially a likely LCP image—lazy loading can add delay instead of removing it. Loading strategy should therefore follow viewport importance, not a rule that every image must use loading="lazy".
Use the first viewport as the dividing line. Images well below it are good lazy-loading candidates; images already needed to construct the first screen should normally be discoverable without waiting for a scroll threshold.
Good candidates
Responsive image markup lets the browser choose from multiple source widths rather than downloading one oversized file for every viewport. In HTML, srcset lists candidates and sizes describes the expected rendered width under layout conditions.
Google recommends retaining a normal src fallback even when using srcset or <picture>. That helps browsers and crawlers that do not understand every responsive-image attribute and provides a stable discoverable URL.
Bad candidates
Responsive image markup lets the browser choose from multiple source widths rather than downloading one oversized file for every viewport. In HTML, srcset lists candidates and sizes describes the expected rendered width under layout conditions.
Google recommends retaining a normal src fallback even when using srcset or <picture>. That helps browsers and crawlers that do not understand every responsive-image attribute and provides a stable discoverable URL.
LCP warning
Largest Contentful Paint measures when the largest relevant image or text block in the viewport is rendered. web.dev recommends a good LCP of 2.5 seconds or less for at least 75% of visits.
For an image LCP, examine the full chain: server response, when the browser discovers the resource, its priority, transfer size, decode time, and when the layout can paint it. A late-discovered 80 KB hero can lose to an earlier 140 KB hero.
In DevTools, find the actual LCP element and its network request. Note when the request starts, its priority, transfer size, and whether CSS or JavaScript delayed discovery. That timeline tells you whether to compress, preload, change markup, or change priority.
WordPress
This part of should you lazy load images is best understood as a trade-off rather than a fixed rule. The right choice depends on the visual role of the image, the publishing environment, and what happens to the file after it leaves the editor.
Use representative files and verify the result in the real destination. A workflow that looks good on one sample can fail on transparency, fine text, gradients, noisy photographs, or very large source dimensions.
Testing
This part of should you lazy load images is best understood as a trade-off rather than a fixed rule. The right choice depends on the visual role of the image, the publishing environment, and what happens to the file after it leaves the editor.
Use representative files and verify the result in the real destination. A workflow that looks good on one sample can fail on transparency, fine text, gradients, noisy photographs, or very large source dimensions.
Checklist
Use a repeatable order instead of random tweaking: start from the best source, remove dimensions the layout cannot use, select a format that fits the content, choose a conservative quality level, inspect the result, and only then push harder if the remaining bytes matter.
After publishing, measure the real page. Optimization is complete when the resource fits the visual requirement and the page performs well—not when a standalone tool reports the smallest number you can produce.
Worked example: a slow hero image
For should you lazy load images, assume PageSpeed Insights or DevTools identifies a homepage hero as the LCP element. The file is 350 KB—not outrageous—but the request starts late because the image is injected by JavaScript and also marked for lazy loading. Converting it to 220 KB helps transfer time, but the page can remain slow because discovery and scheduling are still wrong.
A complete should you lazy load images fix would make the resource discoverable early in initial markup, avoid lazy-loading the LCP candidate, use an appropriate responsive source, reserve its layout space, and consider fetchpriority="high" only when that hint addresses a real priority problem. Then measure again.
Practical takeaway
For should you lazy load images, make one decision at a time and verify it in the final destination. Use the page’s actual dimensions, content type, compatibility needs, and user-visible result as the constraints. The goal is not to win a synthetic file-size contest; it is to publish an image that is efficient, understandable, and reliable for its job.
Try it on a real image
Use the compressor to apply this article to a real source image. Optimize bytes before delivery behavior The image operation runs in your browser, which makes it practical to compare dimensions, format, output bytes, and visual quality without first sending the selected image to a remote compression endpoint.
Continue reading
Frequently asked questions
Should all images be lazy loaded?
Lazy-load offscreen images, but avoid delaying an image that is visible immediately and likely to become the LCP element.
Good for SEO?
For should you lazy load images, choose from the image’s visual role, compatibility requirements, and the measured result rather than a generic rule.
Hero images lazy?
Lazy-load offscreen images, but avoid delaying an image that is visible immediately and likely to become the LCP element.
What does loading=lazy do?
Lazy-load offscreen images, but avoid delaying an image that is visible immediately and likely to become the LCP element.
Editorial note
Image formats, browser behavior, WordPress media support, and search guidance can change. This article is written to distinguish durable principles from version-specific behavior; version-sensitive claims should be rechecked during scheduled content refreshes.
Sources and further reading
- web.dev: Optimize Largest Contentful Paint
- web.dev: Browser-level image lazy loading
- web.dev: Serve responsive images
- web.dev: Fetch Priority API
Image Performance & Core Web Vitals
- Image Optimization for Website Speed
- How Images Affect Core Web Vitals
- How to Optimize the Largest Contentful Paint Image
- Should You Lazy Load Images?
- Why You Shouldn’t Lazy Load Your Hero Image
- Responsive Images: How srcset and sizes Work
- How Image Dimensions Help Prevent Layout Shift (CLS)
- When Should You Use fetchpriority=”high” on Images?