Useful starting budgets
Try 100 KiB for small supporting images, 200 KiB for typical content visuals, and 500 KiB when a larger image needs more visible detail.
Compress images for web without losing control
Start with a useful file-size budget, keep only the detail people can see at the final display size, and inspect the result before it reaches your site.
Your image stays on this device
No account or watermark
Make a web image lighter, not needlessly rougher.
Start from a byte budget, then inspect detail at the size people will actually see.
Drop in an image
JPG, PNG, or WebP up to 25 MiB. It stays on your device.
Waiting for an image
What web compression helps you control.
Web compression is about delivering a useful image with less transfer cost, not making it visibly worse for its own sake. Start with 100 KiB for small supporting visuals, 200 KiB for many content images, or 500 KiB when a larger, detailed image earns the bytes. Those are starting budgets, not universal promises: the right result depends on where and how large the image appears.
Set display dimensions before chasing a lower quality number. An image that is too large for its rendered space wastes bytes before compression begins.
Set the limit, then protect the details that matter.
A file-size target gives you a clear first constraint. Use display dimensions and format choice to preserve useful detail inside it.
Dimensions that match the page
Set the max edge near the largest rendered size you need, accounting for high-density screens instead of exporting the full camera image.
Format choice you can inspect
Compare JPEG and WebP on the actual image. The better choice depends on its detail, transparency needs, and browser support requirements.
How to use it without guessing.
Start with the space the image occupies on the page, choose a byte budget, and compare the compressed export before changing anything else.
Set the display dimensions
Choose a max edge that fits the largest place the image appears instead of keeping pixels visitors will never see.
Choose a starting budget
Use 100 KiB, 200 KiB, or 500 KiB as a starting target based on the image role, then let the image content guide the closest practical result.
Inspect the web export
Compare text, sharp edges, and smooth gradients at the intended display size. Try JPEG and WebP before accepting a smaller file.
Start with the job, not a random setting.
These budgets are starting points, not universal promises. Compare the final image where people will actually see it.
Small supporting visual
Start at 100 KiB for a compact card, thumbnail, or supporting image, then check whether labels and edges still read clearly.
Article image
Start at 200 KiB for a common content image. Match its max edge to the article layout before lowering encoder quality further.
Detailed feature image
Start at 500 KiB when a larger visual has gradients, text, or fine textures that need more room to remain useful.
Responsive site image
Check the export at the largest likely display size. A good mobile result can still look soft in a wider desktop slot.
Choose a web budget before changing quality.
Choose a practical target, set dimensions for the rendered space, then lower quality only enough to work toward it.
Questions, answered plainly.
The editor stays in your browser. These answers cover file budgets, display size, format choice, and the final visual check.