Optimize images without losing the details
Find images that cost more bytes than their displayed size needs, then resize, compress, and serve candidates for different screens.
For your setup.
Choose your platform. A report may suggest one from source or delivery hints; confirm it matches the website you control.
The general steps below work across platforms. Choose a setup above for supported code examples.
Why this matters
Images can compete with text, scripts, and other resources for network capacity. An oversized or late-discovered hero image can delay the main content; loading every image eagerly can waste data below the fold.
Start with the image users see first
Use the browser performance panel or Lighthouse to identify the LCP element. Check its intrinsic dimensions, transfer size, format, and when its request begins. Do not assume the largest file is the LCP element.
Offer appropriate image sizes
Create a few versions from the original, then let the browser choose by viewport and pixel density. Keep a fallback source and check each candidate visually.
<img
src="/images/product-800.webp"
srcset="/images/product-400.webp 400w, /images/product-800.webp 800w, /images/product-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 50vw"
width="1200" height="900"
alt="A red ceramic mug on a wooden table">Compress for the image’s job
Try a modern format supported by your delivery path, and compare quality at actual display size. Keep vector artwork as SVG when appropriate. Do not convert every image to one format without checking transparency, detail, compatibility, and visual quality.
Load only what is needed now
Keep an immediately visible hero image eager to load; consider native lazy loading for genuinely below-the-fold images. Set width and height (or a stable aspect ratio) so the layout reserves space before the image arrives.
For your setup
WordPress
Use generated image sizes and responsive `srcset` where your theme or image pipeline supports them. Check the rendered page: themes, plugins, and lazy-load settings can change the final markup.
Next.js
The Next.js Image component can generate responsive variants when its loader and deployment support image optimization. Supply accurate dimensions or a supported fill layout, and avoid lazy-loading the likely LCP image.
Check your work
- Inspect the selected image and request priority on mobile and desktop widths.
- Confirm alt text reflects the image’s purpose and decorative images use empty alt.
- Compare transfer bytes and visual quality, then rerun the same page test.
- Check layout shift and confirm below-the-fold images still appear when scrolled into view.