Compressing images for the web means reducing file size while keeping the image sharp enough that visitors don't notice the difference. Uncompressed or lightly compressed images are the single biggest cause of slow page loads — a 4 MB DSLR photo directly placed on a webpage will make it fail Core Web Vitals. This guide covers target sizes, the right formats, and a workflow that takes minutes.

Target File Sizes for Web Images

These are practical targets for typical web use cases:

Hero / banner image (full-width): under 200 KB
Content image (within article body): under 100 KB
Thumbnail / card image: under 30 KB
Blog post featured image: under 150 KB
Product image (e-commerce): under 100 KB
Background image: under 300 KB
Logo / icon: under 20 KB

These numbers assume WebP format. JPEG targets should be roughly 1.3× higher (WebP is ~25–35% smaller than JPEG at the same quality).

Step 1: Resize to Display Dimensions First

Compression alone doesn't fix an oversized image. If your image is 4000×3000 px but displays at 1200×900 px on screen, you're serving 11× more pixels than needed. Resize first, then compress.

Common web display widths and recommended upload sizes:

Full-width hero: resize to 1920 px wide max
Blog content image: resize to 1200 px wide max
Card / thumbnail: resize to 400–600 px wide
Sidebar image: resize to 300–400 px wide

Use the resize tool to set exact pixel dimensions. If the proportions aren't right, crop first.

Step 2: Choose the Right Format

WebP: Best for most web images. 25–35% smaller than JPEG, supports transparency like PNG. Use for photos and graphics on modern websites. All major browsers support WebP.
JPEG: Good for photos where you need wide compatibility. Avoid for graphics with sharp edges or text — JPEG blurs them.
PNG: Use only when you need lossless quality or transparency and can't use WebP (e.g., some email clients). PNG files are large — compress PNG only as a fallback.
AVIF: 20–30% smaller than WebP. Excellent choice for 2026. Browser support is nearly universal (Chrome 85+, Firefox 93+, Safari 16+).
GIF: Only for simple animations. For static images, always use WebP or JPEG instead.

Step 3: Compress at the Right Quality Setting

JPEG and WebP quality scales from 0–100. Higher quality = larger file, lower quality = more artifacts. The sweet spot for web use:

Photos (JPEG/WebP): 75–85% quality — minimal visible difference from 100%, but files are 3–5× smaller.
Graphics with text (WebP/PNG): use lossless mode or 90%+ quality to prevent blurring of text.
Thumbnails: 65–75% — at small sizes, compression artifacts are barely visible.

Open Picovert's compressor to compress photos and graphics in-browser. No file is uploaded — everything processes locally.

How Much Can You Compress Without Visible Quality Loss?

As a rule of thumb:

A 10 MB DSLR JPEG → compressed to WebP at 80% quality → typically 200–400 KB, visually identical at normal viewing distance.
A 2 MB PNG screenshot → compressed PNG → typically 400–800 KB. Switch to WebP for a 300–500 KB result.
A 500 KB JPEG from a phone camera → compressed to WebP → typically 80–150 KB.

WebP Conversion for Maximum Web Compression

Converting JPEG to WebP is often the single highest-impact step. A JPEG that's already compressed at 80% can still shrink 25–35% further by converting to WebP at the same perceived quality.

JPG to WebP — convert and compress in one step
PNG to WebP — for transparent images

What Happens If You Don't Compress Web Images?

Failed Core Web Vitals: Google's LCP (Largest Contentful Paint) benchmark requires the main image to load in under 2.5 seconds. Large images directly cause LCP failures.
Lower search rankings: Page speed is a ranking signal. Slow pages from heavy images lose positions to compressed competitors.
High bandwidth costs: CDN and server egress costs scale with transferred bytes. A 10× image size reduction directly cuts 10× the bandwidth bill.
Poor mobile experience: Mobile connections are often 4G or slower. A 2 MB image that loads in 0.5 sec on fiber takes 4+ seconds on a typical 4G connection.

Quick Compression Checklist

Resize to actual display dimensions before compressing
Use WebP format instead of JPEG or PNG where possible
Set quality to 75–85% for photos
Keep hero images under 200 KB, content images under 100 KB
Set explicit width and height attributes in HTML to prevent layout shift
Use loading="lazy" on below-the-fold images
Use a CDN to serve images from the edge near your visitors