How to compress images for the web without losing visible quality

Images make up the majority of bytes shipped by most websites. A homepage with three high-resolution photos can ship 5 MB or more of image data — slow on a phone with spotty signal, expensive on metered connections, and a real factor in Core Web Vitals scores. The right web image is typically under 200 KB. Getting there from a raw camera or phone export usually means compressing — sometimes resizing too — and often picking a different format than the source.

The three formats that matter

For most web work, three formats cover every realistic case:

JPG. Lossy, no transparency, universal browser support. The right format for photos and photo-like content. Quality slider trades file size for visible quality.
PNG. Lossless, supports transparency, supported in every browser. The right format for logos, icons, screenshots of UI, anything with sharp edges and limited colors. Larger files than JPG for photo content.
WebP. Lossy or lossless, supports transparency, supported in every modern browser (Chrome, Firefox, Safari since 2020). Typically 25–35% smaller than the equivalent JPG/PNG at the same visual quality. The default modern choice when browser support is acceptable.

For brand-new web work, WebP is the right pick. For broad compatibility (older email clients, Outlook, RSS readers, some old browsers), JPG and PNG remain the safer choice.

The right quality level

JPEG and WebP both have quality settings from 0 (heavily compressed, ugly) to 100 (close to lossless, large file). The sweet spot for photos:

50–60 — visible compression artifacts on photos. Use only when file size matters more than quality (thumbnails, low-bandwidth contexts).
75–85 — typical web quality. Most users see no visible artifacts on typical photos; files are 60–80% smaller than 100%.
90–95 — high quality, larger files. Use for photos shown at large sizes on retina displays.
100 — essentially lossless for JPEG (still lossy by spec, but the visible difference from the original is below human-perception threshold). Largest files.

Default: 85. If you're not sure, this is the right pick for the vast majority of web photo uses.

Step-by-step

Open justfiletools.com/tools/compress-image.
Drop one or more images. JPG, PNG, and WebP are accepted as input.
Pick output format. Same format as input is the default; convert to WebP if you want smaller files and browser support is fine.
Adjust quality. The tool shows live size deltas so you can see the tradeoff.
Download the compressed version. Original is untouched on disk.

Resize first, then compress

The single biggest size win for web images is resizing. A 4032×3024 phone photo shipped at full resolution to a 600×400 display wastes 95% of the pixels. The browser downscales for display, but the bandwidth and storage cost is still paid.

Pick a display size that matches your actual rendering. For full-width hero images on a 1440px-wide layout, source at 1440px or 2880px (for retina). For thumbnails, source at the thumbnail size or 2x. For inline article photos, 1024px wide is usually enough. Use the Resize Image tool first if your source is much larger than the display size.

When to use which format

Photos of real-world scenes (people, landscapes, products): JPG or WebP. WebP is smaller; JPG is more compatible.

Screenshots of UI or text: PNG. The sharp edges and limited color palette compress badly as JPG (visible artifacts around text). PNG handles them losslessly.

Logos and icons: SVG if possible (vector), otherwise PNG. SVG scales to any size with no artifacts.

Animated graphics: GIF is the legacy format; WebP and AVIF support animation and are dramatically smaller. For short animations on the web, consider MP4/WebM video instead of GIF — typically 10× smaller.

Images requiring transparency: PNG or WebP. JPG doesn't support transparency.

Common pitfalls

Compressing PNGs without converting to JPG. PNG compression is lossless, so for photos it's much worse than JPG. If your input is a PNG photo, convert to JPG or WebP first, then compress.

Compressing already-compressed images. Re-compressing a JPG that's already at quality 75 with another pass at quality 75 doesn't double the savings — you get diminishing returns and may introduce additional artifacts. Recompress only if reducing dimensions too.

Forgetting about responsive images. The same image rendered at different sizes on desktop and mobile should be served at appropriate sizes per viewport. Use <img srcset="..."> with multiple resolutions instead of one big image. This is a server-side / build-pipeline concern rather than a per-image one.

Stripping metadata as a side effect. Compression usually drops EXIF metadata as part of re-encoding. This is good for web (no GPS coordinates leaked) but means metadata-dependent workflows (preserving photographer attribution) need to bring it back via exiftool.

Alternative approaches and when to use them

ImageOptim (macOS) / FileOptimizer (Windows). Free desktop tools with sane defaults. Run a folder through once and get optimized versions back. Best for one-time optimization of an existing image library.
Squoosh (web). Google's image optimization playground. Excellent UI for side-by-side quality comparison. Uploads your image but runs everything client-side (so no actual upload to a server happens).
sharp at the command line. The same library Astro and many other build tools use internally. Programmatic, scriptable, fast.
Cloudflare Image Resizing / Polish. CDN-level image optimization. Serves the right format and quality per request. Best for high-traffic sites where manual per-image optimization isn't scalable.
Modern build tools (Astro, Next.js Image, Vite image plugins). Automatically compress and serve responsive images at build time. Right answer for ongoing site work; this tool is for one-off compressions.

Privacy considerations

The compression operation strips EXIF metadata as a side effect, which is privacy- positive — the compressed version has no GPS coordinates or camera info.

The tool runs entirely in your browser using the native Canvas API. The image is read into your tab, re-encoded by the browser's built-in JPEG/PNG/WebP encoders, and handed back as a blob URL. No network step. Verify in DevTools.

Related tools and guides

Compress Image — the tool this guide covers.
Resize Image — resize before compressing for the biggest size wins.
Convert Image — change format between JPG, PNG, WebP.
EXIF Viewer / Stripper — confirm metadata stripping worked.
How to remove EXIF data from photos.