https://nextjs.org/docs/pages/api-reference/components/image
- image태그 관련 공식문서
next / image 은 일반적인 img 태그와 다르게 이미지 최적화 , 레이지로딩 기능을 지원한다
또한 이미지 로딩전에 해당 크기만큼 placeholder를 지정해두기때문에 이미지 로드 후 layout shift가 발생하지 않음 (그래서 width와 height를 미리 태그에 지정해야함)
레이지로딩(Lazy Loading) - 현재 보이는 페이지에 필요한 이미지만 로딩해주는 기능
이미지 최적화 - 각 디바이스와 브라우저에 최적화된 이미지를 생성
next에서는 img 태그를 사용하면 다음과 같은 권유? 메시지를 보내준다
다음 이미지와 같이 src , width, height, alt 속성은 필수로 입력해야함 (fill을 입력하면 너비,높이 입력안해도됨)
-> fill을 입력하면 sizes를 입력하길 권유하는 메시지가 뜸
참고 - https://nextjs.org/docs/pages/api-reference/components/image#sizes
The value of sizes will greatly affect performance for images using fill or which are styled to have a responsive size.
성능적인 측면에서 사용하길 권고하는듯
오늘은 프로젝트 진행하다가 Image 태그 관련 콘솔 에러가 2개가 발생해서 에러 지우는김에 image태그를 공부함..😂
관련 에러 2개
Image with src
"https://cdn.sanity.io/images/9bomit6x/production/a56759cb04dbef6fbee0290c9199dde97c50be66-1000x1498.jpg?w=800" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.
image태그에 css로 크기를 지정해줘서 생긴 에러라 생각 . 해당 css를 삭제해서 해결
Image with src "https://cdn.sanity.io/images/9bomit6x/production/d9c7ee93a54d548f138d4cfb03a5ccb45ccd0343-1000x750.jpg?w=800" was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.
Read more: https://nextjs.org/docs/api-reference/next/image#priority
아마 해당 이미지가 뷰포트에서 가장 큰 콘텐츠 엘리먼트라 판단해서 priority 속성을 사용하길 권유라 생각.
image태그에 priority 를 입력해서 해결
priority 속성을 사용하면 레이지 로딩되지않고 이미지가 우선순위가 높은것으로 간주하여 미리 로딩됨.
참고 - https://nextjs.org/docs/pages/api-reference/components/image#priority
