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.

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.