DEV Community

zohaib hassan
zohaib hassan

Posted on

I Reduced My Website's Image Size by 80% — Here's Exactly How

#webdev #tutorial #beginners #javascript

I Reduced My Website's Image Size by 80% — Here's Exactly How

Last month, I audited my website and discovered that images were the biggest performance bottleneck.

One hero image alone was 4.2MB.

No surprise my Lighthouse score was terrible.

After optimization, that same image dropped to 820KB, and page load time improved by 2.3 seconds.

Here’s exactly what I did.

Why Image Size Matters More Than You Think

Images are usually the largest assets on any webpage.

According to HTTP Archive, images account for 50%+ of total page weight on average.

Every extra megabyte costs you:

  • Slower page loads (especially on mobile)
  • Higher bounce rates
  • Lower SEO rankings (Core Web Vitals impact)
  • Increased bandwidth costs at scale

Understanding Image Compression

Lossy Compression

Lossy compression permanently removes some image data to reduce file size.

  • Smaller file size
  • Slight quality reduction (usually unnoticeable)

Best for:

  • Photos
  • Complex images with many colors

Example format: JPEG

Lossless Compression

Lossless compression reduces file size without removing image data.

  • No quality loss
  • Larger than lossy formats

Best for:

  • Logos
  • Screenshots
  • Images with text or transparency

Example format: PNG

JPEG vs PNG vs WebP vs AVIF

Format Compression Transparency Best For
JPEG Lossy ❌ No Photos
PNG Lossless ✅ Yes Logos, screenshots
WebP Lossy + Lossless ✅ Yes Everything
AVIF Lossy + Lossless ✅ Yes Next-gen web

Recommendation (2026)

Use WebP by default.

Why?

  • 25–35% smaller than JPEG
  • Excellent quality retention
  • Supported in all modern browsers

My Exact Optimization Process

Step 1 — Audit Your Images

Run your site through:

  • Google PageSpeed Insights
  • Lighthouse

Focus on:

  • “Properly size images”
  • “Serve images in next-gen formats”

Step 2 — Compress Without Losing Quality

I used this tool:

👉 https://onlinefreetools.online/tools/image-compressor

Everything runs directly in the browser:

  • No uploads
  • No server processing
  • Instant compression

For JPEGs, 75–85% quality is the sweet spot:

  • No visible difference
  • 50–70% file size reduction

Step 3 — Resize Images Properly

Never serve a 2000px image inside a 400px container.

Always resize images to their actual display dimensions before compression.

Step 4 — Use Lazy Loading

```html id="lazy1"
Description




This delays loading off-screen images until the user scrolls to them.

Result: faster initial page load.

---

## Step 5 — Add Width and Height



```html id="dim1"
<img src="image.jpg" width="800" height="600" alt="Description" />
Enter fullscreen mode Exit fullscreen mode

This prevents layout shifts by reserving space before images load.

Results From My Site

Asset Before After Savings
Hero Image 4.2 MB 820 KB 80%
Blog Thumbnails 890 KB 145 KB 84%
Tool Screenshots 1.1 MB 210 KB 81%
Total Page Weight 8.4 MB 1.7 MB ~80%

Quick Wins You Can Do Right Now

  • Compress all images using a browser tool
  • Add loading="lazy" to below-the-fold images
  • Define width and height attributes for all images
  • Convert hero images to WebP
  • Replace decorative images with CSS where possible

Final Thoughts

Image optimization is one of the fastest performance wins in web development.

A faster site means:

  • Better UX
  • Better SEO
  • Higher conversion rates

Start with images — it's the highest-impact improvement you can make today.

Written by Zohaib Hassan

OnlineFreeTools.online — 30+ free developer tools, no signup required

Top comments (0)