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.

Keyword intent

Searches like optimasi gambar pagespeed, compress image webp wordpress, and cara kecilkan ukuran gambar website map to this workflow. Treat images as a delivery requirement—not a post-launch polish task.