Reduce an image thoughtfully, compare file size and visual quality, and avoid assuming one quality setting suits every picture.
A large image can be unnecessary for a small website card. Optimization aims to make the file more suitable for its job while preserving the detail the viewer needs. The right result depends on the image, not a universal quality number.
Decide how the image will appear
A full-width photograph and a small product thumbnail have different needs. Start with sensible pixel dimensions in your image editor if the original is much larger than the intended display. Compression and resizing are related but separate operations.
Keep the original file. Repeatedly editing an already degraded copy can make quality worse without giving you a useful reference.
Compare a trial result
- Open the image optimizer.
- Check the accepted file types and current size limit.
- Upload a non-sensitive image you have permission to use.
- Choose a quality setting and generate the result.
- Compare both file size and appearance before replacing the website asset.
Inspect fine text, edges and gradients. A product photograph may tolerate a different setting from a screenshot containing small labels. A lower setting is not automatically better if the important detail becomes unreadable.
Test the page after replacing the file
Open the final page on a phone and check the image at its displayed size. Make sure the layout still reserves the appropriate space and that the file path is correct.
Do not assume optimization removes all metadata or guarantees a particular performance score. It is one part of a page's loading behavior, alongside the number of assets, layout and server response.
Try the optimizer. If you are preparing a complete page, use the static hosting checklist and create a r37dy account to check the available hosting allowance.