How to Compress Images for Your Website Without Losing Quality

Why image compression matters more than ever

Google's Core Web Vitals update made page speed a direct ranking signal. The metric that images affect most is Largest Contentful Paint (LCP) — how long it takes the biggest visible element on the page to load. In the majority of pages, that element is an image, usually the hero or a large featured photo.

Google's threshold for a "Good" LCP is under 2.5 seconds. A 3MB hero image on an average broadband connection takes 4–6 seconds to load — putting you squarely in the "Poor" range. Compress that image to 150KB and you're under half a second. That single change can shift a terrible LCP score to an excellent one.

Beyond rankings, pages that load slowly have higher bounce rates regardless of content quality. A study by Akamai found that a one-second delay in page load time reduces conversions by 7%. For e-commerce sites, that's a hard number with real financial consequences. Even for informational sites, a high bounce rate sends negative signals to Google's ranking algorithm.

The right file size targets for every situation

There's no universal "correct" image size — it depends entirely on how and where the image is displayed. Here are the professional benchmarks used by web performance engineers:

Step-by-step: how to compress images properly

Step 1: Resize before you compress

Compression and resizing are different operations. Before compressing, make sure your image dimensions are appropriate for how they'll be displayed. Uploading a 4000×3000 pixel photo for a 600px-wide blog column is wasteful regardless of how well you compress it — there's four times more image data than the screen will ever show.

A practical rule: size your image to roughly twice its displayed width to account for high-DPI (Retina) screens. A 600px column gets a 1200px wide image. A 1920px full-width hero gets a 3840px image — but compress it harder to compensate for the larger dimensions.

Step 2: Pick the right format

Format choice alone can reduce file size by 25–50% without any visible quality change. Use WebP for almost everything on modern websites — it's smaller than JPG at equivalent quality, supports transparency like PNG, and has over 97% browser support as of 2025. Fall back to JPG for email campaigns and any environment where WebP isn't supported. Use PNG only for images requiring perfect lossless quality or transparency on systems where WebP isn't an option. Use SVG for logos and icons.

Step 3: Compress to your target size

Use the free compressor on this site. Upload your image, select your target (200KB for most content, 100KB for thumbnails), and download. The binary-search quality algorithm finds the highest quality setting that still fits your target — you're not just getting "a smaller file," you're getting the smallest possible quality reduction for that size.

Step 4: Add lazy loading

Add loading="lazy" to every image that appears below the fold. This single HTML attribute tells the browser to defer loading until the user scrolls near the image, dramatically reducing initial page weight. Never add lazy loading to your hero or above-the-fold images — those should load eagerly.

Step 5: Specify width and height attributes

Always add explicit width and height attributes to your image tags. Without them, the browser doesn't reserve space for images as the page loads, causing content to jump as images appear — a Core Web Vitals issue called Cumulative Layout Shift (CLS) that directly hurts your search rankings.

How compression affects Core Web Vitals

Properly compressed images improve three Core Web Vitals metrics simultaneously. LCP improves because smaller images load faster, often crossing the 2.5-second "Good" threshold. CLS improves when you specify image dimensions correctly, preventing layout shifts. FCP (First Contentful Paint) improves because the browser paints the first visual content faster when it's not waiting for a massive image to download.

The practical result: Google sees your page as faster, ranks it higher, and more users stay because the experience is better. It's one of the few optimisations that helps rankings, conversion rates, and user experience simultaneously.

Common compression mistakes to avoid

• Over-compressing: Pushing images to 50KB when they'll display at 800px wide results in visible blurring and pixel artifacts. Match your target to your display size and use our size guidance above.
• Re-compressing JPEGs: Every time you open a JPEG, edit it, and save it as JPEG again, compression artifacts compound. Always keep original files in PNG or RAW format and generate fresh compressed JPEGs from the original each time.
• Ignoring mobile: Mobile visitors on slower connections need even smaller images. Use the srcset attribute to serve smaller images to smaller screens.
• Using PNG for photos: PNG is lossless, which sounds good, but it produces enormous files for photographic content. Always use JPG or WebP for photos — save PNG for logos, icons, and graphics with text.
• Forgetting alt text: Alt text doesn't affect file size, but it's essential for image SEO and accessibility. Every image should have a descriptive alt attribute regardless of how well-compressed it is.

Try it right now

No software to install, no account to create, no files uploaded anywhere. Our browser-based compressor lets you compress up to 20 images at once to exact file size targets. Just drag and drop.