Free tools Windows power users keep installed
One-click scans. No signup required.
Use lazy loading to defer images below the initial viewport, and use a low-quality image placeholder (LQIP) to show a small preview while an image loads. They solve different problems: lazy loading changes when the full image is requested; an LQIP changes what the reader sees during that wait. Keep the likely Largest Contentful Paint (LCP) image eager and readily discoverable.
What LQIP and lazy loading each do
| Technique | What it changes | Best fit |
|---|---|---|
| Lazy loading | Defers fetching an image until the browser judges it is closer to the viewport. | Images clearly below the initial viewport, where deferring them can reduce competition for bandwidth. |
| Low-quality image placeholder (LQIP) | Displays a small, low-detail preview while the full image loads. | Images where a visual transition is useful. It does not itself defer or accelerate the full-image request. |
These controls can be used together on an offscreen image, but neither should delay the likely LCP image. Browser lazy loading depends on layout to determine an image’s position, so a lazy-marked image that is actually visible at first load can be requested late.
Choose loading behavior by image position and importance
Below-the-fold content images
For images that are clearly outside the initial viewport, use the browser’s native loading attribute:
<img src="article-image.webp" alt="Description" width="800" height="533" loading="lazy">Explicit width and height reserve space before the image arrives and help avoid layout shifts. Confirm that a global component or CMS rule has not applied lazy loading indiscriminately to images visible on initial load.
#1 Best Overall
- Used Book in Good Condition
Hero and likely LCP images
Do not set loading="lazy" on the likely LCP image or another image visible immediately. Keep it in the initial HTML so the browser can discover it without waiting for layout and stylesheet processing. If measurements show the request needs to start sooner or receive more relative priority, test fetchpriority="high".
Preload and fetch priority address different issues: preload can make an otherwise undiscovered resource discoverable earlier, while fetch priority influences the relative importance of a request once it is fetched. Neither guarantees a particular result. The web.dev LCP guidance warns against lazy-loading the LCP image.
Rank #2
Check desktop and mobile separately
An image may be in the first viewport on a phone but below the fold on a desktop, or the reverse, depending on the layout. Inspect the actual page at the viewport sizes that matter and identify the real or likely LCP element before choosing a loading policy.
Add a small LQIP
Next.js Image component
In Next.js, placeholder="blur" displays a blurred image from blurDataURL. Supported static imports can receive a generated blur URL automatically, except for animated images. Dynamic and remote images need a supplied value. Keep the source for the blur small: Next.js recommends 10 pixels or less because it will be enlarged and blurred, and cautions that a large blur data URL can hurt performance.
Recommended Free Tools
Rank #3
<Image
src={photo}
alt="A descriptive alternative"
width={1200}
height={800}
placeholder="blur"
blurDataURL={smallBlurDataUrl}
loading="eager"
/>Use loading="lazy" in this example only when the image is below the initial viewport. Remove it for a hero or likely LCP image, then test whether eager discovery or fetch priority is needed. For remote images, provide dimensions because Next.js cannot inspect the file at build time; provide blur data when automatic generation is unavailable. See the current Next.js Image documentation for the installed version’s behavior. The current App Router docs say loading defaults to lazy and that Next.js 16 deprecates priority in favor of preload, so check your version rather than copying an older example.
Keep placeholder overhead in perspective
An LQIP can make loading feel more continuous, but it does not make the final image arrive earlier or necessarily improve LCP. The placeholder itself adds data to the page; a large inline blur URL can offset some of the benefit. Treat it as a visual treatment, not a substitute for choosing the right request timing or optimizing the full image.
Measure whether the changes help
- Record a baseline. Use the same page, viewport or device class, and test conditions before changing loading behavior. Note LCP and image request or byte behavior.
- Inspect the critical image. Check when the hero or likely LCP image request begins and whether it is discoverable from the initial markup. Confirm it is not delayed by lazy loading.
- Check offscreen requests. Verify that below-the-fold images are deferred and that the page is not fetching images the reader may never reach before critical content.
- Compare field results by device class. Where field data is available, compare mobile and desktop separately and focus on the 75th percentile. web.dev defines good LCP as 2.5 seconds or less at the 75th percentile, separately for mobile and desktop.
- Change one thing at a time. Compare lazy loading, placeholder size, and any preload or priority hint independently where practical. Keep a change only if the measured result or user-visible behavior improves without adding a critical-request delay.
Fetch Priority is a hint, not a directive. In one web.dev experiment that rewrote the Google Flights homepage using Cloudflare Workers, LCP changed from 2.6 seconds to 1.9 seconds. That is a result from one experiment, not an expected gain for other sites.
Troubleshoot common image-loading problems
- The hero image appears late: check for
loading="lazy"on the hero or likely LCP image. Remove it and make sure the image is present in the initial markup. Test priority or preload only if measurement indicates discovery or priority is the remaining issue. - Adding blur has not improved LCP: that is expected if the full image’s request or transfer time has not changed. LQIP affects the interim appearance, not the final image’s completion time.
- The placeholder increases page cost: reduce the blur source to a very small image and inspect the generated data URL. Next.js recommends a source image 10 pixels or less for its blur placeholder.
- A remote Next.js image has no blur or renders incorrectly: check that the image has explicit dimensions and that a blur data URL is provided when it cannot be generated automatically. Animated static imports do not receive an automatically generated blur URL.
- An initially visible image is being deferred on only one device class: inspect the layout at that viewport. Image position can change across responsive layouts; do not rely on a single desktop or mobile check.
- A priority hint has no visible effect: it is a hint, not a guarantee. Check request discovery, network conditions, and competing resources before adding more hints.
Or skip the browser setup
If your goal is to capture how a page looks rather than implement image-loading behavior in your own site, ScreenshotNeo provides a screenshot API. For example, save a screenshot of a page as WebP with one request:
Quick Recap
Best Value
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card, and paid plans start at $5 for 3,000 screenshots. Sign up for the free plan.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
