Image Optimization Guide: Compress, Resize & Convert Images for the Web
📖 8 min read · Images & Media · Try Image Compressor →
Why Image Optimization Matters
Images typically account for 50–70% of a webpage's total file size. Unoptimized images are the single biggest cause of slow page load times. Google's Core Web Vitals — which directly affect search rankings — are heavily influenced by image performance. A 1-second delay in page load time can reduce conversions by 7% and increase bounce rate by 11%.
Optimizing images improves page speed, reduces bandwidth costs, improves SEO rankings, and provides a better user experience — especially on mobile devices with slower connections.
Choosing the Right Image Format
JPEG / JPG
Best for: Photographs and complex images with many colors
✓ Small file size, universal support
✗ Lossy compression, no transparency, quality degrades with re-saves
PNG
Best for: Graphics, logos, screenshots, images needing transparency
✓ Lossless compression, supports transparency (alpha channel)
✗ Larger file size than JPEG for photos
WebP
Best for: Everything — modern replacement for JPEG and PNG
✓ 25-35% smaller than JPEG, supports transparency and animation, lossless and lossy modes
✗ Not supported in very old browsers (IE11)
AVIF
Best for: Next-generation format for modern browsers
✓ 50% smaller than JPEG, excellent quality
✗ Limited browser support, slow encoding
SVG
Best for: Icons, logos, illustrations, charts
✓ Infinitely scalable, tiny file size for simple graphics, editable with CSS
✗ Not suitable for photographs
GIF
Best for: Simple animations only
✓ Universal support for animations
✗ Limited to 256 colors, large file size — use WebP or video instead
Image Compression: Lossy vs Lossless
Lossy Compression
Permanently removes some image data to achieve smaller file sizes. The quality reduction is often imperceptible at 80-85% quality. Used by JPEG and WebP. Typical size reduction: 60-80%.
Lossless Compression
Reduces file size without any quality loss by removing metadata and optimizing encoding. Used by PNG and GIF. Typical size reduction: 10-30%. Use when image quality must be preserved exactly.
Recommended quality settings: For JPEG/WebP, use 80-85% quality for web images. This provides an excellent balance between file size and visual quality that most users cannot distinguish from 100% quality.
Image Resizing Best Practices
- Never serve larger images than needed — A 4000×3000px photo displayed at 800×600px wastes bandwidth. Resize to the display size.
- Use responsive images — Use the srcset attribute to serve different sizes for different screen resolutions.
- Maintain aspect ratio — Distorted images look unprofessional. Always maintain the original aspect ratio when resizing.
- Common web image sizes — Hero images: 1920×1080px. Blog thumbnails: 800×450px. Social media: 1200×630px. Profile pictures: 400×400px.
- Retina displays — For high-DPI screens, serve images at 2× the display size (e.g., 1600px wide for a 800px container).
Core Web Vitals & Images
Google's Core Web Vitals measure user experience and directly impact search rankings. Images affect two key metrics:
- LCP (Largest Contentful Paint) — The time until the largest visible element loads. Usually an image. Target: under 2.5 seconds. Optimize your hero image first.
- CLS (Cumulative Layout Shift) — Layout shifts caused by images loading without defined dimensions. Always specify width and height attributes on img tags.
Quick wins: compress images, use WebP format, add width/height attributes, implement lazy loading with loading="lazy", and use a CDN for image delivery.
Optimize Your Images Now
Free browser-based image tools — no uploads to servers.