How to Optimize Images for Faster Page Loads

What the image checks test

SiteCurl runs three image-related checks on every page:

1. Lazy loading: Are below-fold images using loading="lazy" to delay loading until they are near the viewport?
2. Image dimensions: Do <img> tags include width and height attributes so the browser can reserve space?
3. Responsive images: Do images use srcset to serve different sizes for different screen widths?

Failing any of these means your images are slower, heavier, or more disruptive than they need to be.

Why it matters

Images typically account for 50-80% of a page’s total weight. Without optimization, a page with 10 product photos might send 5MB of image data to a phone that only needs 500KB. That is a 10x waste of bandwidth and loading time.

Missing dimensions cause Cumulative Layout Shift (CLS): the page jumps around as images load, pushing text and buttons to new positions. This frustrates users and hurts your Core Web Vitals score.

How to fix lazy loading

Add loading="lazy" to every image that is not visible when the page first loads:

<img src="photo.jpg" loading="lazy" alt="Product photo">

Do not add lazy loading to your hero image, logo, or any image visible in the initial viewport. Lazy loading those images delays their appearance.

How to fix missing dimensions

Add width and height attributes that match the image’s natural aspect ratio:

<img src="photo.jpg" width="800" height="600" alt="Product photo">

The browser uses these to reserve space before the image loads. The image will still resize responsively with CSS (max-width: 100%; height: auto;), but the layout will not shift.

How to fix responsive images

Use srcset and sizes to serve different image files for different screen widths:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Product photo"
>

This tells the browser: on screens under 600px wide, download the 400px image. Otherwise, download the 800px image. The browser picks the best match for the visitor’s device.

How to verify the fix

Right-click an image, choose Inspect, and check the <img> tag for loading, width, height, and srcset attributes. Run a SiteCurl scan to check all images across your site in one pass.

Related checks

Image optimization works alongside compression and cache headers to reduce total page weight.

Start a free trial to find every image issue across your pages.