How to Compress Images for Web in 2026

Why Image Optimization Still Matters in 2026

Images account for roughly 50% of the average web page's total weight. Despite faster networks and better hardware, unoptimized images remain the single biggest performance bottleneck for most websites. A 2026 study by the HTTP Archive shows that the median web page now ships 2.8 MB of images — up from 1.0 MB just five years ago.

The consequences are real:

Slower load times — Every extra 100 KB adds roughly 50–200 ms on a 4G connection. Google's Core Web Vitals penalize pages where the Largest Contentful Paint (LCP) exceeds 2.5 seconds.
Higher bounce rates — 53% of mobile users abandon a page that takes longer than 3 seconds to load.
Wasted bandwidth and hosting costs — Serving uncompressed images burns through CDN quotas and inflates cloud bills.
Poor SEO rankings — Google uses page speed as a ranking signal. A slow site drops positions.

The good news: modern image compression can reduce file sizes by 60–90% with virtually no perceptible quality loss.

Understanding Image Formats

Choosing the right format is the first — and often the most impactful — decision you can make.

JPEG — The Workhorse

JPEG has been the default photo format for three decades. It uses lossy compression that discards information the human eye is unlikely to notice. At quality 80, most photos lose 70–80% of their file size with minimal visual degradation.

Best for: photographs, complex images with gradients, hero banners.

PNG — Lossless but Heavy

PNG preserves every pixel exactly, which makes it ideal for graphics with sharp edges, text overlays, and transparency. The trade-off is file size — a PNG can easily be 5–10× larger than an equivalent JPEG.

Best for: logos, icons, screenshots, images with transparency.

WebP — The Modern Default

Developed by Google, WebP supports both lossy and lossless compression, plus transparency and animation. It typically produces files 25–35% smaller than JPEG at the same visual quality. Browser support is now universal (97%+ globally).

Best for: general web use — it's the safest modern upgrade from JPEG.

AVIF — Maximum Compression

AVIF, based on the AV1 video codec, pushes compression further than WebP. Expect 30–50% smaller files compared to JPEG. The downside: encoding is slower, and browser support, while growing fast (92%+ in 2026), still lags behind WebP in some edge cases.

Best for: sites that prioritize the smallest possible file size and can afford a WebP/JPEG fallback.

Best Practices for Web Image Compression

1. Resize Before You Compress

A 4000×3000 px photo from a smartphone is overkill for a 800 px wide content area. Resize the image to the largest dimension it will actually be displayed at. This alone can cut file size by 80% before any quality reduction.

2. Choose the Right Quality Setting

There is no universal "best" quality number, but these ranges are a solid starting point:

Hero images / portfolio: quality 80–85
Blog post images: quality 70–80
Thumbnails / previews: quality 60–70
Background textures: quality 50–60

Always compare the compressed output visually. A few quality points can make a big difference in file size with negligible visual impact.

3. Strip Metadata

EXIF data (camera model, GPS coordinates, timestamps) can add 10–100 KB per image. Unless you need it, strip it. This also protects user privacy.

4. Use Responsive Images

Serve different sizes for different viewports using the <picture> element or srcset attribute:

<picture>
  <source srcset="photo-800.avif" type="image/avif" media="(max-width: 800px)">
  <source srcset="photo-800.webp" type="image/webp" media="(max-width: 800px)">
  <source srcset="photo-1600.avif" type="image/avif">
  <source srcset="photo-1600.webp" type="image/webp">
  <img src="photo-1600.jpg" alt="Description" loading="lazy" width="1600" height="900">
</picture>

5. Lazy Load Below-the-Fold Images

Add loading="lazy" to any image that isn't visible in the initial viewport. This defers loading until the user scrolls near the image, improving LCP.

6. Use a CDN with Automatic Format Negotiation

Services like Cloudflare, Bunny, and Imgix can automatically serve AVIF to browsers that support it, WebP to the rest, and JPEG as a fallback — all from a single upload.

Step-by-Step: Compressing Images with Deflato

Deflato makes it straightforward to compress images for the web without installing any software:

Upload — Drag and drop up to 50 images at once (JPEG, PNG, WebP, AVIF, HEIC, RAW).
Choose your output format — Select WebP or AVIF for maximum savings, or stick with JPEG for universal compatibility.
Set quality — Use the slider to pick a quality level. The preview updates in real time so you can see the trade-off.
Resize (optional) — Set a maximum dimension or resize by percentage to further reduce file size.
Compress & Download — Hit the button and download individual files or a ZIP archive.

For automated workflows, Deflato offers a REST API and SDKs for Python, Node.js, and cURL, so you can integrate compression directly into your build pipeline or CMS.

How Much Can You Save?

Real-world results from Deflato users:

JPEG → WebP at quality 80: 40–60% size reduction
PNG → WebP (lossless): 25–35% size reduction
JPEG → AVIF at quality 75: 55–70% size reduction
4000 px photo resized to 1600 px + WebP: 85–95% size reduction

Conclusion

Image compression is one of the highest-impact, lowest-effort optimizations you can make for any website. Pick the right format (WebP or AVIF), resize to the actual display size, choose a sensible quality setting, and strip metadata. Tools like Deflato handle all of this in seconds — no Photoshop or command-line tools required.