Image with src "/images/logo.png" was detected as the Largest Contentful Paint (LCP)

[ThakurSaad]

Summary

I am trying to do a project in Next.13 and Typescript. I have created a component named Logo.tsx to render an Image.

"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";

const Logo = () => {
  const router = useRouter();

  return (
    <Image
      alt="logo"
      height="100"
      width="100"
      className="
        hidden
        md:block  
        cursor-pointer
      "
      src="/images/logo.png"
    />
  );
};

export default Logo;

But I am getting this warning.

Image with src "/images/logo.png" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.

I looked into the documentation but could not understand properly. How can remove this error?

Additional information

No response

Example

No response

[icyJoseph]

What this is telling you is that you have a large image that is not being loaded optimally.

Specifically, LCP measures the time from when the user initiates loading the page until the largest image or text block is rendered within the viewport. - https://web.dev/optimize-lcp/

With images, and other resources, we can use a technique called pre-loading. As soon as the browser hits the preload link, it'll get that resource and continue processing the HTML for the page, https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload

In Next.js, the next/image component has a priority prop, which you can activate to trigger the preload of the resource, https://nextjs.org/docs/api-reference/next/image#priority:

You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.

"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";

const Logo = () => {
  const router = useRouter();

  return (
    <Image
      alt="logo"
      height="100"
      width="100"
      priority // or priority={true}
      className="
        hidden
        md:block  
        cursor-pointer
      "
      src="/images/logo.png"
    />
  );
};

export default Logo;

Do remember that this is not an error, but warning, hinting you in the right direction.

[ThakurSaad]

Thank you @icyJoseph. I have already solved it by doing so ✌️
priority={true}