Why Your Website Images Are Probably Too Big (And How to Fix It)

Here’s a fun fact: on most websites, a single unoptimized hero image weighs more than all the HTML, CSS, and JavaScript combined. You spent weeks optimizing your build pipeline, tree-shaking your dependencies, and code-splitting your routes. Meanwhile, a 4MB JPEG from your photographer’s camera is sitting in your /public folder, completely uncompressed, laughing at you.

Image optimization is the biggest performance win most sites can make. And no, you don’t have to make everything look like it was rendered on a Game Boy.

Resolution: You’re Probably Serving Way Too Many Pixels

That 4000px-wide photo displayed at 800px on screen? Your browser downloads all 4000 pixels, then throws away 80% of them. It’s like ordering a whole pizza just to eat one slice. (Okay, bad example, we’ve all done that.)

Use a DPI/PPI calculator to figure out what resolution you actually need. The cheat sheet:

• Web display: 72 PPI
• Retina screens: 2x your display size (so a 400px image needs an 800px source)
• Anything beyond 2x: wasted bandwidth

An image resize calculator handles the math when you need to scale proportionally. Punch in your target width, get the correct height. No more stretched logos that look like they’re being interrogated.

Thumbnails: Please Stop Using CSS to Shrink Full-Size Images

This is the web performance equivalent of driving a semi truck to pick up groceries. You load a 3MB image, then tell the browser “display this at 150x150 pixels.” The browser still downloads the whole thing.

An image thumbnail generator creates actual small files at the dimensions you need. On a page with 20 product images, this can cut your image payload by 90%.

Thumbnail best practices:

• Match your actual layout dimensions (not “close enough”)
• Include 2x versions for retina
• Compress thumbnails more aggressively than hero images (small images hide artifacts well)
• Keep consistent aspect ratios so your grid doesn’t look like a ransom note

Format Selection: The Great Format Debate

• WebP - Use this. 25-35% smaller than JPEG at the same quality. Browser support is basically universal now.
• PNG - For transparency and sharp text/line art. Never for photos (unless you enjoy 8MB files).
• SVG - Icons, logos, illustrations. Infinitely scalable, tiny file sizes. Need a raster version? An SVG to PNG converter handles that.
• AVIF - Better compression than WebP, but slower to encode and not supported everywhere yet. Good as a progressive enhancement.

Lazy Loading: Don’t Load What Nobody Sees

Even perfectly optimized images shouldn’t all download at once. Add loading="lazy" to every image below the fold. That’s it. One HTML attribute. Your Lighthouse score will send you a thank-you card.

For hero images and above-the-fold content, use loading="eager" (or just omit the attribute) so they load immediately. Nobody wants to see a blank rectangle where your headline image should be.

Build a Pipeline (Your Future Self Will Thank You)

Manual optimization doesn’t scale. If you touch images more than occasionally, build a process:

1. Resize source images to maximum display dimensions
2. Generate thumbnails at required sizes
3. Convert to WebP with JPEG/PNG fallback
4. Compress appropriately for each image type
5. Verify file sizes before deploying

Browser-based tools make this doable without installing anything. For teams that also handle documents and images together, PDFb2 does image-to-PDF conversion and document processing right in the browser. No uploads, no waiting.

Your users on 3G will thank you. Your Core Web Vitals will thank you. Your hosting bill will thank you.