WordPress Image Optimization: WebP, AVIF, Lazy Loading and Sizes

Images are the heaviest thing most sites ship. The HTTP Archive Web Almanac 2025 puts the median mobile page at 2,559 KB — with 911 KB of that being images. Get images right and you often cut total page weight by a third without touching anything else.

Here’s the complete playbook, in the order that matters.

1. Serve modern formats: WebP and AVIF

JPEG and PNG are 30–70% heavier than modern formats at the same visual quality:

• WebP — universally supported, typically 25–35% smaller than JPEG.
• AVIF — smaller still (often 50%+ vs JPEG), supported by all modern browsers since 2024.

WordPress has supported WebP uploads since 5.8 and AVIF since 6.5. The clean approach: convert at upload time (or batch-convert the library once) and serve with a <picture> fallback or via content negotiation at the server/CDN level. No monthly “image optimizer” subscription required.

2. Size images to their container

The classic crime: a 2560-pixel photo rendered in a 400-pixel column. WordPress generates multiple sizes automatically — the theme has to use them:

<img src="photo-800.avif"
     srcset="photo-400.avif 400w, photo-800.avif 800w, photo-1600.avif 1600w"
     sizes="(max-width: 700px) 100vw, 33vw"
     width="800" height="500" alt="…">

With a correct srcset/sizes pair, a phone downloads the 400-px version, not the 1600-px one. That’s a 4–10× saving per image, for free.

3. Lazy-load below the fold — and only below the fold

loading="lazy" keeps offscreen images from competing with visible content for bandwidth. Two rules:

1. Lazy-load everything below the fold. WordPress adds this automatically to most images.
2. Never lazy-load the hero / LCP image. That delays the very thing Google times you on. Give it fetchpriority="high" instead. (More in our Core Web Vitals guide.)

4. Always set width and height

Images without dimensions cause layout shift: text renders, then jumps when the image arrives. That’s CLS, and it’s a direct Core Web Vitals failure. Explicit width/height attributes (or a CSS aspect-ratio) let the browser reserve the space before the file loads.

5. Compress like you mean it

Quality 80–85 is visually indistinguishable from 100 for photos and roughly half the bytes. For AVIF you can often go lower. Test your own images — the “right” setting is the lowest quality nobody notices.

Rules of thumb we use in audits:

• Hero image: under 150 KB (ideally under 100 KB).
• Content images: under 80 KB each.
• Total images on a normal page: under 700 KB.

6. Don’t ship decoration as images

Gradients, shadows, simple shapes and icons belong in CSS and inline SVG, not in PNG files. Icon fonts and sprite images from 2015-era themes are pure waste; a dozen inline SVGs cost almost nothing.

7. Mind the thumbnails WordPress generates

Every registered image size multiplies storage and complicates srcset. Themes accumulate sizes over years of plugin changes. Audit add_image_size() calls and keep only what templates actually render.

The compound effect

Each fix looks small; together they’re dramatic. A typical before/after from our audits: 1.9 MB of JPEG/PNG images with no dimensions → 520 KB of AVIF/WebP with proper srcset, lazy loading and reserved space. LCP drops by a second or more, CLS goes to ~0, and mobile data usage falls by two thirds.

Want to know your numbers? The free Site Analyzer counts your images, flags legacy formats, missing dimensions and missing lazy loading, and estimates how many kilobytes modern formats would save.