Good image optimization removes unnecessary bytes while keeping the detail a visitor needs. A product texture, a small interface label, and a decorative background require different treatment. Start with the displayed use and the browser's selected source, not a universal compression percentage.
Preserve an original before a bulk change
Keep a recoverable copy of the original assets and document which service generates derivatives. WordPress, an optimization plugin, and an image CDN may all transform the same upload. Recompressing an already damaged derivative will not restore lost detail.
Choose a representative set: a product photo, a diagram with text, a screenshot, and a wide editorial image. Include the asset customers complain about. Test this small set before regenerating a large library, replacing originals, or deleting older sizes that another template still references.
Inspect the source actually delivered
Open the public page at the target viewport and examine the loaded image's selected URL and natural dimensions. WordPress responsive-image support uses source candidates and sizing information to help the browser choose an asset. A large original in the media library does not prove that visitors receive it.
Compare the layout width, device pixel density, and selected candidate. A 400-pixel-wide image stretched across a much wider area will look soft regardless of an impressive compression setting. Conversely, sending a very large source to a small thumbnail wastes transfer without helping that use.
Explanatory worksheet for your own test evidence. No customer results are represented.
Make the visual test specific
| Asset |
Inspect at normal use size |
Reject a candidate when |
| Product photograph |
Material edges, texture, fine markings |
Buyers cannot inspect meaningful detail |
| Diagnostic screenshot |
Small labels, numbers, and error text |
The instruction becomes difficult to read |
| Diagram |
Arrows, thin lines, and contrast |
Connections or labels lose meaning |
| Background photograph |
Visible subject and cropping |
Compression distracts or important content is cropped |
Use side-by-side comparisons with the same crop and dimensions. File size alone cannot tell you whether an image is useful. A synthetic table of supposed savings is not a substitute for checking the actual output from your own assets.
Change one transformation at a time
First choose sensible dimensions for the template. Then compare supported output formats and quality settings using those dimensions. Finally verify the site's delivery and caching behavior. This order separates a sizing mistake from an encoding mistake.
For screenshots with tiny text, consider a tighter crop and a readable explanation in HTML instead of squeezing a whole dashboard into one image. Do not put essential instructions only inside a graphic. For product galleries, preserve a suitable larger source for the genuine zoom experience rather than forcing every thumbnail to carry full-resolution detail.
Avoid several optimization plugins rewriting the same markup. If both the CDN and plugin replace source URLs, identify which layer owns the final asset. Confirm that logged-out visitors, not only the editor preview, receive the new derivative. Use a versioned URL or targeted cache invalidation where the delivery system requires it.
Check speed and stability separately
After replacement, verify dimensions or aspect-ratio reservation so the image does not push content around as it loads. Follow the layout-shift workflow for movement. If it is the largest above-the-fold element, use the mobile LCP guide to confirm that a smaller file actually improves the relevant delay.
Check mobile and desktop, light and dark image backgrounds where relevant, and every gallery state that changes the selected source. Keep the comparison files and measured sizes so future editors can repeat the decision.
If a bulk operation made the library blurry, stop further processing and restore from preserved originals before trying new settings. HandL WP image and performance repair can trace which transformation caused the damage. The acceptance test is readable, useful imagery with fewer unnecessary bytes, not the smallest possible file at any cost.
References checked September 25, 2026. Illustrations and examples are explanatory, not customer case studies.