How to use the Image Compressor
- Drop one or more images onto the box (or click to choose, or paste a screenshot). Nothing is uploaded — compression runs in your browser.
- Pick an output format: keep the original, or convert to WebP for the best size-to-quality ratio.
- Adjust quality (around 75–80 works for most photos) and optionally set a max width — e.g. 1920 px for full-width hero images.
- Check the savings per file and drag the before/after divider to confirm there is no visible loss.
- Download files one by one or click Download all (ZIP).
What is an image compressor?
An image compressor re-encodes a picture so the file takes fewer bytes while looking (almost) the same. Images are typically the heaviest part of a web page, so compressing them is one of the quickest ways to improve load time and Core Web Vitals such as Largest Contentful Paint (LCP). This tool decodes each image, optionally scales it down, and re-encodes it with your chosen format and quality — entirely in your browser using the Canvas API, so private photos never touch a server.
How the compression works
- JPEG, WebP and AVIF are lossy: the quality slider controls how much fine detail the encoder throws away. Dropping from 100 to about 80 usually removes a large share of the bytes with no difference visible at normal viewing size.
- PNG is lossless, so a quality setting does nothing. Instead, the tool reduces the image to a palette of at most 256 colours (8-bit PNG) using median-cut quantisation with optional Floyd–Steinberg dithering — the same idea behind tools like pngquant and TinyPNG. Screenshots, logos and illustrations often shrink by 60–80% this way while keeping transparency.
- Resizing is often the biggest win: a 4000 px phone photo displayed in an 800 px column wastes most of its pixels. Set a max width/height and the image is downscaled with high-quality resampling.
- Metadata is removed. Re-encoding drops EXIF data such as camera model and GPS location — good for privacy and a few extra kilobytes. Orientation is applied first, so portrait photos stay upright.
Which format should I choose?
| Format | Best for | Transparency | Notes |
|---|---|---|---|
| WebP | Photos and graphics on the web | Yes | Supported by all current browsers; Google reports lossy WebP files are 25–34% smaller than comparable JPEGs. |
| AVIF | Photos where every KB counts | Yes | Often smaller than WebP, slower to encode. Shown only if your browser can encode it. |
| JPEG | Photos, email, maximum compatibility | No | Transparent areas are filled with the colour you pick. |
| PNG | Logos, UI screenshots, sharp text | Yes | Use the colour reduction for big savings; avoid PNG for photos. |
Tips for web images
Export hero images at no more than about 2× their displayed width (for example 1600–2400 px for a full-width banner), use WebP with quality 75–82, and always set width and height attributes in your HTML to avoid layout shift. Need exact dimensions or a social-media crop? Use the Image Resizer. For tiny icons, inlining with the Image to Base64 converter can save a request. If you build in Webflow, note that it can generate responsive variants and WebP for you, but a well-compressed source still uploads and processes faster.
Tools that pair well with the Image Compressor
- OG Image Generator — Create a polished link-preview image for Facebook, LinkedIn, X, Slack and WhatsApp in seconds — pick a template, type your title, add a logo, then download the PNG and matching meta tags.
- Image Alt Checker — Audit every image on a page in one table: alt text status, file size, width/height attributes, format and lazy loading — with filters and CSV export.
- Favicon Generator — Make a complete favicon package from a logo, a letter or an emoji: a multi-size favicon.ico, Apple touch icon, Android/PWA icons, a Webflow webclip, the web manifest and the HTML tags to paste.
- QR Code Generator — Generate a QR code for a link, Wi-Fi login, contact card, email, phone number or SMS.