How to Shrink Image Files for the Web (and Why It Matters)

Q: What is the best image format for web performance?

WebP is the best choice for most websites today. It supports both photos and graphics, produces files 25-35% smaller than JPEG or PNG at equivalent quality, and is fully supported by Chrome, Firefox, Safari, and Edge. For cutting-edge compression, AVIF goes even further but has slightly lower browser support.

Q: Should I resize images before or after compressing them?

Resize first, then compress. Compressing a 4000 px wide image and then resizing it to 800 px still forces the browser to download all the extra pixels. Resize to your target display width first, then apply compression — this order gives the biggest file-size reduction.

By Deepak·June 26, 2026

To shrink image files for the web, you compress them to a smaller file size without making them look bad on screen. Smaller images load faster, cost less bandwidth, and directly improve your Google rankings — Google's Core Web Vitals score penalises slow-loading pages, and images are almost always the biggest culprit.

How Much Does Image Size Actually Affect Your Site?

A typical unoptimised photo from a phone or camera runs 3–8 MB. The same image, properly compressed for the web, can land under 150 KB — that's a 95% reduction with no visible quality loss. At scale, that means pages that load in under a second instead of 5–6 seconds on a mobile connection.

Google's own data shows that as page load time goes from 1 second to 3 seconds, the probability of a visitor bouncing increases by 32%. Compressing your images is the single fastest win most sites can make.

Which Image Format Should You Use for the Web?

Picking the right format before you compress makes a big difference. Here's a quick guide:

WebP — the best all-round choice today. Supports photos and graphics, and is typically 25–35% smaller than an equivalent JPEG or PNG. Supported by all modern browsers.
JPEG / JPG — great for photos. Lossy compression (it removes data the eye barely notices) gives small files.
PNG — best for logos, icons, and anything with a transparent background. Lossless, so files stay larger than JPEG.
AVIF — the newest format. Even smaller than WebP, but not yet supported everywhere. Use as a progressive enhancement if you need the absolute best compression.
SVG — for logos and illustrations made of shapes. Infinitely scalable and tiny file sizes, but only for vector graphics.

Quick rule: Use WebP for almost everything. Fall back to JPEG for photos if you need maximum compatibility. Use PNG only when you need transparency and can't use WebP.

Step-by-Step: How to Shrink Image Files for the Web

Option 1 — Online tool (no install needed)

Squoosh (squoosh.app, made by the Google Chrome team) is the easiest place to start. Upload your image, pick WebP, drag the quality slider to around 75–80, and download. You see the before/after difference live. Free, private (runs in your browser), and no sign-up required.

Option 2 — Command line with Sharp (Node.js)

If you're compressing batches of images or building this into a workflow, Sharp is the go-to library. It's fast, accurate, and widely used in production. Here's a minimal working script:

// Language: JavaScript (Node.js)
// Install first: npm install sharp

const sharp = require('sharp');

sharp('input.jpg')
  .resize({ width: 1200, withoutEnlargement: true }) // cap width, don't upscale
  .webp({ quality: 80 })                              // convert to WebP at q80
  .toFile('output.webp')
  .then(info => console.log('Done:', info))
  .catch(err => console.error(err));

Run it with node compress.js. The withoutEnlargement: true flag is important — it stops Sharp from blowing up small images to 1200 px, which would increase file size instead of reducing it.

Option 3 — Command line with ImageMagick

Already have ImageMagick installed? This one-liner converts and compresses a JPEG:

# Language: Bash
convert input.jpg -resize 1200x\> -quality 82 -strip output.jpg

The 1200x\> part means "resize to max 1200 px wide, only if it's already bigger." The -strip flag removes hidden metadata (GPS location, camera model) that adds KB for no visual benefit.

Tool Comparison at a Glance

Tool	Best for	Formats out	Cost
Squoosh (browser)	One-off images, visual comparison	WebP, AVIF, JPEG, PNG	Free
Sharp (Node.js)	Batch processing, build pipelines	WebP, AVIF, JPEG, PNG	Free (open source)
ImageMagick (CLI)	Scripting, server-side automation	Almost everything	Free (open source)
Cloudinary (CDN)	Automatic optimisation at scale	WebP, AVIF, auto-detect	Free tier, then paid
TinyPNG / TinyJPG (browser)	Quick PNG/JPEG compression, no code	PNG, JPEG, WebP	Free up to 20 files/month

Common Mistakes That Kill Your Results

Uploading at the original camera resolution. A 4000×3000 px photo displayed at 800 px wide is still sending all 4000 px to the browser. Always resize to the actual display width first.
Compressing an already-compressed JPEG. Every time you save a JPEG, quality degrades. Start from the original file, not a previously saved copy.
Ignoring metadata. EXIF data — GPS location, camera settings — can add 50–100 KB to an image. Strip it on export unless you have a reason to keep it.
Setting quality too low. Going below quality 70 on WebP or JPEG often creates visible artefacts (blocky patches, smearing). The 75–82 range is the sweet spot for most images.
Not serving responsive images. Even a perfectly compressed 1200 px image is too heavy for a 375 px phone screen. Use the HTML srcset attribute to serve different sizes to different devices.

What Is a Good File Size for Web Images?

A good target is under 200 KB for hero/banner images and under 80 KB for thumbnails and card images. With WebP at quality 80, most photos hit these targets easily. According to web.dev's image performance guide (from the Google Chrome team), images should be sized to the largest they'll ever display — not the largest they could be.

Quick ROI: What This Saves You in the Real World

Say your e-commerce product page has 10 unoptimised images averaging 2 MB each — that's 20 MB per page load. After compression, those same images average 120 KB each: just 1.2 MB total. A visitor on a standard 4G connection goes from waiting ~16 seconds to under 1 second for images to appear. That kind of speed improvement has been shown to increase conversion rates by 10–30% in published case studies from Google and Deloitte.

If you work with other file types, you might also want to look at how to organise and compress PDF files — the same principle of cutting unnecessary file weight applies there too.

Frequently Asked Questions

Does compressing images reduce quality?

Lossy formats like JPEG and WebP do remove some image data, but at quality settings of 75–82, the difference is invisible to the human eye on a screen. Lossless formats like PNG compress without any data loss. For most web images, quality 80 WebP is the right balance — noticeably smaller file, visually identical result.

What is the best image format for web performance?

WebP is the best choice for most websites today. It supports both photos and graphics, produces files 25–35% smaller than JPEG or PNG at equivalent quality, and is fully supported by Chrome, Firefox, Safari, and Edge. For cutting-edge compression, AVIF goes even further but has slightly lower browser support.

How do I compress images without losing quality?

Use a lossless compression tool or format (PNG, lossless WebP). Tools like Squoosh let you toggle between lossy and lossless modes. For photos, lossless compression gives smaller files than the original but larger than lossy — it is a trade-off. For logos and flat-colour graphics, lossless PNG or SVG is the right call.

Should I resize images before or after compressing them?

Resize first, then compress. Compressing a 4000 px wide image and then resizing it to 800 px still forces the browser to download all the extra pixels. Resize to your target display width first, then apply compression. This order gives the biggest file-size reduction.