Start with Google PageSpeed Insights (PSI), then verify the page’s actual image requests in Chrome DevTools. PSI combines real-user field data with Lighthouse lab diagnostics; together they help you identify oversized or inefficiently delivered images, check whether proposed fixes reached users, and understand whether performance changed. Do not judge image optimization by a single score: inspect image bytes, rendered dimensions, format, responsive delivery, and the relevant Core Web Vitals.
1. Run PageSpeed Insights and read both kinds of data
Enter the page URL in Google PageSpeed Insights. PSI provides both field data from the Chrome User Experience Report and lab data from Lighthouse. They answer different questions, so start by identifying which one you are looking at.
Field data: what real visitors experienced
PSI field data represents a trailing 28-day collection period. It reflects real-user experiences rather than one controlled run, so it is the better place to check whether performance is good for visitors over time. It may not be available for every URL; when URL-level data is unavailable, PSI may show data for the broader origin instead. Treat the reporting scope shown in PSI as important context.
Lab data: a repeatable diagnostic
Lighthouse lab data is a controlled simulation useful for debugging. It can help you reproduce and investigate a problem, but a lab run is not a measurement of every visitor’s device, connection, or browsing conditions. Use its audits to find possible causes, then validate the result with field data where available.
Recommended Free Tools
#1 Best Overall
For Core Web Vitals, PSI documents the “Good” thresholds as LCP at or below 2,500 ms, CLS at or below 0.1, and INP at or below 200 ms. Consider each metric separately: image delivery can affect loading and layout, but an overall score or a single metric does not establish that every image is optimized.
2. Find image-specific opportunities in Lighthouse
Open or run the Lighthouse report for the page. Lighthouse can be run through PageSpeed Insights, Chrome DevTools, the command line, or as a Node module. In the report, inspect image-delivery audits and their affected-resource details. An audit is a lead for investigation, not proof that every suggested transformation will improve the real page.
Check estimated savings carefully
The image-format audit identifies older-format images and estimates potential savings by converting BMP, JPEG, and PNG images to WebP and estimating AVIF size. It omits an image when estimated savings are below 8 KiB. That means a missing image in this audit is not a general certification that the file is optimally sized, correctly dimensioned, or appropriately prioritized.
Prioritize by the page’s purpose
Look at which images are flagged, how much data the report estimates could be saved, and where each image appears. A large image near the beginning of a page may deserve attention before a small decorative image well below the fold. Keep a record of the affected image URLs and the specific issue reported so you can verify those same resources after a change.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
3. Compare downloaded size with rendered size
One common problem is downloading an image much larger than the space in which the browser displays it. Lighthouse compares an image’s rendered size with its actual downloaded size. Its oversized-image check fails when the rendered size is at least 4 KiB smaller than the actual file. This is a useful threshold for interpreting that audit, not a rule that every image must be delivered at exactly its displayed dimensions.
Inspect the actual element
In Chrome DevTools, use the Elements panel to select the image and inspect its markup and rendered dimensions. Compare those dimensions with the image resource the browser actually downloaded in the Network panel. Distinguish the displayed dimensions from the source file’s intrinsic dimensions: a 2,000-pixel-wide source displayed in a 500-pixel-wide space may transfer more image data than the page needs.
Look for responsive variants
Inspect the image HTML for srcset and sizes. These allow the browser to select among multiple image variants for different rendering contexts. In the Network panel, confirm which candidate was actually requested at the viewport you are testing. If an image CDN creates and serves variants based on viewport dimensions, verify the resulting request and dimensions rather than assuming that the presence of a CDN means responsive delivery is working.
Do not resize every image to one universal dimension. Generate variants suited to their rendered contexts, then use responsive markup or an image CDN to select an appropriate one. Check desktop and narrower viewports: a correctly sized image for one context may still be wasteful in another.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitchesRank #3
- Used Book in Good Condition
4. Check format, compression, and fallback behavior
WebP and AVIF can offer better compression than older JPEG and PNG formats. A smaller file can reduce image bytes, but changing formats is not a substitute for checking dimensions, visual quality, and what the browser actually receives.
Use AVIF or WebP with a fallback plan
AVIF support is more limited than support for older formats, so provide a JPEG or PNG fallback where needed. Verify the format selected in the browser rather than only checking the source code or the files stored on your server. If a format conversion is performed by a plugin, service, or transformation pipeline, inspect its output: Google’s image guidance notes that third-party transformations can sometimes make an already optimized image larger.
WordPress and other publishing systems
For WordPress, Chrome’s guidance recommends using a plugin or service that automatically converts uploaded images to optimal formats. Treat that as an implementation route, not a reason to skip verification. Check a representative page after conversion and confirm the delivered format, downloaded bytes, dimensions, and fallback behavior.
5. Check whether image delivery affects Core Web Vitals
Image optimization is about more than compression. Evaluate image delivery alongside LCP, CLS, and INP, using PSI’s field data to judge real-user outcomes and its lab data to diagnose implementation details.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →LCP: inspect important content near the start of the page
If the largest contentful paint is slow, inspect the prominent content shown in the report and determine whether an image is involved. Check whether that image is unnecessarily large and whether the browser receives a suitable responsive variant. An image can be efficiently compressed yet still be a substantial transfer if its dimensions are far larger than its rendered use.
CLS: make room for images in the layout
Unexpected layout movement can occur when image space is not reserved before the image loads. Inspect the page as it loads and look for content shifting as images appear. Confirm that the layout establishes the image’s intended space, then compare CLS before and after changes. Image file size alone does not show whether the page reserves space correctly.
INP: do not assume every interaction issue is an image issue
INP measures interaction responsiveness. Image loading may be one part of the page’s behavior, but an INP result by itself does not identify an image as the cause. Use the Lighthouse diagnostics and the page’s actual behavior to investigate, and avoid attributing a metric change to image optimization without evidence.
6. Verify the change in the browser
After modifying image files, markup, or delivery settings, repeat the checks on the same page and relevant viewport. A recommendation is only useful if the browser receives the intended result.
Best Value
- Capture a baseline. Save the PSI field and lab results, Lighthouse image audit details, and the affected image URLs before changing anything.
- Make one focused change. For example, create a suitably sized variant, add responsive candidates, or change the delivered format with an appropriate fallback.
- Reload and inspect Network. Confirm the requested image URL, actual format, transfer size, and dimensions. Check that the browser did not keep using an old cached response when you expected a new one.
- Inspect markup and layout. Verify the responsive source selection and that the image occupies the intended space while loading.
- Rerun Lighthouse and PSI. Compare the relevant image audits and lab metrics. Later, review available field data as its trailing 28-day window reflects user experience after the change.
When comparing runs, keep the page and test conditions as similar as possible. Lab results are controlled diagnostics, not a guarantee of identical visitor outcomes. Field data changes over time and can reflect a wider range of real-user conditions.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.7. Common problems and what to check
- The audit still flags an image after conversion: Check the downloaded file’s actual format and bytes, not just its filename or server-side original. The browser may still be receiving an older source, a larger responsive candidate, or an image whose estimated savings remain material.
- The file is compressed but still oversized: Compare intrinsic and rendered dimensions. Compression reduces bytes per image but does not necessarily correct a source that is much larger than its display context.
- A responsive image always downloads the same variant: Inspect
srcsetandsizes, then check the selected request at more than one viewport width. A responsive setup is only effective if suitable candidates exist and the browser selects them for the rendered context. - AVIF is not displayed in a browser or context: Check browser support and the fallback markup or delivery behavior. Provide JPEG or PNG where needed rather than assuming AVIF is universally supported.
- A conversion made the image larger: Compare the transformed output with the original. Google’s image guidance warns that third-party transformations can sometimes increase the size of an already optimized image; retain the smaller suitable version.
- PSI shows no field data: Use the lab report for page-level diagnostics, and note whether PSI is reporting URL-level or origin-level field data. A missing URL-specific field result is not itself evidence that images are optimized.
- The Lighthouse score changes but visitors do not seem faster: Separate lab diagnostics from field outcomes. Inspect the relevant image requests and review field data over its trailing 28-day period instead of treating one score as the outcome.
- An image appears to be the cause of INP: Do not infer causation from the metric alone. Use diagnostic evidence and the page’s interaction behavior to determine whether image work is relevant.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server for developers. A screenshot can help you compare how a page looks before and after an image change, but it does not replace Lighthouse or the Network panel for measuring image bytes, formats, and selected responsive variants.
For example, this cURL request captures a screenshot of the page:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpReplace the example target URL with the page you want to capture. See the ScreenshotNeo documentation for request details. Cookie banners are accepted and removed along with 60+ known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers say which page verdict was returned and whether it was billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Sign up for ScreenshotNeo’s free plan to capture up to 1,000 screenshots a month without a card.
Frequently Asked Questions
Does a high Lighthouse score prove that every image is optimized?
No. Inspect the affected image resources and confirm what the browser downloads; a score alone does not certify each image’s dimensions, format, or responsive selection.
How long does PSI field data cover?
PSI field data represents a trailing 28-day collection period.
Can I use screenshots to measure image file size?
No. Screenshots help compare visual rendering; use Lighthouse audits and browser network requests to inspect image delivery.
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.
