AWS 밋업, Frontend Group을 참여하며 ( Next.js Image 최적화 )

5월 10일에 AWS 소규모 밋업이 열렸었는데 NextJs 이미지 최적화라길래 NestJs와 착각하여 신청했습니다.

장난스러운 말이였구 Backend 업무를 담당하고 있지만 관심이 있어 참여했어요!

 

저는 각종 컨퍼런스에 많이 참여하는데, 이번 내용은 팀에게도 도움이 될 것 같아 회사 팀원분들과 함께 하였어요

 

자세한 발표 내용은, AWS 한국사용자 모임 ( Link ) Frontend Group ( 슬랙 채널 ) 을 참고해주세요!

노트북을 만지고 있는 블로그 글 작성자.

들었던 목적은 아래와 같아요

1. Next.js Image 캐싱 방법
   1. 여기에서 어떤 식으로 실행이 되는지 궁금했어요 이를 토대로, 시야를 넓혀 다양한 방법론을 채우고 싶었어요
2. 발표 자료에 있던 Sharp 라이브러리란?
3. 사이드 프로젝트나 React를 따로 하면서 Next.js를 저도 사용하기에 최적화 방법을 알고싶었어요
4. 이를 토대로 프론트팀원과의 커뮤니케이션에 도움을 얻고 싶었습니다.

고민 포인트

• 어? 듣다보니 CDN 전략과 Next.js와 이미지 최적화 둘다 해야하는건가? 라는 고민도 들었는데.. 아직 잘 모르겠습니다.
• Next.js의 리소스를 사용많이 한다면 Front Instance에도 부담이 있지 않을까? 라는 고민도 생겼어요.
• AWS S3에서 리소스를 요청시 CDN에 캐싱하고 해당 URL을 Client에 제공함으로써 캐싱된 데이터를 사용할 수 있습니다.
• 이 때도 선택지가 두가지가 있는데 모든 흐름에서 어떤 Flow가 맞을지 고민되는 지점이 많네요
  1. S3저장시 리사이즈하여 S3에 추가저장
  2. 리소스 요청시 리사이즈

무엇이든 정답이 없는 만큼, 현업에서 겪어보고 나중에 글로 풀어내보고 싶어요

next/Image 태그의 장점

• Network 탭에서 동작을 확인할 수 있습니다. 요청을 통해 build 된 파일 아래에 image 들을 확인할 수 있으며 캐싱되는 시간이 따로 있습니다. 기본 60초
• Lazy Load: 자동적으로 이미지가 화면에 나타날 때 로드함으로써 리소스를 요청, 데이터 사용량 줄이는 데 장점
• 자동 리사이징: <Image> ( Next.js )태그를 사용하면 자동으로 리사이징하여 사용자에게 적절한 크기를 제공합니다. 페이지 로딩시간을 주이는데 효과적입니다.
• 외부 저장소도 리사이징: 외부 저장소에 저장된 이미지도 리사이징 해줍니다.

이미지 최적화를 위한 추가 라이브러리 Sharp

• Next.js 는 기본적으로 이미지 최적화를 위한 Squoosh 라이브러리가 설치되어 있으며 이를 통해 최적화를 하고 있습니다.
• 공식적으로 제공(Next.js에 탑재)하지 않는 것은, 기술적인 문제가 아닌 외적인 문제라고 하네요!
• Next.js 공식문서에서 Sharp를 Production 환경에서 적극 권장하고 있습니다.
• 발표하신분의 속도 측정:
  • Img vs Next.Image
    • Html Image 태그로 용량: 1.9mb / 속도: 11.52s
    • next Image 태그로 용량: 16.9kb / 속도: 862ms
  • Squoosh vs Sharp ( 두번 요청 )
    • Squoosh: 228ms, 143ms
    • Sharp: 64ms, 79ms

이미지 포맷

이미지 포맷인 AVIF, WEBP등이 있는데, 해당 형식은 고품질의 이미지를 작은 파일크기로 제공하기에 성능 향상에 도움이 됩니다.

브라우저 요청 헤더를 통해 이미지 포맷을 확인할 수 있으며, 각 브라우저 마다 지원되는 포맷이 있습니다.

하지만 Next.js 에서는 해당 정보를 바탕으로 지원되는 이미지 포맷을 제공합니다.

즉, 브라우저가 AVIF를 지원한다면 AVIF 이미지를, 그렇지 않다면 WebP 또는 다른 포맷의 이미지를 제공합니다.