next의 Image 컴포넌트 방법 말고 이미지 로드 속도를 높일 순 없을까?

 

 

next/image 컴포넌트를 사용하고 있음에도 불구하고 이미지가 많다보니 이미지 로드 속도가 다른 홈페이지에 비해 속도가 느릴 수 밖에 없었다. 

 

next/image 컴포넌트를 사용하는 것 외 WebP 또는 AVIF에도 어떻게 하면 사진 로드 속도를 올릴 수 있을까 구글링을 해보니

 WebP 또는 AVIF의 이미지 형식을 사용하면 된다고 했다(WebP , AVIF 는 이미지 형식임)

=> WebP , AVIF 가 JPEG 또는 PNG에 비해 압축률이 더 좋기 때문

 

 AVIF는 JPEG보다 평균 50% 더 압축된다고 한다 

 

이 사실만으로 당연히 이미지 로드 속도를 향상시킬 수 있겠지

개선할 수 있는 방법은 알고 났는데, 바로 떠오른 생각

 

'난 이미지를 서버에서 받아오는데, 내가 서버를 관리하지 않고 파베에서 제공해주는 이미지 url 링크를 사용하는데 어캄요'

 

 

찾아보니 firebase에서 따로 설정해줄 수 잇는 cloud function이 있었지만

들어가자마자 요금을 내라는 문구를 보고 살포시 나와 블로그를 작성해본다 ㅇ_<