10 Tips to Optimize Images for Web Performance

Images typically account for 50-70% of a web page's total weight. Poorly optimized images are the number one cause of slow page loads, poor Core Web Vitals scores, and frustrated users. The good news is that image optimization is one of the highest-impact, lowest-effort improvements you can make. Here are ten proven techniques.

1. Choose the Right Format

Different image types demand different formats:

• Photographs: Use WebP (best compression) with JPEG fallback. Avoid PNG for photos — it creates unnecessarily large files.
• Graphics, logos, icons: Use SVG for vector content. For raster graphics with flat colors, use WebP or PNG.
• Animated content: Use WebP or AVIF animated images instead of GIF. They are 30-80% smaller.
• Transparency: WebP supports transparency and is much smaller than PNG. Use PNG only as a fallback.

2. Serve WebP (or AVIF) with Fallbacks

WebP reduces file sizes by 25-35% compared to JPEG at equivalent quality. AVIF pushes this even further — 50% smaller than JPEG. Use the HTML picture element to serve modern formats with fallbacks:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description" width="800" height="600">
</picture>

3. Resize Images to Display Dimensions

Never serve a 4000x3000 image when it will be displayed at 800x600. This wastes bandwidth and forces the browser to downscale, which uses memory and CPU. Resize images to the largest size they will actually be displayed at, accounting for 2x retina screens.

For a container that is 400px wide on standard screens:

• Serve 400px wide for 1x displays
• Serve 800px wide for 2x displays
• Use srcset to let the browser choose

4. Use Responsive Images with srcset

The srcset attribute tells the browser about available image sizes so it can download the most appropriate one:

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

Mobile users on a 360px-wide screen will download the 400px image instead of the full 1200px version, saving up to 70% bandwidth.

5. Lazy Load Below-the-Fold Images

Images that are not visible when the page first loads should not block the initial render. Use native lazy loading:

<img src="photo.jpg" loading="lazy" alt="Description" width="800" height="600">

Important exceptions: do not lazy load the LCP (Largest Contentful Paint) image — typically the hero image or first visible image. Lazy loading the LCP image will hurt your Core Web Vitals score.

6. Set Explicit Width and Height

Always include width and height attributes on image tags. This allows the browser to reserve the correct space before the image loads, preventing layout shifts (CLS — Cumulative Layout Shift).

For responsive images, use CSS aspect-ratio or width: 100%; height: auto; to maintain the ratio while filling the container.

7. Compress Aggressively (But Wisely)

Most images can be compressed significantly without visible quality loss:

• JPEG: Quality 75-85 is usually indistinguishable from quality 100 for web use.
• WebP: Quality 75-80 produces excellent results.
• PNG: Use tools like pngquant to apply lossy compression to PNGs, reducing them by 60-80%.

Use PureConverter to batch-compress images with fine-grained quality control.

8. Use a CDN with Image Optimization

A Content Delivery Network serves images from servers geographically close to your users, reducing latency. Many modern CDNs (Cloudflare, Fastly, AWS CloudFront) also offer on-the-fly image optimization — automatically serving WebP/AVIF, resizing, and compressing based on the requesting device.

9. Implement Blur-Up or LQIP Placeholders

Instead of showing a blank space or a jarring image pop-in, use a Low Quality Image Placeholder (LQIP):

• Generate a tiny (20px wide), heavily blurred version of each image.
• Inline it as a base64 data URI or CSS background.
• When the full image loads, crossfade from the placeholder.

This technique improves perceived performance even if actual load time stays the same.

10. Audit Regularly with Lighthouse

Google Lighthouse identifies image optimization opportunities automatically. Run it regularly and look for:

• "Serve images in next-gen formats" — switch to WebP/AVIF.
• "Properly size images" — resize to display dimensions.
• "Efficiently encode images" — increase compression.
• "Defer offscreen images" — add lazy loading.

Track your Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and Total Blocking Time (TBT) over time to ensure image changes are moving the needle in the right direction.

Bonus: Automate Your Pipeline

The best optimization is the one you do not have to think about. Set up an automated image pipeline that:

1. Accepts original images in any format.
2. Generates WebP, AVIF, and JPEG variants at multiple sizes.
3. Compresses each variant with optimal settings.
4. Generates responsive HTML markup automatically.

Tools like sharp (Node.js), Pillow (Python), or libvips can be integrated into your build process to handle this automatically.

Conclusion

Image optimization is not a one-time task but an ongoing practice. Start with the highest-impact changes — right format, right size, lazy loading — and build automation to maintain quality as your content grows. Your users (and your hosting bill) will thank you.