Image optimization is more than smaller files

Modern formats, responsive markup, and LCP-aware loading decide whether a WordPress page feels fast on mobile.

Compressing a PNG to a blurry mess is not a win. Optimize for the image’s job: photo, logo, icon, text graphic, or product shot – then verify quality on a real phone.

Verified: July 2026 – LCP and media practices align with current Core Web Vitals guidance on web.dev.

WebP and AVIF (with fallbacks)

Use WebP widely; add AVIF when your server/CDN can generate it and you still ship a fallback.

WebP – broad support; easy default for photos and many graphics. Enable uploads: Enable WebP uploads.
AVIF – often smaller at similar quality, but encoding is heavier and depends on host/CDN tooling. Keep JPEG/WebP fallbacks for older clients and email clients if you reuse assets.
WordPress core can serve modern formats via output pipelines/plugins, but generation quality and CPU cost vary by environment – test on staging.

Responsive images and LCP rules

Give browsers the right candidate, reserve space, and never lazy-load the hero that is your LCP element.

srcset + sizes – let the browser pick a width for the viewport.
width and height (or CSS aspect-ratio) – prevent CLS.
Lazy loading – great below the fold; harmful on the primary above-the-fold image. Snippet context: Lazy loading images.
fetchpriority="high" – on the likely LCP image only.
Preload that same LCP image when discovery is late – see page speed basics: Page speed basics.

Optimize by media type

One quality slider does not fit logos, photos, and product zooms.

Photos – WebP/AVIF, sensible max width (often 1600-2400px for full-bleed), moderate compression.
Logos – SVG when the stack is safe; otherwise PNG/WebP with transparency and crisp edges.
Icons – SVG sprite or small PNG; avoid shipping icon sets as huge PNGs.
Text-in-image / infographics – higher quality or SVG; compression artifacts kill readability.
Product images – consistent aspect ratios, zoom-ready masters stored once, derivatives for listings; do not upscale.

CDN, cache, metadata, alt text, mobile QA

Delivery and accessibility finish the job that compression starts.

CDN – cache image derivatives at the edge: Connect external CDN.
Cache headers – long TTL for fingerprinted/derivative URLs.
Strip heavy EXIF when privacy/size matter; keep color profile when skin tones matter for products.
Alt text – describe the image’s purpose; empty alt for pure decoration.
Mobile quality test – check hero sharpness on a mid-tier phone over 4G, not only desktop Retina.

Implementation checklist

Resize before upload; do not rely on the browser to download 5000px masters.
Prefer WebP; trial AVIF with fallbacks on staging.
Mark LCP image: no lazy, fetchpriority high, correct dimensions.
Lazy-load below-the-fold media only.
Verify CLS and LCP in field data after deploy.

Related on WP-Dude

Short Guide to Image Optimization for WordPress