How to Compress Images for the Web — Without Sacrificing Quality

Why it matters

Images typically make up 50 to 80 percent of total page weight. Large images slow page loading, hurt Core Web Vitals, and cost mobile users data.

Three-step approach

First, choose the right format: photos use WebP or JPG, graphics use PNG or WebP lossless, icons use SVG. Second, resize to display dimensions — never upload a 4000px image for an 800px container. Third, compress at the right quality: JPG at 75 to 85, WebP at 70 to 80.

Practical sizing guide

Full-width hero: 1920px wide, 80 percent quality WebP. Blog image: 1200px wide, 80 percent quality. Product thumbnail: 600px wide, 75 percent quality. Avatar: 200px wide, PNG or lossless WebP.

How much can you compress?

Converting JPG to WebP: 25 to 35 percent size reduction. Compressing JPG at 80 vs 100 quality: 60 to 70 percent reduction. Resizing 4000px to 1200px: 85 to 90 percent reduction. Combined, you can achieve 70 to 90 percent total reduction with no visible difference.

FAQ

What is the best image format for websites in 2025? WebP. Smaller files than JPG and PNG with equivalent quality, supported by all major browsers.

How do I know if images are hurting my page speed? Run your URL through Google PageSpeed Insights. Look for Serve images in next-gen formats or Properly size images.