Start with the right source
The workflow begins before the compressor opens: export or save your image at the dimensions it will actually display. A hero image shown at 1600px wide does not need 6000px of source — those extra pixels only bloat the file and slow the compression.
Work from the highest-quality version you have at that size: the original photo, the designer's export, the RAW conversion. Compression should be the last step, applied once to the best available source — never to an already-compressed download.
Compress with intent
Open the compressor, select your images (up to 20 per batch), and let auto-processing do its thing. Set the format deliberately: WebP at 75–80 for web photos, PNG for graphics with text, JPG when maximum compatibility matters.
Use the live cards as your instrument panel. The original-to-new sizes and savings percentages tell you exactly what each quality notch buys. Tune once per batch type and note the setting — consistency across a site looks professional.
Verify before publishing
Spot-check results at 100% zoom, focusing on faces, text, and gradients where artifacts appear first. Confirm file names are web-friendly (lowercase, hyphens, descriptive) since some are already perfect from the preserved names.
Check the total payload: a page's images should ideally stay under 1–2MB combined. If a single image dominates, it is a candidate for stronger compression or a smaller display size.
Add a review gate for the visual check: whoever publishes also spot-checks at full zoom before uploading. It takes two minutes and catches the over-compressed hero image that would otherwise greet every visitor. Teams that formalize this step stop shipping image-quality regressions entirely.
Publish and monitor
Upload the compressed images and view the live page on both desktop and a mid-range phone — the phone test catches weight problems your fast office connection hides. Confirm images load quickly and look sharp in place.
Keep the originals archived separately from the web versions. When the site redesigns in two years and needs larger images, you will compress fresh from the masters rather than stretching the small ones.
Document your standards
Write down the settings that worked: format, quality, max dimensions per image role (hero, thumbnail, product, blog). A one-page standard turns image prep from a judgment call into a checklist anyone on the team can follow.
Revisit the standard yearly. Formats evolve — WebP was once exotic — and display sizes creep upward. A living standard keeps the whole site lean without anyone having to think hard about it.
When image prep becomes a team job, the workflow has to survive handoffs. Turn your documented standards into a shared checklist — a simple document or project template listing export sizes, formats, and quality settings per image role. New contributors then produce correctly-sized images on day one instead of learning through corrections.
Steps
- Export or prepare the image at its final display dimensions, from the best-quality source.
- Open the compressor and select up to 20 images — processing starts automatically.
- Set output format (WebP/JPG for photos, PNG for graphics) and tune the quality slider.
- Review each card: check sizes, savings, and spot-check quality at 100% zoom.
- Download individually or as a ZIP; rename files descriptively if needed.
- Upload to your site and verify load speed and appearance on desktop and mobile.
- Archive the originals separately from the compressed web versions.
Frequently asked questions
What is the best order: resize then compress?
Yes — always resize to display dimensions first, then compress. Compressing a giant image wastes effort on pixels nobody will ever see.
Should I compress before or after editing?
After. Finish all edits first, then compress once as the final step. Compressing mid-edit and saving again compounds quality loss.
How small should my web images be?
Aim for each content image under 200–300KB and total page images under 1–2MB. Hero images can go higher if the design demands it.
Do I need to keep the originals?
Yes — archive full-quality originals separately. Future redesigns or print needs will thank you; you can always compress fresh from masters.