WordPress pages slow because of images

The symptom

The WordPress site loads slowly, and Lighthouse points at images. The report shows many images near their original upload size, far larger than the slot they render in. Text and HTML arrive fast; the photo payload is what drags LCP and total weight.

Why WordPress serves originals

WordPress outputs an <img> whose src is one of the registered image sizes. Two common failures explain most oversize delivery:

1. The theme only registers a single size, or registers none for the template it uses, so WordPress falls back to the "large" size or the full original.
2. srcset includes the scaled (-scaled) original because the scaled size is generated when an upload exceeds the "max upload width" setting, and the theme or page still points at it.

The result is that the mobile phone downloads a 2000px or 4000px original for a 480px render slot. The fix chain:

Fix the pipeline in order

Step 1: Confirm the culprit

Run Lighthouse and open the images list. Note the intrinsic sizes (thousands of pixels) rendered into small boxes. Use the image optimisation guide to compute the target: render width times pixel ratio.

Step 2: Give the theme real sizes

In the theme's functions.php, register sizes that match the templates, and add add_image_size() calls for every template that renders a photo:

add_image_size('product-card', 640, 480, true);
add_image_size('hero-desktop', 1920, 1080, true);

Pick a "large" size for big images that is appropriate for the site, and fix the large_image_width setting under Settings, Media to something like 1200.

Step 3: Regenerate thumbnails

Installed sizes only apply to new uploads; existing images keep their old names. After adding sizes, regenerate all derivatives with a plugin (e.g. Regenerate Thumbnails):

1. Backup the media library first.
2. Run regeneration; it rebuilds the registered sizes from stored originals.
3. Confirm the new sizes appear in the library list.

Step 4: Compress and offload

Compress at the edge with a plugin that converts to WebP and compresses on upload, so every derivative is smaller. Then optionally offload full-size and media to a CDN or object store so originals are not served from the web server. The WordPress optimisation plugin guide walks the plugin options.

Step 5: Stop serving the original

If the theme still links to the full file, remove the scaled and original size from the responsive set, or provide a correct sizes attribute. The responsive images and srcset reference shows the exact attribute pattern. If no smaller size matches a template, fix the theme instead of letting the fallback serve the original.

Verify the result

After the changes:

1. Reset the Lighthouse run and re-check LCP and the total of image bytes.
2. Check a product or hero page in incognito to confirm the served (not just rendered) bytes dropped.
3. Keep field LCP under 2.5 seconds per the performance audit.

If the site still serves full-size images after all steps, the theme is hard-coding the original URL; change it in the template rather than patching every content post.

When to involve a professional

If the theme is a complex paid product or the media library runs to tens of thousands of files, get a developer involved before regenerating, because regeneration rewrites files. The same care applies before any bulk plugin change; WordPress update problems explains the fallback.