Reduce Image File Size for Websites: How-To

Why image size matters

Images are the single heaviest asset on most web pages. A page with five unoptimized 4MB photos forces visitors to download 20MB before it fully loads — slow on broadband, painful on mobile, and a direct hit to your search rankings. Google’s Core Web Vitals measure loading performance, and image weight is the biggest lever you control.

The good news: you can typically cut image weight by 70-90% with zero visible quality loss. It comes down to three levers — resize, compress, and format choice.

Lever 1: Resize to what you actually display

The biggest wins come from dimensions, not quality sliders. A photo straight from a camera is often 4000-6000 pixels wide. If your blog content column is 800 pixels wide, you’re shipping 5x more pixels than anyone will ever see.

Resize each image to roughly the width it displays at (a little larger for high-DPI screens — 1.5x to 2x the CSS width is a safe rule). This single step often removes more bytes than anything else. Use Formatly’s free resize tool to set exact dimensions in seconds, right in your browser.

A common mistake is uploading the full-resolution original “just in case” and letting CSS shrink it visually. The browser still downloads every byte. Always resize the actual file before publishing.

Lever 2: Compress smartly

Compression removes data the eye barely notices. For photos, a quality setting around 75-85% is the sweet spot: below that, artifacts creep in; above it, you’re paying bytes for invisible detail.

Key points:

• Use lossy compression for photos. JPG and WebP at sensible quality settings beat PNG every time for photographic content.
• Strip metadata. EXIF data (camera settings, GPS coordinates) adds weight and can leak your location. Removing it is free bytes and better privacy.
• Don’t compress twice. Start from your highest-quality original each time. Re-compressing an already-compressed JPG degrades it further.

Formatly’s image compressor lets you preview quality against file size so you can find the right balance visually.

Lever 3: Choose the right format

Format choice can halve a file on its own:

• Photos → WebP or JPG. WebP is the modern pick: same quality as JPG at noticeably smaller sizes, plus transparency support.
• Graphics, logos, text → PNG or WebP. PNG stays sharp for flat graphics; WebP does the same job smaller.
• Simple icons → SVG. Vector format, infinitely scalable, tiny.

For a deeper dive, see our image SEO guide and our guide to compressing images without losing quality.

The WebP advantage

If you take one thing from this guide, make it WebP. Converting a JPG to WebP at equivalent visual quality typically saves 25-35% — and it supports transparency, so it can replace PNGs too. Every modern browser supports it, and for the rare older browser you can serve a JPG fallback with the <picture> element.

Formatly’s WebP optimizer converts and compresses to WebP in one step, entirely in your browser.

A practical workflow

Here’s a repeatable process for every image you publish:

1. Export at the right size. Resize to ~2x your display width using the resize tool.
2. Convert to WebP. Run it through the WebP optimizer (or keep PNG for graphics that need it).
3. Compress. Target under 200KB for heroes, under 100KB for content images — adjust quality until the file size lands.
4. Strip metadata. Remove EXIF before publishing.
5. Use responsive images. Serve smaller versions to mobile with srcset so phones don’t download desktop-sized files.

Five steps, a few minutes, and your pages load dramatically faster. Your visitors — and Google — will notice.

Measure the difference

Don’t optimize blindly. Before and after, run your page through Google’s PageSpeed Insights and note the Largest Contentful Paint (LCP) score — images are usually what drags it down. After resizing, converting to WebP, and compressing, re-test. Seeing LCP drop from 4 seconds to under 2 is common, and that improvement shows up directly in how the page feels. Make this workflow a habit for every new image, and image weight stops being a problem you have to fix retroactively.