How to Compress Images for Web Performance
How to compress images for web performance. Step-by-step guide to reduce image file size for faster page loads and better Core Web Vitals scores. Free tools.
Why Compressing Web Images Is Critical
Images account for 50–70% of total web page weight on average. Google's Core Web Vitals — specifically Largest Contentful Paint (LCP) — is directly affected by image load time. Sites that compress images properly consistently outrank those that don't.
The target for any web image: under 100KB for most content images, under 200KB for hero images, under 30KB for thumbnails.
Step 1: Choose the Right Format
WebP is the best format for most web images in 2026. It's 25–35% smaller than JPG at equivalent quality and supports transparency. Convert at /imagetools/webp/.
Use AVIF for maximum compression if your target audience uses modern browsers exclusively. Use PNG only for images that genuinely require pixel-perfect lossless quality or transparency with hard edges.
Step 2: Resize to Display Dimensions
Never serve a 4000px image when it's displayed at 800px. Resize images to 2× your maximum display size (to support Retina/HiDPI screens). For a 1200px-wide blog post, resize images to 1200px width maximum.
Use Glopix Compressor or the Batch Processor to resize and compress simultaneously.
Step 3: Set the Right Compression Quality
For JPG: quality 80 for photos, 85 for product images where detail matters. For WebP: quality 82 gives the best balance of quality and file size. For PNG: use lossless compression (automatic) — focus on resizing rather than quality for PNG.
Never use 'Save for Web' at 100% quality — the files are enormous with minimal visual benefit.
Step 4: Implement Responsive Images in HTML
Use the `srcset` attribute to serve different image sizes to different screen widths. This prevents mobile users from downloading desktop-sized images:
`
`
Useful Tools for This Guide
Frequently Asked Questions
What is the best image compression tool for web? expand_more
For browser-based free compression with batch support, Glopix at /imagetools/compress/ is the most capable in 2026. For CLI workflows, libvips and ImageMagick are industry standards.
How do I compress images for Google PageSpeed? expand_more
Convert to WebP, resize to maximum display dimensions (2×), and aim for under 100KB per image. Run through Glopix Compressor with WebP output and quality 82.
What is LCP and how do images affect it? expand_more
Largest Contentful Paint (LCP) measures how long the largest visible element takes to render. For most pages, this is the hero image. An LCP under 2.5 seconds is 'Good' per Google's Core Web Vitals threshold. Compressed, properly-sized hero images are the single biggest LCP improvement.
Should I use lazy loading for images? expand_more
Yes — add loading='lazy' to all images below the fold. This defers loading until the user scrolls near the image, improving initial page load. Never lazy-load the hero image (LCP element) — it should load immediately.
How much can I reduce image file size without quality loss? expand_more
For photography: 60–80% reduction is achievable with imperceptible quality loss at quality 80 WebP. For PNG graphics: 20–40% reduction via lossless optimization and metadata removal.