Nextjs 에서는 이미지를 최적화하는 컴포넌트가 존재합니다.

이미지를 최적화하는 방법에는 CDN을 사용하여 최적화 하는 방법도 있습니다.

Cloud에 이미지를 올린다면 캐싱, 이미지 압축, 사이즈의 재설정도 되어 최적화가 간편해집니다.

Cloud에 올릴정도가 아닌 적은 양의 이미지 라면 이미지를 최적화 하여 사용해서 좋은 웹을 구성할수 있습니다.

이미지 포맷 설정

• 이미지 포맷을 WebP로 변환하여 사용하는 방법입니다. WebP는 가장 최근에 나온 규격이고 손실/비손실압축을 지원하며 로딩속도도 빠르다고 합니다. https://ezgif.com/png-to-webp/ezgif-1-e139bdca91.png 의 사이트 에서 기존의 이미지를 WebP로 변환하여 사용할수 있습니다.

이미지 사이즈 재설정

• 모바일에서 보일 100x100 사이즈를 데스크톱의 500x500 사이즈 이미지를 보여준다면 모바일 상황에선 데이터 손실이 날수 있습니다. https://responsivebreakpoints.com/ 의 사이트에서 자동으로 이미지 사이즈를 화면 크기에 따라 조정할수 있습니다.

이미지 용량 압축

• 웹사이트에서 이미지의 크기가 1MB를 넘으면 안된다고 합니다. 이미지의 로딩이 웹페이지의 로딩에 영향을 주기 때문입니다. 따라서 이미지를 압축하여 사용하면 웹성능에 좋은 영향을 줄수 있습니다. https://tinypng.com/