회사 프로젝트를 진행중에 서버 트래픽이 너무 뛰게되어 이유를 찾게되었고 그중 가장 큰 이유가 이미지를 로딩할때 가장 크게 뛴다는걸 알게되었다.
이미지 최적화를 하다가 next/image에 sharp 라이브러리를 알게된 일을 적으려 합니다.
우선 next/image를 사용하는 이유를 간략하게 설명하겠습니다.
img 태그와 next/image의 성능차이등 상세한 내용은 이번 주제와 맞지 않기 때문에 넘어가겠습니다!
1. Next/Image 태그에서 제공하는 기능
- 장치의 크기에 맞춘 적절한 이미지 사이즈와 최신 이미지 포맷 지원
- Web Vitals의 CLS 발생을 방지
- 레이지 로드를 기본적으로 사용하고 있기 때문에, 뷰포트에 노출됐을 때 이미지 로드. 선택적으로 블러링 처리한 이미지를 먼저 노출하는 기능
- 이미지 리사이징. 외부 이미지도 리사이징 가능
조금 더 깊이 알고싶으신분은 아래 공식문서에 들어가보세요!
Next/Image 공식 문서
2. Sharp vs Squoosh
Sharp와 Squoosh는 이미지 최적화 라이브러리이며 next/image에서 둘다 사용 가능하다.
Sharp의 경우 따로 설치해서 사용가능하고, Squoosh는 설치하지 않아도 바로 사용 가능하다.
위의 사진과 같이 next/image에서는 sharp 사용을 추천하고 있다.
그럼에도 sharp를 바로 사용하지 못하는 이유는 저작권 문제 때문이라고 알고있다.
(아니라면 피드백 주세요!)
동일한 이미지 기준으로 압축된 용량도 비슷하지만 Sharp를 사용했을때 응답 속도가 6배 정도가 빠르다.
각각 장단점
- Sharp
장점: Squoosh보다 6배 빠름
단점: 설치할떄 호환성 이슈가 있을수 있음
- Squoosh
장점: 설치 하지 않아도 바로 사용가능(호환성 이슈 x)
단점: Sharp보다 6배 느림
3. 왜 Sharp가 빠른것인가?
-
성능 최적화: sharp는 이미지 처리에 특화된 라이브러리로, 이미지를 효율적으로 처리하고 압축할 수 있습니다. squoosh보다 더 최적화된 이미지 처리를 제공할 수 있어서 응답 속도가 빨라집니다.
-
이미지 압축: sharp는 이미지 압축을 효율적으로 수행할 수 있는 기능을 제공합니다. 이미지 압축은 이미지 파일의 크기를 줄이고 전송 대역폭을 절약하는 데 도움을 줍니다. 더 작은 이미지 파일은 더 빠른 다운로드 시간을 제공하므로 응답 속도가 향상됩니다.
-
이미지 형식 변환: sharp는 이미지를 다양한 형식으로 변환할 수 있습니다. 웹 페이지에서 사용되는 이미지 형식에 맞게 이미지를 변환하면 불필요한 데이터를 제거하고 응답 속도를 향상시킬 수 있습니다.
-
캐싱 및 프리렌더링: next/image와 함께 sharp를 사용하면 이미지 캐싱 및 프리렌더링과 같은 기능을 효과적으로 활용할 수 있습니다. 이로 인해 웹 페이지의 성능이 향상되고 응답 속도가 빨라집니다.
위의 글은 chat GPT한테 물은 결과입니다...
다른곳에서도 찾기가 힘들어 chat GPT의 도움을 받았습니다...ㅎ
느낀점
내장된 라이브러리 하나를 사용하는되도 이렇게 공부가 많이 필요한걸 느끼고 백엔드(서버)쪽을 생각하면서 코드를 짜야겠다는 생각이 더 들었다.
참고
https://oliveyoung.tech/blog/2023-06-09/nextjs-image-optimization/
https://nextjs.org/docs/app/building-your-application/deploying#nodejs-server
https://bsnn.tistory.com/148
