Image Compressor
An image compressor reduces an image's file size by re-encoding it more efficiently, so pages load faster while the picture looks the same. Compress JPG, PNG and WebP images in bulk, convert them to WebP, resize them, or hit an exact size like 100 KB, then compare before and after. Everything runs in your browser and nothing is uploaded.
1 Add images & settings
This browser can't save WebP images, so WebP output is unavailable. Chrome, Edge and Firefox support it.
The usual sweet spot: no visible loss for most photos. PNG: 256 colors.
Images are compressed on your device and never uploaded, stored or logged. Re-encoding also removes EXIF metadata such as camera details and GPS location.
2 Compressed images
Images
How to compress an image
-
1
Add your images
Drag JPG, PNG, WebP, GIF, BMP or AVIF files onto the drop zone, click it to browse, or paste a screenshot with Ctrl+V (Cmd+V on a Mac). You can add up to 100 images at once.
-
2
Choose the output format
Keep "Same as input" to compress each file in its own format, or convert everything to WebP, JPG or PNG. WebP gives the smallest files for websites.
-
3
Set the quality or a target size
Use the quality slider (80 is a good default), or switch to "Target size" and enter a limit such as 100 KB. Optionally set a maximum width or height to resize at the same time.
-
4
Compare before and after
Click any image in the list and drag the slider across the preview to compare the original with the compressed version. Switch to 100% to inspect fine detail.
-
5
Download
Download each image on its own, or use "Download all" to save every compressed image in one ZIP file.
A worked example: a 606 KB screenshot
The "Load example" button loads a real file: the social preview image for this page as it came out of a headless browser, a 1424×752 PNG of 606 KB. Screenshots like this are a common reason a page is slow, because PNG stores every pixel losslessly. These are the tool's actual results in Chrome:
| Setting | Output | File size | Saved |
|---|---|---|---|
| Original | PNG, 1424×752 | 606 KB | — |
| Same as input (PNG), quality 80 | PNG, 256 colors | 241 KB | 60% |
| PNG, quality 100 | PNG, lossless | 533 KB | 12% |
| JPG, quality 80 | JPG | 86 KB | 86% |
| WebP, quality 80 | WebP | 38 KB | 94% |
| WebP, quality 80, max width 800 | WebP, 800×422 | 18 KB | 97% |
Kept as a PNG, the 256-color palette still saves 60% while every edge and letter stays pixel-sharp, which is why it's the default for screenshots. Converting to WebP is the big win: 94% smaller, and the same at normal viewing size. At 100% zoom the cyan headline is very slightly softer, because lossy WebP and JPG store color at half the resolution of brightness. Resizing to the 800 pixels a blog column actually needs takes it to 18 KB. In "Target size" mode with a 50 KB limit, the same image comes out as a 49 KB JPG at full resolution.
JPG, PNG or WebP: which format to choose
| Format | Best for | How it compresses |
|---|---|---|
| WebP | Almost every image on a website | Lossy or lossless, with transparency. Usually 25–35% smaller than JPG at the same visual quality, and supported by every current browser. |
| JPG | Photos that must open anywhere | Lossy, no transparency. The quality setting trades detail in fine textures for file size. Re-saving a JPG again and again adds artifacts each time. |
| PNG | Screenshots, logos, flat graphics | Lossless. This tool shrinks PNGs by reducing them to a palette of up to 256 colors, which keeps edges and text perfectly sharp. |
| GIF, BMP, AVIF | Input only | Opened and converted. GIF and BMP become PNG (a GIF keeps only its first frame); AVIF becomes WebP, and is kept as-is if it's already smaller. |
What the quality setting changes
JPG and WebP are lossy formats: they split the image into small blocks and store each block's fine detail with less precision, which is where most of the saving comes from. The quality number controls how much precision is kept. Between about 70 and 85, the difference is very hard to see in a photo at normal size, while the file is often half the size it is at 95. Below about 50, blocky artifacts start to appear around sharp edges, text and smooth gradients such as skies.
PNG has no quality setting of its own, so here the slider picks a palette size instead: 256 colors from quality 70 up, then 128, 64, 32 and 16 as you go lower, and a fully lossless re-pack at 100. Every pixel is matched to its nearest palette color, so smooth gradients can show faint banding at small palettes. The before/after slider and the 100% button are there so you can judge each image instead of trusting a number.
How big should images be for a fast website?
File size matters most for the largest image above the fold, which is often the page's Largest Contentful Paint element. Two steps make the biggest difference:
- Resize to the size it is displayed at. A 4000-pixel-wide phone photo shown in an 800-pixel column wastes most of its bytes. Export at up to twice the displayed width for sharp results on high-density screens, using the Max width field above.
- Then compress, ideally to WebP. Aim for roughly 100–200 KB for a full-width hero image and well under 100 KB for images inside an article.
- Keep the markup right. Give every
<img>itswidthandheightso the layout doesn't shift as it loads, addloading="lazy"to images below the fold, and never lazy-load the hero image.
The Page Speed Checklist walks through these and the other LCP, INP and CLS fixes in order of impact. For very small icons, embedding them directly in your CSS or HTML can save a request; the Image to Base64 Converter shows when that pays off and when it doesn't.
What happens to your images
Nothing leaves your device. The page hands each file to a Web Worker, a background thread in your own browser, which decodes it, resizes it and encodes it again with the browser's built-in JPG and WebP encoders, or with the open-source UPNG.js library for PNG. The page stays responsive while large batches are processed, and the compressed files exist only in your browser's memory until you download them or close the tab.
Because the image is rebuilt from its pixels, the metadata stored in the original file is not carried over. That includes the camera model, the date and the GPS coordinates that many phones write into every photo, which is worth removing before you publish a picture anyway. A photo's rotation is applied to the pixels first, so portrait photos stay upright.
Frequently asked questions
Lossy compression does remove detail, but at a quality setting of 70 to 85 the loss is usually invisible at normal viewing size while the file shrinks by half or more. PNG compression here works differently: it reduces the image to at most 256 carefully chosen colors, which looks identical for screenshots, logos and flat graphics. Drag the before/after slider and switch to 100% zoom to check before you download. Quality 100 with PNG output is fully lossless.
No. Every image is decoded and re-encoded by your own browser, in a background Web Worker, and never leaves your device. Nothing is uploaded, stored or logged, and the compressor keeps working if you disconnect from the internet after the page has loaded. Re-encoding also drops EXIF metadata, including the GPS location many phones embed in photos.
Use WebP for almost everything on a website: it is usually 25 to 35 percent smaller than JPG at the same visual quality, supports transparency, and every current browser displays it. Use JPG when a file must open everywhere, such as email attachments or older upload forms. Use PNG for screenshots, logos and graphics with sharp edges or transparency when WebP isn't accepted. Leave the format on "Same as input" to keep each file's original type.
Switch the mode to "Target size" and enter the size in KB, or pick 50, 100, 200 or 500 KB. The compressor searches for the highest quality that fits, and if even low quality is too big it also scales the image down until it fits. Sizes use 1 KB = 1,000 bytes, so the result also meets limits that count 1 KB as 1,024 bytes.
In "Same as input" mode the compressor never gives you a larger file: if re-encoding doesn't make an image smaller, it keeps the original and marks it "Already optimized". That happens with files that were already compressed well. Converting to another format or resizing is treated as your choice and always shown, so a JPG converted to PNG, for example, can come out larger.
Resize first: an image should be no wider than about twice the largest size it is displayed at, so a photo shown 800 pixels wide needs at most 1600. Then compress, aiming for roughly 100 to 200 KB for a large hero image and well under 100 KB for content images. The largest image on a page is often its Largest Contentful Paint element, so its size feeds directly into Core Web Vitals.
Built for Frost Rank's own workflow, where every social preview image starts as a 600 KB headless-browser screenshot; the worked example's sizes are the tool's real output, measured in Chrome, not estimates.
Was this tool helpful?
Rate it and leave a comment — takes 10 seconds, and genuinely helps decide what to fix or build next.