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.
Merge the relevant change into your existing configuration. These examples do not inspect your code or apply changes automatically. Test on a preview, then check the live response.
Give images dimensions and suitable loading priority
Use Image with truthful intrinsic dimensions (or a supported fill layout). This example suits a non-hero image and keeps the default lazy loading. For a confirmed above-the-fold LCP hero, consider loading="eager" or fetchPriority="high"; avoid promoting multiple candidates.
import Image from 'next/image';
<Image
src="/images/product.jpg"
width={1200}
height={800}
alt="Product shown on a desk"
/>Verify: Check intrinsic dimensions against the source image, then inspect layout stability. Use eager/high priority only for a confirmed hero/LCP image, not every image.
Next.js: Image Component ↗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.