import Image from "next/image";

<div className="relative basis-3/5">
  <Image
    className="object-cover"
    src={대충 url}
    alt={대충 username}
    priority
    fill
    sizes="650px"
    />
</div>

fill

• 사진의 너비와 높이를 잘 모를 때 부모 요소 중 relative, absolute, fixed를 찾아(absolute와 비슷) 사진 크기를 맞추는 속성
• object-contain(object-fit: contain)을 추가해주면 사진 비율 깨짐 없이 채울 수 있고, object-cover(object-fit: cover)를 추가하면 비율이 깨지면서 꽉 채운다. 공식 사이트에서는 둘 중 하나를 넣는 걸 추천한다.

priority

• 사진들은 대체로 lazy loading이 일어난다.
• 하지만 첫 화면에서 바로 보여줘야할 사진들은 priority 속성을 부여해 미리 로드될 수 있도록 한다.
• 모든 사진에 priority를 넣으면 처음 로딩이 오래 걸리니 주의

참고 사이트

• https://nextjs.org/docs/app/api-reference/components/image
• https://dev.to/codewithshan/nextjs-tip-high-priority-image-preloading-for-improved-performance-i7l