Images are the biggest contributor to page weight on most websites. The average webpage is over 2MB, and more than half of that is images. Google uses Core Web Vitals — which includes Largest Contentful Paint (LCP) — as a ranking signal. Slow images = worse SEO.
But you cannot just compress everything to death. Visitors notice pixelated, artifact-ridden images, and they bounce. So how do you make images fast without making them ugly?
Step 1: Choose the Right Format
The format you choose has the single biggest impact on file size: WebP saves 25-35% vs JPEG at the same quality. AVIF saves 30-50% vs JPEG. Both support transparency (unlike JPEG). WebP has 97%+ browser support in 2026. AVIF has 94%+ browser support.
Recommendation: Serve WebP as the primary format with a JPEG fallback using the HTML <picture> element. For high-traffic pages, consider AVIF with a WebP fallback. Never use PNG for photos — a 1200px PNG photo is 800KB+ vs 100KB for an equivalent WebP.
Step 2: Resize to Display Dimensions
The most common mistake: uploading a 4000×3000 pixel photo and displaying it at 800×600 on the page. The browser still downloads the full 4000px image. The fix: resize images to exactly the dimensions they will be displayed at. Use the Image Resize tool (https://www.iamuu.com/image/resize/) to set precise dimensions.
For responsive images, generate 2-3 sizes: Desktop (1200-1600px wide), tablet (800-1000px wide), and mobile (400-600px wide). Use the HTML srcset attribute to let the browser pick the right size based on screen width.
Step 3: Compress Aggressively — But Visually Test
The human eye is surprisingly tolerant of compression. At 85% JPEG quality, most people cannot reliably distinguish from 100% in a blind test. At 75% WebP quality, visual loss is imperceptible on screens while saving 30-40% vs uncompressed.
How much you can compress depends on the image type: Photos: 75-85% quality is the sweet spot. Logos with flat colors: PNG or WebP lossless. Screenshots with text: Compress less (85-90%) — text artifacts are more visible than photo artifacts. Product photos with white backgrounds: Can compress aggressively (70-80%) since backgrounds show artifacts more than the product itself.
Test your compressed images at 100% zoom. Check edges, gradients, and text areas specifically. What looks fine at thumbnail size might have visible banding or blocking at full size.
Step 4: Strip Metadata
JPEG and RAW files contain EXIF data — camera model, GPS coordinates, timestamp, editing software used. This metadata can add 10-50KB per image — wasted bytes. Use the Image Convert tool (https://www.iamuu.com/image/convert/) with "Strip EXIF" enabled to remove it. Privacy bonus: no one can see where you took the photo.
Step 5: Use Lazy Loading
Images below the fold should not load until the user scrolls to them. HTML supports this natively: <img src="photo.webp" loading="lazy" alt="...">. This is supported in all modern browsers and requires zero JavaScript. Combine with explicit width and height attributes to prevent layout shift (CLS) as images load.
Step 6: Serve Through a CDN with Modern Formats
A CDN puts your images on servers close to your visitors. U-Ultra/Unity uses Tencent Cloud COS for static assets. For your own website: use a CDN (Cloudflare, BunnyCDN, AWS CloudFront). Enable automatic WebP/AVIF conversion if supported. Set long cache headers (Cache-Control: public, max-age=31536000, immutable) for hashed filenames.
The Cumulative Impact
A real example: A blog post with 10 product photos at 500KB each (JPEG, full-res): 5MB total, LCP ~4.5 seconds on 3G. After optimization (WebP 85%, resized to display dimensions, EXIF stripped, lazy loaded): 10 images at 80KB each = 800KB total, LCP ~1.1 seconds on 3G. Page weight reduced by 84%. LCP improved by 75%.
Quick Optimization Checklist
Use WebP (and AVIF for advanced). Resize to actual display dimensions. Compress to 75-85% quality. Strip EXIF metadata. Serve via CDN with long cache headers. Add width/height attributes to prevent CLS. Use loading="lazy" for below-fold images. Generate responsive sizes with srcset.
Ready to optimize? Try the Image Compress (https://www.iamuu.com/image/compress/) and Resize (https://www.iamuu.com/image/resize/) tools at U-Ultra/Unity — free, no registration.