next/image에서 CSS와 width/height가 충돌할 때 벌어지는 일

문제 상황

Pixabay 클론 프로젝트(React)에서 Masonry 레이아웃을 사용해 썸네일 이미지를 배치했다.
그때는 단순히 아래처럼 작성했지만 문제가 없었다:

<img src={thumbnail} alt="썸네일" className="w-full" />

하지만 프로젝트를 Next.js로 마이그레이션한 이후 ESLint가 아래 경고를 띄운다

Warning: Using <img> could result in slower LCP and higher bandwidth.
Consider using <Image /> from next/image.

그래서 권장대로 <Image />로 교체했다.

그런데 문제가 생겼다

이전과 비슷하게 w-full만 적용했는데, 이미지가 화면에 나타나지 않았다.

처음에는 "뭐지? 버그인가?" 싶었지만, 곧 next/image는 일반 <img>와 다르게 작동한다는 걸 떠올렸다.

그래서 시도해본 코드

<Image
  src={thumbnail}
  alt="썸네일"
  width={400}
  height={300}
  className="w-full h-auto"
/>

의문 발생

• height={300}을 줬는데, h-auto를 쓰면 이 값은 무시되는 걸까?

실험 결과

브라우저 vs Next.js의 역할 분담

항목	역할
width, height	Next.js가 SSR 시점에 사용하는 정보 → placeholder 크기 계산, LCP 최적화
w-full, h-auto	브라우저가 렌더링 시점에 CSS로 적용 → 화면에 표시되는 최종 크기 결정

• 결론: height={300}은 브라우저에서 무시되고, h-auto가 최종 높이를 자동 계산한다.

실제 렌더링 흐름

설정	실제 동작
width={400} height={300}	SSR에서 4:3 placeholder 공간 확보
w-full	부모 요소 너비에 맞게 자동 확장
h-auto	너비에 맞춰 비율 유지하며 자동 높이 계산
최종 높이 계산식	(부모 너비 / 400) * 300

최종 결론

<Image
  src={thumbnail}
  alt="썸네일"
  width={400}
  height={300}
  className="w-full h-auto object-cover"
/>

• 이미지 최적화(next/image) 기능 활용 가능
• 반응형 레이아웃에서도 유연하게 잘 작동
• Masonry 구조에서도 자연스럽게 높이 정렬
• ESLint 경고 없음 + LCP 성능 향상 기대