Free tools Windows power users keep installed
One-click scans. No signup required.
To improve image performance, first identify the image driving the page’s Largest Contentful Paint (LCP), then make it discoverable early, serve a suitably sized and compressed file, and defer only images that are offscreen. Measure the change afterward: image bytes matter, but discovery delays, download priority, and rendering work can also hold up the page.
1. Find the image delay that matters
Start with the likely LCP element—the largest visible image or text block in the initial viewport. If it is an image, distinguish a slow download from a request that starts too late or an image that finishes downloading but cannot render yet. LCP can be delayed at several stages: time to first byte, resource load delay, resource load duration, and element render delay. (See web.dev’s LCP guidance.)
| # | Preview | Product | Price | |
|---|---|---|---|---|
| 1 |
|
Image Optimization | $9.99 | Buy on Amazon |
| 2 |
|
Local Image SEO | $19.95 | Buy on Amazon |
| 3 |
|
Optimization Over Integers | $103.12 | Buy on Amazon |
| 4 |
|
Diagnostic Sonography Mastery Workbook: A Case-Based Guide to Ultrasound Physics, Image... | $25.99 | Buy on Amazon |
| 5 |
|
Machine Learning: A Bayesian and Optimization Perspective | $104.10 | Buy on Amazon |
- Measure the page with a lab tool and inspect field performance when available. Compare mobile and desktop rather than assuming one represents the other.
- In browser DevTools, inspect the LCP element and its image request. Check when the request begins, its priority, how long it downloads, and whether the element renders only after scripts or stylesheets run.
- Use the breakdown to choose the fix. If the request begins late, improve discovery or priority. If downloading dominates, reduce or better match the image bytes. If rendering is delayed, investigate render blockers and main-thread work.
Google’s archived Web Vitals guidance recommends an LCP of 2.5 seconds or less and evaluating the 75th percentile separately for mobile and desktop. Treat that as the metric-specific target cited in that guidance, not a guarantee that changing image format alone will achieve it. Google’s Web Vitals guidance
2. Serve images at the size the layout needs
Use the rendered CSS dimensions as a starting point, then account for viewport changes and device pixel ratio. A 500-by-500 CSS-pixel box does not automatically need a 1000-by-1000-pixel file; a high-density screen may benefit from a larger intrinsic image for sharpness. Avoid sending a much larger source to every device by default.
#1 Best Overall
For responsive images, srcset lists available candidates and their intrinsic widths; sizes tells the browser the image’s expected rendered width under the layout conditions. The browser uses those hints to select a suitable candidate.
<img
src="/images/article-800.jpg"
srcset="/images/article-480.jpg 480w,
/images/article-800.jpg 800w,
/images/article-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 80vw,
800px"
width="800"
height="600"
alt="A sample article image">Here, the browser is told that the image fills the viewport up to 600 pixels, occupies 80% of the viewport up to 1000 pixels, and is otherwise expected to render at 800 pixels wide. Adjust those values to match the actual CSS layout. If sizes overstates the rendered width, the browser may choose a larger file than needed. Provide a useful set of candidates, but avoid generating so many variants that HTML, caches, and image-processing work become difficult to manage.
3. Choose formats and compression by image content
WebP and AVIF can produce smaller images than older formats, but the outcome depends on the source image, quality settings, and browser support. Compare outputs visually at the quality you plan to ship. Pay particular attention to text, line art, sharp edges, and high-contrast colored text on flat backgrounds, where lossy compression can make artifacts conspicuous. Lossless compression preserves image data, but the amount of file-size reduction varies.
Rank #2
Use <picture> to offer preferred formats with a fallback. The browser selects the first supported source:
<picture>
<source srcset="/images/hero.avif" type="image/avif">
<source srcset="/images/hero.webp" type="image/webp">
<img src="/images/hero.jpg" width="1600" height="900"
alt="A landscape at sunrise">
</picture>WebP supports lossy and lossless compression as well as transparency; AVIF also supports lossy and lossless compression. A web.dev guide describes WebP as widely supported and AVIF as having reasonable support, but does not provide a current browser-version matrix. Check current compatibility data for the browsers your audience uses before relying on a format. The same guide reports that Netflix tests found AVIF savings greater than 50% compared with JPEG in some cases; that is a conditional example, not a result to expect for every image. web.dev’s image-format guidance
For a small number of files, tools such as Squoosh or ImageOptim can help compare encodes; for larger libraries, an image optimization service or image CDN may automate device-aware format selection. Choose based on your workflow and verify the actual output and delivery behavior rather than assuming a service’s transformation improves every asset.
Rank #3
4. Load visible and offscreen images differently
Use native lazy loading for images below the fold so their requests can wait until they are in or near the viewport, leaving bandwidth for content the visitor can see. For example:
<img src="/images/related-story.jpg" loading="lazy"
width="640" height="426" alt="Related story">Do not lazy-load the likely LCP image. When that image is an <img>, make its src or srcset available in the initial HTML. If it is likely to be the LCP element, fetchpriority="high" can hint that it is important:
Recommended Free Tools
<img src="/images/hero.jpg" fetchpriority="high"
width="1600" height="900" alt="A sunrise over the coast">Use high priority selectively; applying it to many images can undermine prioritization. These loading recommendations are covered in web.dev’s LCP guidance.
5. Measure the result, not just the file size
After a change, repeat the same lab measurement and check field data as it becomes available. A smaller file is useful only if it improves the user’s experience without unacceptable visual loss. Compare the LCP breakdown, not only the image’s transfer size: compression may shorten download duration while a late-discovered request or render-blocking work leaves total LCP unchanged.
- Check that the browser selected the intended responsive candidate at representative viewport sizes.
- Inspect resource priority and request timing in DevTools, especially for the LCP image.
- Review the compressed image at its actual display size, including text and hard edges.
- Compare mobile and desktop field results separately; do not rely on one lab run as proof of a durable improvement.
6. Or skip the browser setup
For screenshots used in QA, documentation, or automated workflows, ScreenshotNeo is a website screenshot API and MCP server. One GET request captures a URL as PNG, JPEG, WebP, or PDF; it does not replace responsive-image implementation or performance measurement.
cURL example:
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 documentation for parameters and output options.
- It accepts cookie and consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off.
- Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing; response headers report the page verdict and whether it was billed.
- An MCP server provides
take_screenshot,get_page_info, andcapture_pdftools for Claude, Cursor, and other MCP clients. - The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots. Every feature is on every plan.
Sign up for 1,000 free screenshots a month, with no card required.
Frequently Asked Questions
Should I lazy-load every image on a page?
No. Lazy-load images that are below the fold, but keep the likely LCP image eager so its request can start promptly.
Does converting every image to AVIF guarantee faster pages?
No. Savings vary by image and encoding, compatibility should be checked for your audience, and LCP may be delayed by discovery or rendering rather than download size.
Quick Recap
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.
