Next JS Image Issue

[grim hearth]

So What I'm facing an issue is I'm loading banner images by using JSON so basically there is dynamic pages So the issue is, It shows white screen with text on banner then after 1 or 2 sec image loads with proper banner with text , But the Image size is 500kb. Please give me the solution what should I do. @knotty hearth @ruby meadow

[bleak sapphire]

Please add more information to your question

Your question currently does not have sufficient information for people to be able to help. Please add more information to help us help you, for example: relevant code snippets, a reproduction repository, and/or more detailed error messages. See more info on how to ask a good question in https://discord.com/channels/752553802359505017/1138338531983491154 and #welcome message

Requested by Anay

[knotty hearth]

Can you add some code?

[grim hearth]

<div className="text-white relative">
<div className="block lg:h-[80vh] 2xl:h-[87vh] w-full">
<CustomImage width={1280} height={640} sizes="100vw" priority={true} alt="EduOptions Abroad Team" src="/images/aboutUs/about-banner.png" />
</div>
<div className="absolute bottom-6 left-5 right-5 lg:left-20 lg:bottom-20 lg:right-0 2xl:left-36 lg:max-w-[680px] 2xl:max-w-[842px] animate-banneranimate opacity-100 delay-100">
<h1 className="text-[32px] font-bold leading-[42.24px] mb-4 font-montserratBold lg:text-5xl lg:leading-[68.64px] lg:mb-6">
Giving wings to your{" "}
<span className="text-secondary1">study abroad dreams</span> since a
decade 123
</h1>
<p className="text-base lg:text-xl ">
{data.banner.content}
</p>
</div>
</div>

import Image from "next/image";
import React from "react";

export default function CustomImage({ width, height, src, alt, priority, sizes }) {
return (
<>
<Image
width={width}
height={height}
src={src}
alt={alt}
priority={priority}
sizes={sizes}
className='w-full h-full object-cover'
/>
</>
)
}
@knotty hearth

[knotty hearth]

share a preview

and also, I recommend using codeblocks like this

export default

[grim hearth]

@knotty hearth check the prview

first loads it comes white screen then after 1 or 2 sec it shows banner image

[knotty hearth]

It could be due to size of image maybe?

[grim hearth]

size of the image 646kb @knotty hearth

[knotty hearth]

can you share a screen recording of this issue with inspect tab open?