Image Optimization for Faster Load Times

Images typically account for 50-70% of a webpage's total size. Optimizing them is the single most impactful thing you can do for page speed.

Image Optimization Techniques

1. Choose the Right Format

• WebP: 25-35% smaller than JPEG at same quality. Use this for most images.
• AVIF: Even smaller than WebP, but less browser support.
• JPEG: Good for photos when WebP isn't supported.
• PNG: Only for images requiring transparency.
• SVG: Best for logos, icons, and simple graphics.

2. Compress Images

Use tools like:

• TinyPNG/TinyJPG: Easy drag-and-drop compression
• ShortPixel: WordPress plugin for automatic compression
• ImageOptim: Mac app for lossless compression
• Squoosh: Google's browser-based tool

3. Resize Appropriately

Don't upload a 4000px image if it displays at 800px. Resize to the largest display size needed.

4. Implement Lazy Loading

Load images only as users scroll to them. Add loading="lazy" to img tags (but not the LCP image).

5. Use Responsive Images

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

6. Set Dimensions

Always include width and height attributes to prevent Cumulative Layout Shift.

Image Size Targets

Platform-Specific Tips

WordPress

Use ShortPixel or Imagify plugins for automatic optimization.

Shopify

Optimize before uploading. Shopify auto-generates some sizes but doesn't compress aggressively.

Related: Website Speed Optimization Guide