← All posts

How to Compress Images for the Web

TinyForge Blog · Image optimization guides

Images are usually the heaviest assets on a webpage. Compressing them is the single biggest win for page speed, Core Web Vitals, and SEO. This guide shows you exactly how to do it.

Why image compression matters

A 4 MB hero image can turn a 1-second page into a 6-second page on mobile. Google's Core Web Vitals (LCP, CLS, INP) directly affect search ranking, and LCP is almost always an image.

Step 1: Pick the right format

• WebP — best all-rounder. ~30% smaller than JPEG at equal quality. Supported by all modern browsers.
• AVIF — even smaller than WebP (~50% smaller than JPEG) but slower to encode and slightly less browser support.
• JPEG — universal fallback, great for photos.
• PNG — lossless, use only for graphics, logos, screenshots with text.

Rule of thumb: photos → WebP/AVIF; logos/icons → SVG or PNG; screenshots with text → PNG.

Step 2: Resize to display dimensions

Never serve a 4000px image in a 800px slot. Resize to 2x the display size (for retina) max. A 1600px-wide hero is plenty.

Step 3: Choose quality

For JPEG/WebP, quality 75–85 is the sweet spot — visually identical to 100 but 40–60% smaller. Below 70 you'll see artifacts.

Step 4: Compress

Use a tool that doesn't upload your files. TinyForge runs entirely in your browser — drop images, pick format/quality, download. No signup, no watermarks.

Step 5: Serve modern formats with fallbacks

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="..." loading="lazy" width="1600" height="900">
</picture>

Step 6: Lazy load & dimensions

Add loading="lazy" to below-the-fold images and always set width/height to prevent layout shift (CLS).

Checklist

• Right format (WebP/AVIF)
• Resized to display size (2x max)
• Quality 75–85
• Lazy loading below fold
• Width/height set
• Served via CDN with caching

Try TinyForge — free, in-browser image compressor →