Resources · Blog

Why a Single Quality Slider Isn't Enough: The Real Weight/Fidelity Trade-off on a Product Page

A 150px catalog thumbnail and a zoomable product hero image don't need the same compression, here's why per-placement quality settings beat a single global slider.

Image quality slider set differently depending on usage October 28, 2026

Most image compression tools on WordPress expose exactly one control: a quality slider, usually somewhere between 60 and 85, applied uniformly to every JPEG or WebP the plugin touches. It's a reasonable default for a tool that has no idea what any given image is used for. But on a WooCommerce product page, that single number is quietly working against you in at least one direction, and often in both.

Consider what actually happens on screen. A catalog grid shows a product_card thumbnail at maybe 150 to 300 pixels wide, viewed for a second or two while a shopper scans dozens of similar tiles. Compression artifacts that would be visible at full size are invisible at that scale and that viewing behavior; the eye simply doesn't have time or resolution to register them. The same photo, shown as the hero image on the product page, gets viewed for much longer, often zoomed, and any softness or blocking in fine texture, fabric weave, stitching, surface grain, becomes exactly the kind of detail a buyer is looking for before deciding to purchase.

A single global quality setting has to split the difference between these two very different jobs. Set it low enough to keep the catalog grid light and fast, and the zoomed product image looks noticeably worse than it needs to. Set it high enough to keep the product image crisp, and every thumbnail on the category page carries bytes it doesn't need, which adds up: a category listing with 40 products loads 40 oversized thumbnails instead of 40 appropriately light ones, and that difference shows up directly in page weight and Core Web Vitals.

The more accurate way to think about image quality on an e-commerce site isn't "how compressed should my images be" but "how compressed should this specific placement's images be." A thumbnail viewed briefly at a small size tolerates aggressive compression with no perceptible loss. A zoomable hero image doesn't. A category banner sits somewhere in between. These aren't different opinions about the same setting, they're genuinely different requirements coming from different contexts.

This is the reasoning behind why ImagePipe attaches quality as a property of the preset rather than a single site-wide value. product_card and product_page are separate presets, each with their own resize mode, dimensions and compression level, so a store can keep catalog thumbnails light without compromising the fidelity of the zoomed product image, or the reverse, without touching a global slider that would affect both at once. category_banner, manufacturer_logo and mobile_thumbnail follow the same logic: each placement gets the compression level it actually needs, not the one compromise setting has to serve every placement on the site at the same time.

Back to blog