Next.js Image Optimization Checklist: Formats, Sizes, and LCP

Images decide your Largest Contentful Paint more than any other asset. Next.js ships powerful image tooling, but it cannot rescue oversized masters or wrong formats. Run this checklist and hero images stop dragging scores down.

What Does Image Optimization Mean in Next.js?

Optimization means delivering the smallest sharp file for each screen:

Modern formats: AVIF and WebP instead of heavy JPG and PNG defaults
Responsive sizes: correct widths per viewport, not one giant master everywhere
Smart loading: priority for the hero, lazy loading for everything below the fold
Stable layout: explicit dimensions so pages do not shift during load

Prepare source files before they reach the framework with the image resizer and the image compressor.

Why LCP Depends on Images

LCP measures when the largest visible element becomes ready. On most marketing and ecommerce pages, that element is a hero image. Every extra megabyte, wrong format, or late request pushes LCP later, which hurts rankings and conversions, especially on mobile networks.

A privacy-focused and performant asset pipeline keeps quality high while protecting speed, and no data leaves your device during file preparation.

The 2026 Checklist

1. Start with clean source files

Resize masters to realistic maximums: 1920-2560 px wide for full-bleed heroes, 1200-1600 px for content images
Convert photos to modern formats: JPG to AVIF, JPG to WebP, PNG to WebP
Keep PNG only for transparency and sharp UI graphics
Compress sources to sane budgets before upload: heroes under 500 KB where possible, content images 120-350 KB

2. Configure formats correctly

Enable modern formats in Next.js config so supported visitors get AVIF first with WebP fallback:

Prefer AVIF output for photographic heroes
Keep WebP as the broad default
Retain JPG or PNG originals as ultimate fallbacks

3. Size images with intent

Use responsive sizes values that match your actual CSS layout, not copy-pasted defaults
Serve 640, 1024, 1600, and 2560 px variants for full-bleed art
Avoid shipping 3000 px originals to 400 px cards
Set explicit width and height or aspect ratios to prevent layout shift

4. Prioritize the LCP image

Mark exactly one hero image as priority so it preloads early
Never lazy-load the LCP image
Lazy-load everything below the fold
Preload the hero's exact responsive variant when frameworks allow
Keep hero discovery early in document order

5. Stabilize layout and fonts

Reserve space for every image to protect Cumulative Layout Shift
Avoid late-injected heroes behind tabs or carousels when possible
Pair image fixes with font display strategies since slow fonts also delay LCP rendering

6. Audit third-party and OG images

Compress Open Graph art to 1200 x 630 under 300 KB. See the favicon and OG image guide.
Lazy-load chat, review, and ad widgets that inject heavy images
Strip internal metadata from public assets with the JPG metadata remover and confirm with view metadata
Brand downloadable assets with photo watermark variants, not hero images

How to Debug a Slow LCP Image

Identify the LCP element in field and lab data
Check the delivered size: is a 400 px card loading a 2400 px file
Check the format: is a photo shipping as PNG instead of AVIF or WebP
Check priority: is the hero lazy-loaded or discovered late
Check the network: is the image queued behind render-blocking scripts
Fix sources first in the image resizer and image compressor, then tune code

Background reading: optimize images for page speed, best image formats for websites.

Best Practices

Budget images per template: homepage hero under 500 KB, listing cards under 150 KB each
Automate checks so new uploads cannot exceed dimension and weight limits
Keep high-quality masters in version control or asset storage, ship derivatives
Test on throttled mobile networks, not only office broadband
Re-audit after redesigns since layout changes alter which image is LCP
Document winning sizes values per component for the whole team

Platform-Specific Notes

Blogs and docs

Feature images at 1200-1600 px in WebP or AVIF cover most themes. See best image formats for blogs.

Ecommerce

Category grids need strict per-card budgets or LCP and scrolling both suffer. See how to optimize images for ecommerce.

Match hero crops to ad placements from the social image sizes cheat sheet so paid traffic lands on consistent art.

Common Mistakes to Avoid

Marking five images as priority and prioritizing none
Lazy-loading the hero to save bytes, delaying LCP instead
Using PNG for photographic heroes
Skipping sizes so phones download desktop-weight files
Optimizing code while ignoring 4 MB source uploads

Conclusion

Fast Next.js images come from both sides: clean modern sources plus correct loading hints. Resize and convert masters, compress to budget, prioritize exactly one hero, and lazy-load the rest. LCP improvements usually follow within one deploy.

Start with your heaviest template: prepare sources in the image resizer and image compressor, then apply priority and sizes correctly.

Next.js Image Optimization Checklist: Formats, Sizes, and LCP