Image Compression for Web Performance: A Practical Guide to a Green LCP

2026-08-06

Images are the number one thing slowing down web pages, and also the easiest to optimize. This guide gives a ready-to-use image compression and performance workflow: right format, target size, batch processing, and LCP verification, so your pages go green on Core Web Vitals.

Pick the right format before compressing

• Use JPEG or WebP for photos
• Use PNG or WebP when transparency is needed
• Use SVG for icons and line art: tiny and crisp at any scale
• Prefer AVIF or WebP for animated images
• At equal quality, WebP is typically 25% to 35% smaller than JPEG

Set a target size for every image

• Keep hero images under 100KB
• Keep body images under 200KB
• Keep thumbnails under 30KB
• A total page image weight under 1MB is a safe line

A three-step compression workflow

• Set a target KB in the tool and let it find the best quality automatically
• Drag multiple images in at once for batch processing
• Preview locally after export to confirm no visible quality loss

Do not forget dimensions and responsiveness

• Do not upload a 4000px original and scale it with CSS
• Use srcset to serve multiple sizes for different screens
• Serve smaller images to mobile

Verify with LCP

• LCP under 2.5 seconds is good
• The largest content element is usually the hero image; compress it first
• Re-check real field data with PageSpeed Insights

Common mistakes

• Compressing without resizing; a 4000px original stays large
• Pushing lossy quality to the extreme and blurring the image
• Ignoring WebP compatibility and skipping a JPEG fallback
• Re-compressing the same image repeatedly, which degrades it

Frequently asked questions