About the Lazy Loading & Responsive Image Checker
This lazy loading checker fetches the HTML of a public URL and reviews each img element. It checks for loading="lazy" on images further down the page, flags early images that are lazy-loaded when they should not be, looks for fetchpriority on the main image, and checks srcset and sizes, explicit width and height, and whether images use WebP or AVIF.
Each attribute has a clear purpose. Native lazy loading saves data on images visitors may never scroll to. Width and height let the browser reserve space and prevent layout shift (CLS). Srcset and sizes let phones download smaller files, and fetchpriority="high" helps the main image load sooner for better LCP. Because the check reads the initial HTML, images added later by JavaScript may not be included.
How to use it
- Enter a public page URL.
- Review the image table and flagged issues.
- Remove lazy loading from the first visible images and add width and height.
- Add srcset and sizes and modern formats where missing.
Frequently asked questions
Should every image use loading=lazy?
No. Images visible when the page first loads, especially the main hero or product image, should load normally. Lazy-loading them delays Largest Contentful Paint. Use loading="lazy" for images below the fold. Browsers handle loading="lazy" natively, so no JavaScript library is required, and images without the attribute load as normal.
Why add width and height to images?
When the browser knows an image's dimensions in advance, it can reserve the right amount of space before the file loads. Without them, content jumps when the image appears, which increases Cumulative Layout Shift. CSS can still make the image responsive.
What do srcset and sizes do?
Srcset lists several versions of an image at different widths, and sizes tells the browser how wide the image will be displayed. The browser then downloads the smallest suitable file, which saves data on phones and speeds up loading. Without sizes, browsers assume the image is full width.