Image Optimization for the Web: Formats, Sizing, and Lazy Loading

Images are usually the heaviest thing on a web page — and the easiest big win for speed. On most sites I audit, images account for the majority of the page weight, and optimizing them is the single fastest way to improve load time and Core Web Vitals.

Here's everything that actually matters, without the fluff.

1. Choose the Right Format

The format decides how small your image can get without looking bad:

• AVIF — the smallest modern format for photos. Excellent compression, broadly supported in 2026.
• WebP — slightly larger than AVIF but universally supported. A safe default and fallback.
• SVG — for logos, icons, and simple graphics. Infinitely scalable and tiny.
• PNG — only when you need transparency and a modern format won't do.
• JPEG — the old default; avoid for new work when WebP/AVIF are available.

Rule: photos → AVIF/WebP; logos and icons → SVG.

2. Size Images Correctly

This is the most common mistake I see: uploading a 3000px-wide image and displaying it at 600px. The browser still downloads all 3000px.

• Export at the size it's actually displayed (account for high-DPI screens with roughly 2x).
• Don't rely on CSS to "shrink" a huge file — that only shrinks it visually, not in bytes.

A correctly sized, compressed image can be 90% smaller than the original with no visible quality loss.

3. Serve Responsive Images

Different devices need different sizes. A phone shouldn't download a desktop-sized banner. Use srcset so the browser picks the right one:

<img
  src="hero-800.webp"
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  width="800"
  height="500"
  alt="Descriptive text about the image"
/>

The browser downloads only the size it needs for that screen.

4. Always Set Width and Height

Notice the width and height attributes above. They let the browser reserve space before the image loads, which prevents Cumulative Layout Shift (CLS) — that annoying jump where content moves as images pop in.

If you use CSS for sizing, set an aspect-ratio so space is still reserved.

5. Lazy Load — But Not the Hero

Lazy loading defers off-screen images until the user scrolls near them, saving bandwidth and speeding up the initial load:

<img src="below-fold.webp" loading="lazy" width="600" height="400" alt="..." />

Critical exception: never lazy load your largest above-the-fold image (usually the hero). That image is your Largest Contentful Paint — lazy loading it delays the metric Google measures. Instead, load it eagerly and even preload it:

<link rel="preload" as="image" href="hero.webp" fetchpriority="high" />

6. Compress Before You Ship

Even in a modern format, compress:

• Tools like Squoosh, ImageOptim, or a build-time image pipeline handle this.
• For photos, a small amount of compression is invisible but saves large amounts of data.
• Many CMS platforms and CDNs (including Cloudflare) can convert and compress automatically — use it.

7. Don't Forget Alt Text and File Names

Optimization isn't only about bytes:

• Descriptive file names (react-developer-portfolio.webp, not IMG_2831.jpg) help image SEO.
• Alt text describes the image for screen readers and helps it rank in Google Images. Write it for a human, not for keyword stuffing.

A Quick Optimization Checklist

1. Convert photos to WebP/AVIF; use SVG for logos/icons.
2. Export at the displayed size (up to ~2x for retina).
3. Use srcset/sizes for responsive delivery.
4. Set width and height (or aspect-ratio) to prevent CLS.
5. Lazy load below-the-fold images; preload the hero.
6. Compress everything.
7. Give images descriptive file names and alt text.

Do these consistently and images stop being your biggest performance problem — and start being a quiet SEO and UX advantage.

---

Want your site's images (and everything else) tuned for speed? Reach out and I'll run a performance pass.