How to Optimize Images for Web Performance

Why Image Optimization Matters for SEO

Google uses Largest Contentful Paint (LCP) — usually an above-the-fold image — as a Core Web Vital. A slow LCP directly hurts your search ranking. Studies consistently show that every 100ms of page load delay reduces conversions by ~1%. Images are often the easiest and biggest win.

Step 1: Choose the Right Format

WebP — Your Default Choice

WebP delivers 25–35% smaller file sizes than JPEG or PNG at equivalent quality, with support in all modern browsers (96%+ global coverage as of 2026). Use it for nearly everything.

AVIF — The Future

AVIF offers another 20–30% reduction over WebP. Browser support is now at ~92%. If your audience is modern, AVIF is worth testing.

PNG — Only When You Need Lossless

Use PNG for images that require pixel-perfect lossless quality — logos with sharp edges, screenshots with text, icons. Never use PNG for photographs.

SVG — For Vector Graphics

Icons, logos, and illustrations that can be described mathematically should always be SVG. They scale infinitely, can be styled with CSS, and are typically tiny. Always run SVGs through an optimizer — raw SVG from Figma or Illustrator contains enormous amounts of unnecessary markup.

Step 2: Compress Aggressively

The sweet spot for JPEG/WebP quality is 75–85%. Going lower produces visible artifacts; going higher produces diminishing returns with larger file sizes. For most photography, 80% quality looks identical to 100% at a fraction of the size.

You can compress images directly in your browser — no uploads, total privacy — using StudioLimb's Image Compressor.

Step 3: Resize to Display Dimensions

Never serve a 4000×3000px image in a 400px wide column. The browser has to download and decode every single pixel even if it only displays a quarter of them. Rule of thumb: serve images at 2× the CSS pixel dimensions (for HiDPI/Retina screens).

<img
  src="hero.webp"
  width="800"
  height="450"
  alt="Dashboard screenshot"
  loading="lazy"
  decoding="async"
/>

Step 4: Use Lazy Loading

Add loading="lazy" to any image below the fold. This is a native browser attribute — no JavaScript required. The browser won't fetch the image until the user scrolls near it, saving bandwidth for users who never scroll that far.

Exception: Never lazy-load your hero image or any image that appears in the initial viewport. That will hurt LCP.

Step 5: Always Add Explicit Width and Height

Setting width and height attributes on <img> tags prevents Cumulative Layout Shift (CLS) — another Core Web Vital. The browser reserves the correct space before the image loads, so the page doesn't jump around.

Step 6: Use the <picture> Element for Art Direction

Serve AVIF with WebP fallback, and different crops for mobile vs desktop:

<picture>
  <source srcset="hero-mobile.avif" media="(max-width: 640px)" type="image/avif">
  <source srcset="hero-mobile.webp" media="(max-width: 640px)" type="image/webp">
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="Hero image" width="1200" height="630">
</picture>

Step 7: Optimize SVGs

Raw SVG exported from design tools contains enormous amounts of unnecessary markup — editor metadata, redundant attributes, unnecessary precision. Run every SVG through StudioLimb's SVG Optimizer before deploying. Savings of 40–70% are common.

Quick Checklist

• Convert all photographs to WebP (or AVIF)
• Compress to 75–85% quality
• Resize to 2× display dimensions
• Add loading="lazy" to below-fold images
• Add explicit width and height attributes
• Never lazy-load hero images
• Use SVG for icons and logos — run through an optimizer
• Use <picture> for AVIF/WebP with fallbacks