Heavy images slow pages, bounce mobile readers, and get rejected by email tools with strict attachment limits. The fix is rarely "use any random compressor site." You need predictable quality, a resize step for oversized camera exports, and a workflow that does not send client assets through an unknown upload queue.
The Image Compressor runs in your browser. Add one file or a batch, set compression quality and a max long edge, compress, then download individual files or a ZIP. Your images stay on your device.
Step 1: Pick the right format before you compress
Compression behaves differently per format:
- JPEG is ideal for photos, gradients, and video stills where small artifacts are acceptable
- WebP often beats JPEG on size at similar visual quality, especially for modern browsers
- PNG stays lossless and keeps transparency, so file size drops mainly from resizing, not from a quality slider
If you are starting from iPhone HEIC exports, convert to JPG first with the HEIC to JPG converter, then compress the JPG for upload. If your pipeline already outputs WebP from a design tool, you can compress WebP directly or convert with the WebP to JPG converter when a portal only accepts JPEG.
Step 2: Set a max long edge that matches the layout
A 6000px wide photo is wasted bandwidth when your blog content column is 1200px. Resize before you obsess over quality.
Practical presets:
- 2560px for hero images that may be viewed on large monitors
- 1920px for full-width marketing pages and slide decks exported as images
- 1280px for article bodies and documentation screenshots
- 1024px for email headers and CMS thumbnails with tight caps
In the compressor, choose a max long edge that is at or slightly above the largest display size you expect. You can always export a second, smaller copy for mobile-only modules.
Step 3: Tune quality for the destination
For JPEG and WebP, start around 80% to 85% quality. Zoom to 100% on faces, text overlays, and fine UI lines. If artifacts appear, nudge quality up. If the file is still too large, lower quality only after you have already resized.
For PNG screenshots with transparency, prioritize resize. Flat UI captures often shrink dramatically when the long edge drops from 3000px to 1920px even though PNG stays lossless.
Step 4: Batch compress and package downloads
Marketing launches rarely ship one image. Collect heroes, thumbnails, and social crops in one session:
- Drop all PNG, JPG, and WebP files into the tool
- Apply one quality and max long edge setting to the batch
- Compress once
- Download a ZIP for your developer or upload files individually to the CMS
Filenames gain a -compressed suffix so you can keep originals alongside web-ready copies in the same folder.
Step 5: Validate in the real destination
Before you publish:
- Upload a test asset to the CMS or LMS and confirm the preview looks sharp on retina displays
- Send a test email if the image is an attachment or inline header
- Check Lighthouse or WebPageTest if the image is a LCP hero on a landing page
If a portal still rejects the file, resize further before you crush quality. Readers notice blocky faces before they notice a slightly longer load time.
When to compress versus convert
Compress when the format is already correct for the channel. Convert when the channel forbids your source format or when transparency is optional.
Examples:
- Compress JPG heroes for a blog that already accepts JPEG
- Convert WebP marketing assets to JPG for an email builder that blocks WebP
- Keep PNG UI assets as PNG when transparency matters, but resize aggressively
Privacy for client and internal screenshots
Internal dashboards, unreleased packaging, and support screenshots can include sensitive data. Browser-based compression avoids routing those files through a third-party server. Process locally, then drop the compressed copy into the ticket or slide deck.
Quick checklist
- Match max long edge to the layout width
- Start quality around 80% to 85% for photos
- Resize PNG captures before chasing lossless tricks
- Batch + ZIP when handing off to a developer or VA
- Test upload in the CMS or email tool before launch
When your next launch ships a dozen images, compress once with consistent settings instead of re-exporting from a desktop editor for every single file.