How to Optimize Images for the Web

Complete guide to web image optimization: formats compared, compression techniques, and performance tips.

Why Image Optimization Matters

Images account for over 50% of web page weight on average. Unoptimized images slow down your site, hurt SEO rankings, and increase bounce rates. Google Core Web Vitals penalizes slow-loading images heavily.

Image Format Comparison

  • JPEG/JPG: Best for photographs. Lossy compression. ~75% smaller than PNG for photos.
  • PNG: Best for logos, icons, screenshots, transparency. Lossless. Larger for photos.
  • WebP: Modern format, 25-35% smaller than JPEG and PNG. Supported by 96% of browsers.
  • AVIF: Newest format, 50% smaller than JPEG. Supported by 92% of browsers.
  • SVG: Vector format for logos and icons. Infinite scalability, tiny file size.

Compression Techniques

  • Lossy: Removes data permanently. JPEG quality 75-85 is visually identical to 100 but 60% smaller.
  • Lossless: Reduces size without quality loss. Use for PNG.
  • Resize before uploading: A 4000px image displayed at 800px is 25x larger than needed.
  • Strip metadata: EXIF data adds 10-50KB. Strip it for web.

Responsive Image Strategy

<img src="photo-800w.webp"
     srcset="photo-400w.webp 400w,
             photo-800w.webp 800w,
             photo-1200w.webp 1200w"
     sizes="(max-width: 600px) 400px,
            1200px"
     alt="Description"
     loading="lazy">

This serves the smallest appropriate image to each device.

Performance Checklist

  • Serve WebP or AVIF with JPEG/PNG fallback
  • Use loading="lazy" for below-the-fold images
  • Always specify width and height attributes to prevent CLS
  • Compress images to under 200KB when possible
  • Use a CDN for image delivery

Use our Image Editor to resize and convert images.

Advanced Image Optimization Strategies

Beyond basic compression, several advanced techniques can further reduce image file sizes. Responsive images using the srcset attribute serve different image sizes based on the device screen, ensuring mobile users do not download desktop-sized images. Lazy loading defers image loading until the user scrolls near them, reducing initial page weight. Modern formats like AVIF and WebP offer 30 to 50% better compression than JPEG and PNG while maintaining visual quality, and are now supported by all major browsers.

Content Delivery Networks (CDNs) can automatically optimize images on the fly, serving WebP or AVIF to browsers that support them and falling back to JPEG or PNG for older browsers. CDNs also cache images at edge locations worldwide, reducing latency for international visitors. If you use a CMS like WordPress, plugins such as Smush or ShortPixel can automate compression, resizing, and format conversion for every uploaded image. For static sites, build tools like Sharp (Node.js) or Pillow (Python) can batch-process images during deployment.

Frequently Asked Questions

What is the best image format for web?
WebP is the best choice: 25-35% smaller than JPEG and PNG, supported by 96% of browsers. Use AVIF for even better compression with a fallback.
How much can I compress images without quality loss?
JPEG at quality 80 is visually identical to quality 100 for most photos. PNG can be losslessly compressed 5-20%.
Should I use loading="lazy" on all images?
No. Only for below-the-fold images. The LCP image should load eagerly to avoid hurting Largest Contentful Paint.
What image size should I upload?
Serve images at the maximum display size times 2 for retina displays. For a 800px display area, upload 1600px.
How do I prevent layout shift from images?
Always include width and height attributes on img tags. This prevents Cumulative Layout Shift.
Should I use WebP or AVIF?
Both are excellent modern formats. WebP has broader browser support and is well-established. AVIF offers slightly better compression ratios but is newer and has some compatibility gaps. For maximum compatibility, serve WebP with JPEG fallback, or use a CDN that handles format negotiation automatically.
What image dimensions should I use for the web?
For full-width hero images, 1920x1080 pixels is common. For content images, match the display size at 1x or 2x pixel density. Never upload images larger than necessary — a 4000-pixel-wide photo displayed at 800 pixels wastes bandwidth and slows page load.
How do I measure image optimization impact?
Use Google PageSpeed Insights, Lighthouse, or WebPageTest to measure page weight and load times before and after optimization. Core Web Vitals metrics like Largest Contentful Paint (LCP) are directly affected by image size and will improve with proper optimization.