[260326] TIL

Today I Learned (2026-03-26)

Next.js Image fill 사용 시 sizes 지정

• fill로 이미지를 배치할 때는 sizes를 함께 넣어야 브라우저가 상황에 맞는 이미지 크기를 선택할 수 있다.
• sizes를 지정하지 않으면 불필요하게 큰 이미지를 받을 수 있어 성능에 불리하다.

<Image
  src={imageSrc}
  alt={title}
  fill
  sizes="(min-width: 1000px) 50vw, 100vw"
  className="object-cover"
/>