- size O
- lazyLoading: O (자동 지원)
- placeholder O
전시회 카드
- next/Image를 적용하지 않은 경우, 매우 큰 용량의 이미지가 다운로드 됨
- 데스크톱과 모바일 환경에서 rendered-size는 동일함 (사이트 정책)
- width/height: rendered size를 명시한다. Next.js가 자동으로 이미지의 용량을 조절해서 불러온다. 불러오는 용량의 사이즈가 확실하게 줄어들었고, 이에 따라 로딩 속도가 개선된 것으로 추정됨
- Webp로 포맷이 전환되는 경우도 있고, 그렇지 않은 경우도 있음
- 다만, 이미지의 용량이 줄어들지 않는 경우도 존재 '실감서재': 고화질 이미지 왜 그럴까?
- responsive 확인