Compression starts before the quality slider
A 4000-pixel-wide image displayed at 800 pixels is carrying much more detail than that placement can show. Resizing to an appropriate dimension may save more bytes than pushing compression quality very low. Start by deciding where the image will be used and how large it will appear.
Lossy formats such as JPEG and quality-controlled WebP trade some detail for smaller files. Smooth gradients, tiny text, hair and high-contrast edges can reveal the loss first. A numeric quality value is not a universal measurement: different browsers and encoders can produce different files from the same slider value.
A practical workflow
- Keep the original source file untouched.
- Resize the image if its dimensions are far above your display need.
- Compress the image with a moderate quality setting.
- Compare the file size and inspect the result at 100% zoom, especially around text and edges.
- If detail looks damaged, use a higher quality setting or a larger output dimension.
The smallest file is rarely the only goal. A product image that makes labels unreadable or a portfolio photo with visible blocks can cost more than a few saved kilobytes. For pages with many images, also use responsive image sizing and lazy loading in the website itself.
This browser-based compressor cannot promise an exact output weight. PNG inputs use WebP output to make the quality control useful. If a system specifically requires PNG, convert to PNG afterward and check its size, or use a dedicated PNG optimizer.