next/image

Question

안녕하세요 next/image 에 대한 질문이 있습니다 next/image(총 17분) 강의 영상 02:40 example 파일의 확장자가 jpg 인데 webp 으로 사용되는 부분이 궁금합니다. webp 를 꽤 많은 브라우저에서 지원해주긴 하지만 모든 브라우저에서 지원해주지는 않을텐데, 어떤 최적화를 수행하는걸까요? 사용자 브라우저를 체크해서 img 태그의 srcset 를 사용하는 것과 같이 최적의 확장자에 대한 추가 최적화(client) 이미지 자체의 최적화(server) + 1번 제가 생각해본 최적화는 2가지 정도인데.. 알려주시면 감사하겠습니다

박용주 · Answer

안녕하세요 질문 감사합니다! webp로 용량을 줄이는 것 이외에도, Next Image는 client, server 양측에서 최적화를 진행합니다. client https://github.com/vercel/next.js/blob/canary/packages/next/src/client/image.tsx#LL219C18-L219C18 위 링크는 Next.js 소스 코드 중 client side Image 컴포넌트에 대한 부분입니다. 말씀해주신대로 srcset에 대한 로직(line 237)도 있고, 강의에서 언급한 lazy 'loading' 속성 추가(line 424), placeholder(blur) 스타일 생성 등 다양한 최적화를 수행합니다.   server https://github.com/vercel/next.js/blob/canary/packages/next/src/server/image-optimizer.ts#L401 위 링크는 Next.js 소스 코드 중 server side Image 컴포넌트에 대한 부분입니다. line 450 부근에서 Node.js의 'sharp' 라이브러리를 이용하여 'quality' 속성에 대한 최적화를 진행합니다. 이미지 자체를 최적화하는데 이것 역시 jpeg이든 png이든 상관이 없습니다. 종합적으로 질문자님께서 예상하신대로 최적화가 진행됩니다ㅎㅎ 링크의 소스 코드를 살펴보는 것도 도움이 되실 것 같습니다. 어려운 부분이 있다면 또 질문 남겨주세요! 감사합니다 :)