DEV Community

Cover image for How to Compress Images for Web — Reduce JPG and PNG File Size Free
Shaishav Patel
Shaishav Patel

Posted on

How to Compress Images for Web — Reduce JPG and PNG File Size Free

Unoptimised images are the most common reason websites load slowly. A single phone photo can be 4–6MB. A page with five of those takes 5–10 seconds to load. Google measures this. So does your bounce rate.

Compressing images for web takes about 30 seconds: Free Image Compressor — No Upload


What "Compressing for Web" Actually Means

Images on the web don't need to look perfect on a 4K monitor. They need to load fast on a phone with average mobile data. Those are different goals.

Target file sizes for web:

Use case Target size
Hero / banner image Under 200KB
Blog post inline image Under 100KB
Product photo (e-commerce) Under 150KB
Thumbnail / preview Under 50KB
Background image Under 300KB

If your images are consistently over these limits, your page speed scores will reflect it.


JPG vs PNG — Which to Compress?

Use JPG for:

  • Photos and realistic images
  • Images without transparent backgrounds
  • Hero images, banners, blog photos

JPG supports lossy compression. At 75–85% quality, the image looks identical on screen but is 60–80% smaller.

Use PNG for:

  • Logos and icons with transparency
  • Screenshots and diagrams with text
  • Anything that needs pixel-perfect edges

PNG supports lossless compression. Quality is unchanged — typically 20–40% smaller.

Use WebP for both — it's smaller than JPG and PNG at the same visual quality. Modern browsers support it universally. If you're building for web, convert to WebP.


How to Compress Images for Web (Free, No Upload)

  1. Go to the Image Compressor
  2. Drop your images (up to 20 at once — JPG, PNG, WebP)
  3. Set quality: 80% is the sweet spot for most web images
  4. Choose output format: keep original, force JPEG, or force PNG
  5. Download individually or as a ZIP

Everything runs in your browser. Your files never leave your device.


The 80% Quality Rule

Not sure what quality setting to use? Start at 80%.

At 80% quality, a typical 4MB JPEG becomes 300–500KB with no visible difference on screen. Most users and Google's crawlers cannot tell the difference from the original.

Only go below 80% for thumbnails and previews where users won't look closely. Only go above 90% for print-quality or portfolio work.


Batch Compress Before Every Upload

The compressor handles up to 20 images at once. The workflow:

  1. Export all images from your design tool / camera
  2. Drop them all into the compressor at once
  3. Set quality once, apply to all
  4. Download ZIP → extract → upload to your CMS

What used to require Photoshop's "Save for Web" for each image individually now takes 30 seconds for the full batch.


Why This Matters for SEO

Google's Core Web Vitals measure Largest Contentful Paint (LCP) — how fast the main image on a page loads. Images are the most common LCP element.

Compressing images directly improves LCP. Better LCP = better Core Web Vitals score. That's a confirmed Google ranking signal.

Other effects:

  • Faster load times reduce bounce rate
  • Smaller files use less bandwidth (matters for mobile users)
  • Lower hosting costs if you're on metered storage

Quick Comparison: What to Expect

Original file After compression (80%) Reduction
iPhone photo, 4.2MB JPEG ~350KB ~92%
Product photo, 2.8MB JPEG ~240KB ~91%
Logo with transparency, 1.1MB PNG ~680KB lossless ~38%
Screenshot, 800KB PNG ~500KB lossless ~38%

Compress Your Images Now

Free Image Compressor — works in your browser, no upload →

No account. No size limit per image. Up to 20 files at once. Download as ZIP.

Top comments (0)