How to Compress Images for Your Website

Why image compression matters for websites

Images are the single largest contributor to web page weight. A typical blog post with five uncompressed photos can easily exceed 10 MB in total page size. This causes:

• Slow page loading — Visitors wait seconds instead of milliseconds
• Poor mobile experience — Slow connections amplify the problem
• Lower search rankings — Google uses page speed as a ranking factor
• Higher bounce rates — 53% of mobile users leave pages that take over 3 seconds to load
• Increased hosting costs — More bandwidth consumed per visitor

Compressing images is one of the highest-impact, lowest-effort optimizations you can make for any website.

Image compression strategies

1. Choose the right format

The format you choose has the biggest impact on file size:

Recommendation: Convert photographs to WebP for maximum savings. Use our PNG to WebP or JPG to WebP converters.

2. Compress within the same format

When you need to keep the original format (e.g., your CMS only accepts JPG), use lossy compression:

Available compression tools:

• Compress JPG — Reduce JPG file sizes
• Compress PNG — Optimize PNG files
• Compress WebP — Further optimize WebP
• Compress HEIC — Shrink iPhone photos

3. Resize before compressing

An image displayed at 800px wide doesn't need to be 4000px wide. Resize to the maximum display dimensions before compressing:

• Hero/banner images: 1200–1920px wide
• Blog content images: 800–1200px wide
• Product thumbnails: 300–600px wide
• Icons and avatars: 100–200px wide

Uploading oversized images and relying on HTML/CSS to scale them down wastes bandwidth. The browser still downloads the full-size file.

4. Use responsive images

Serve different image sizes for different screen sizes using the srcset attribute:

<img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, 800px"
  alt="Description"
/>

Mobile users download a 400px image instead of the full 1200px version.

Step-by-step compression workflow

For a new website

1. Export images from your camera or design tool
2. Resize to the maximum display width on your site
3. Convert to WebP using JPG to WebP or PNG to WebP
4. Upload WebP files to your website
5. Add JPG fallback using <picture> elements for older browsers

For an existing website

1. Audit current images — Use Google PageSpeed Insights to identify oversized images
2. Batch download images from your site
3. Compress or convert using JPGConvert.io tools
4. Replace files on your server (keep the same filenames if possible)
5. Re-test with PageSpeed Insights to measure improvement

Compression guidelines by image type

Photographs

• Format: WebP (lossy, 80% quality) or JPG (85% quality)
• Target size: 100–200 KB
• Max width: 1200px for content, 1920px for hero images

Screenshots

• Format: WebP (lossless) or PNG (compressed)
• Target size: 50–150 KB
• Consider cropping to relevant area before compressing

Logos and icons

• Format: SVG (preferred) or PNG with transparency
• Target size: Under 20 KB
• Use SVG for simple logos; PNG for complex ones

Product photos (e-commerce)

• Format: WebP with JPG fallback
• Target size: 100–300 KB per image
• Consistent dimensions across all product images

Measuring results

After compressing your images, verify the improvement:

1. Google PageSpeed Insights (pagespeed.web.dev) — Enter your URL and check the performance score
2. GTmetrix (gtmetrix.com) — Detailed waterfall chart showing image load times
3. Chrome DevTools — Network tab → filter by Img → compare total transfer size
4. Google Search Console — Core Web Vitals report shows LCP improvements over time

A typical website sees a 30–50% reduction in total page weight after proper image optimization.

Common mistakes to avoid

• Uploading camera originals — A 4000×3000, 8 MB photo displayed at 600px wide
• Using PNG for photos — PNG is 5–10x larger than JPG for photographic content
• Over-compressing — Below 60% JPG quality, visible artifacts appear
• Ignoring mobile — Test on 3G/4G connections, not just office WiFi
• Forgetting alt text — Compression helps speed; alt text helps SEO and accessibility

Related guides: What is WebP? · JPG vs PNG vs WebP