Image Optimization for PageSpeed: WebP, Sizes, and Lazy Loading

On Indonesian mobile networks, unoptimized images are still the most common reason a “nice looking” site fails PageSpeed. Themes, Elementor sections, and phone-camera uploads routinely ship 2–5 MB photos into the LCP path.

This guide is the image playbook I apply before chasing plugin settings.

What actually moves the score

Google’s mobile lab cares about:

1. LCP — often the hero image or a large above-the-fold photo;
2. transfer size — fewer bytes over 4G;
3. decode/paint cost — oversized dimensions still hurt even after compression.

Fixing images often lifts Performance more than swapping a caching plugin.

Step 1: Export the right dimensions

Do not upload a 4000px photo for a 720px mobile slot.

Rules of thumb:

• hero desktop: ~1600–1920px wide;
• card/thumbnail: 600–800px wide;
• logo/icon: as small as the layout needs (often under 200px).

Serve 2x only when the design truly needs retina detail—and prefer modern formats over raw JPEG bloat.

Step 2: Prefer WebP (and AVIF when supported)

WebP is the practical default for most client sites in 2026. AVIF can be smaller, but support and encoding pipelines vary by host/CDN.

Conversion options:

• build step (sharp, Squoosh CLI, ImageMagick);
• CDN transforms (Cloudflare Images / Polish—test carefully);
• WordPress: ShortPixel, Imagify, or a host-level optimizer.

Keep a JPEG/PNG fallback only if an old browser segment still matters for that client.

Step 3: Compression without looking “broken”

Aim for:

• photography: quality ~75–85 (WebP);
• UI screenshots: higher quality or PNG/WebP lossless for sharp text;
• avoid double-compressing already processed assets.

If designers complain about muddy gradients, raise quality slightly—do not revert to 3MB originals.

Step 4: Responsive srcset and sizes

A single huge src forces phones to download desktop assets.

<img
  src="/images/hero-800.webp"
  srcset="/images/hero-800.webp 800w, /images/hero-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 800px"
  width="1600"
  height="900"
  alt="Showroom aluminium frames"
/>

Always include width and height (or CSS aspect-ratio) to protect CLS.

Step 5: Lazy load everything except the LCP image

• below-the-fold images: loading="lazy";
• LCP/hero: fetchpriority="high" and eager load;
• do not lazy-load the first screen hero—that delays LCP.

WordPress core lazy-loading helps, but page builders sometimes inject eager images everywhere. Audit the homepage HTML.

Step 6: WordPress-specific traps

• Elementor background images often skip srcset;
• sliders load multiple full-size slides on first paint;
• media library originals remain linked from old posts—re-generate thumbnails after changing image sizes;
• disable “retina” plugins that double asset weight without measuring benefit.

Quick audit checklist

1. Open DevTools → Network → Img; sort by size.
2. Note any file over ~200–300 KB above the fold.
3. Confirm format is WebP/AVIF where possible.
4. Re-test PageSpeed mobile and watch LCP element name.