Why compression alone is not enough in WordPress

WordPress creates variants

A normal upload can produce several sizes. When a theme uses WordPress image functions, the markup usually includes srcset and sizes so the browser can choose a suitable variant.

Several files in the uploads directory do not prove that visitors receive a suitable one. The theme needs to output useful srcset and sizes values for each component. Inspect a card, article image and hero separately because templates may render them in different ways. A hard-coded original URL bypasses the usual WordPress selection even when smaller variants exist.

Inspect the file actually downloaded

Use browser developer tools on a phone-sized viewport. Compare the displayed image width with the downloaded file dimensions and bytes. A CSS background does not automatically benefit from WordPress srcset markup.

Use currentSrc or the network request URL to see what the browser actually chose, rather than relying only on the src attribute in the page source. Repeat the check at another viewport width. A high-density display can reasonably request a variant wider than its CSS box, so compare visual sharpness and transferred bytes together. The goal is to avoid a clearly oversized file without making the image soft.

Separate resizing from compression

Selecting thumbnails for API compression does not create missing sizes for old media. If your theme changes its sizes, regenerate old thumbnails with an appropriate WordPress workflow.

Changing a theme may introduce image sizes that older uploads do not have. Test thumbnail regeneration on a few attachments and check available disk space before running it across the whole library. Then revisit live pages to confirm the new candidates are used. API compression reduces existing files; it cannot create a missing size or correct an inaccurate sizes attribute by itself.

Measure on different screens

For first-screen images, see how to find the image delaying a page.

Compare the same page on mobile and desktop. Check sharpness as well as transfer size. The goal is a sensible file for each layout, not the smallest possible byte count.

Inspect a mobile card, a full article image and the first-screen banner independently. Record the requested URL, pixel dimensions and transferred bytes for each. If a variant looks blurred, check the source resolution and display density before increasing compression. A good configuration provides enough detail for the component while avoiding pixels the layout cannot use.