How to Optimize Images for Web: A Complete Guide
Learn how to reduce image file sizes without sacrificing quality. Essential techniques for faster websites and better SEO.
Images account for over 50% of the average webpage's total size. Unoptimized images slow down your site, hurt your SEO rankings, and frustrate visitors on mobile connections. Optimizing images is one of the highest-impact performance improvements you can make.
Why Image Optimization Matters
- Faster page load times — directly impacts bounce rate
- Better Core Web Vitals scores (LCP, CLS)
- Improved Google SEO rankings
- Lower bandwidth costs for you and your users
- Better experience on slow mobile connections
Step 1: Choose the Right Format
The format you choose has a huge impact on file size and quality:
- JPEG — Best for photographs and complex images with many colors. Lossy compression.
- PNG — Best for images with transparency, logos, and screenshots. Lossless.
- WebP — Modern format from Google. 25-35% smaller than JPEG at same quality. Excellent browser support.
- AVIF — Next-gen format. Even smaller than WebP but slower to encode.
- SVG — For icons, logos, and simple graphics. Infinitely scalable.
Tip
Use WebP as your default for photos and complex images in 2025. All modern browsers support it, and the file size savings are significant.
Step 2: Resize to the Correct Dimensions
One of the most common mistakes is uploading a 4000×3000 pixel photo and displaying it at 800×600. The browser downloads the full 4K image even though it only shows it small. Always resize images to the maximum size they'll be displayed.
Common display sizes to target:
- Full-width hero images: 1920px wide maximum
- Blog post images: 800–1200px wide
- Thumbnails: 300–400px wide
- Avatar/profile photos: 200px wide
Step 3: Compress Without Losing Quality
After resizing, compress the image. For JPEG, quality settings between 75-85% are usually indistinguishable from 100% to the human eye but are 60-80% smaller. For PNG, use lossless compression tools that strip metadata and optimize the color palette.
Step 4: Strip Metadata
Photos taken with smartphones contain EXIF data — GPS coordinates, camera model, settings, and more. This metadata can add 10-30KB to a file and is usually irrelevant for web use. Strip it before publishing.
Step 5: Use Lazy Loading
Lazy loading delays loading images that are off-screen until the user scrolls to them. In HTML, this is as simple as adding loading="lazy" to your img tags. For images below the fold, this dramatically reduces initial page load time.
<img src="photo.webp" alt="Description" loading="lazy" width="800" height="600">Practical Results You Can Expect
A typical unoptimized website with a 3MB hero image and several blog photos can be brought down to under 500KB total with these techniques. Page load times often improve by 2-5 seconds on mobile — a massive improvement for user experience.