Chat gpt가 알려주는 이미지 최적화 | Next.js Image 태그를 쓴다고 이미지가 최적화되는 것은 아니다

이미지 최적화에 대해 고민하게 된 계기

유저의 프로필 이미지를 사용하는 부분에서 아래의 에러가 떴다. 그래서 Chat gpt와 티키타카를 하며 "왜 Next의 Image를 사용했는데도 이미지 최적화가 자동으로 되지 않았나" 알아보았다.

 

"warn-once.js:16 Image with src "https://AWSURL....프로그래머스.png" 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."

 

아래의 Avatar는 Mui에서 가져온 것이다. 

 

그렇다면 Next 공식문서에서는 Image에 대해 어떻게 이야기하고 있을까?

이미지는 일반적인 웹사이트 페이지 무게의 큰 부분을 차지한다. 웹사이트의 LCP 성능에 상당한 영향을 미칠 수 있다.
Next.js 이미지 구성 요소는 <img>자동 이미지 최적화 기능으로 HTML 요소를 확장한다.

• Size Optimization: WebP 및 AVIF와 같은 최신 이미지 형식을 사용하여 각 장치에 올바른 크기의 이미지를 자동으로 제공
• Visual Stability: 이미지가 로드될 때 레이아웃이 자동으로 전환되는 것을 방지
• Faster Page Loads: 이미지는 선택적 흐림 자리 표시자와 함께 기본 브라우저 지연 로딩을 사용하여 뷰포트에 들어갈 때만 로드
• Asset Flexibility: 원격 서버에 저장된 이미지의 경우에도 설정된 이미지로 크기 조정

 

LCP (Largest Contenful Paint)란? 

인지된 로드 속도를 측정하는 안정적인 Core Web Vitals 측정항목이다. LCP가 빠르면 사용자에게 페이지가 편리하다는 느낌을 줄 수 있다. 즉, UX가 좋아지는 것이다. 이전에는 웹 개발자가 웹페이지의 주요 콘텐츠가 얼마나 빨리 로드되고 사용자에게 표시되는지 측정하는 것이 어려웠으나 현재는 Ligthhouse 같은 툴로 Web Vitals을 측정할 수 있게 되었다.

 

LCP는 사용자가 처음 페이지로 이동한 시점을 기준으로 표시 영역에 표시되는 가장 큰 이미지 또는 텍스트 블록의 렌더링 시간을 보고한다고 한다. 좋은 LCP는 2.5초 이하라고한다. 

 

그렇다면 내 블로그 프젝의 Web Vital은?

 

이미 배포가 완료된 url로 측정을 해보았다. 해당 페이지는 블로그 글의 목록을 보여주는 페이지이다. 역시나 사진이 많아서 LCP를 우려했는데 위의 LCP사진에 빗대면 POOR한 상태로 퍼포먼스가 측정되었다.. LCP를 반으로 줄여보는 여정은 다음 글에..

 

 

 

 

[참고하기 좋은 글] https://almanac.httparchive.org/en/2022/performance#lcp-image-optimization

Performance | 2022 | The Web Almanac by HTTP Archive