365tools
Images

How to Compress Images for the Web (Without Ruining Quality)

Updated May 2026·7 min read

Unoptimized images are the single most common cause of slow websites. A page with a handful of uncompressed photos can take 5+ seconds to load — Google's research shows 53% of mobile users abandon a site that takes more than 3 seconds. Image compression is the highest-ROI performance fix for most websites.

Step 1: Choose the right format

The format you choose has a bigger impact than the quality setting.

Image typeRecommended formatWhy
PhotographsWebP or AVIFBest lossy compression, smaller than JPG
Logos / iconsSVG or PNGLossless, scales perfectly
ScreenshotsPNG or WebP (lossless)Preserves sharp text and edges
Animated imagesWebP or MP464% smaller than GIF

Step 2: Set the right quality

For lossy formats (JPG, WebP, AVIF), the quality setting is the most impactful variable after format choice.

60–70%
Maximum compressionThumbnails, background images, decorative images
75–85%
Balanced (recommended)Most product photos, blog images, portfolio shots
85–92%
High qualityHero images, product shots where fine detail matters
93–100%
Near-losslessSource files only — too large for most web use

Step 3: Resize before compressing

Serving a 4000×3000 pixel photo for a 600px-wide column is wasteful — the browser downloads all those pixels and then discards most of them. Resize first, then compress.

A useful rule: the image dimensions should be no more than 2× the maximum CSS display size (to account for 2x/retina screens). A photo displayed at 600px wide should be 1200px wide maximum.

How to compress images without uploading

Most online image compressors upload your files to their servers. The 365tools Image Compressor compresses JPG and PNG files entirely in your browser using the Canvas API — nothing is transmitted:

  1. Drop your images onto the compressor
  2. Choose Balanced (75%), High Quality (90%), or set the slider manually
  3. See before/after file size and percentage saved
  4. Download individually or as a ZIP

For converting to WebP or AVIF (for even better compression), use the Image Converter — also 100% browser-based.

Compress images for free — no upload required

Before/after size preview, quality slider, batch support.

Open Image Compressor →

Frequently asked questions

What image format gives the best compression for websites?

AVIF gives the best compression (40–50% smaller than JPG), followed by WebP (25–35% smaller than JPG). For maximum compatibility with all browsers, WebP is the safest choice. Use AVIF if your audience is on modern browsers.

What quality setting should I use for web images?

For photos: 75–85% quality in JPG/WebP is the sweet spot — significant size reduction with imperceptible quality loss at normal viewing sizes. For product images where sharpness matters: 85–90%. For thumbnails: 60–70%.

Should I compress images before or after uploading to my CMS?

Before — always. Most CMSs (WordPress, Shopify, Squarespace) do generate their own thumbnails but they often re-compress at high quality, resulting in large files. Pre-compressing gives you precise control and smaller originals.

Does image compression affect SEO?

Yes, indirectly. Smaller images load faster, which improves Core Web Vitals scores (specifically LCP — Largest Contentful Paint), a Google ranking signal. Google's PageSpeed Insights explicitly flags uncompressed images as a performance issue.