How can I preload images efficiently in Next.js?

[c-odecommander]

Summary

Hey everyone 👋,
I’m experimenting with image optimization in Next.js and noticed my LCP score isn’t great on slower networks.
Is there a recommended way to preload or lazy-load images in Next.js 14 for better performance?

I’ve tried using the component with priority, but it doesn’t always seem to help.
Any tips or examples are appreciated 🙏

Additional information

No response

Example

No response

[nianod]

You can improve image loading by using the priority prop only for above-the-fold images and enabling Next.js Image Optimization in next.config.js.

import Image from "next/image";

export default function Hero() {
  return (
    <Image
      src="/hero.png"
      alt="Hero image"
      width={1200}
      height={800}
      priority
    />
  );
}

Also, double-check that your images are served from the Next.js image loader, not statically via /public.
That usually fixes the LCP issue.