성능 최적화하기 - (2) 이미지 최적화

◽ 이미지 성능 개선방법

1. 이미지 CDN을 사용

이미지 CDN이란 이미지를 사용자에게 보내기전에 이미지 포맷을 바꾸거나 사이즈를 바꿔 가공 후 전달하는 것으로 이미지 CDN을 사용하는 것이 성능에 좋다.

url?src=[image_url]?width=200&height=200

 

2. unsplash의 사용

getParametersForUnsplash가 이미지 CDN의 역할을 해준다.

<img src={props.image + getParametersForUnsplash({width: 1200, height: 1200, quality: 80, format: 'jpg'})} />
<img src={props.image + getParametersForUnsplash({width: 240, height: 240, quality: 80, format: 'jpg'})} />

 

 

◽ 텍스트 압축

텍스트 압축이란 파일을 압축하듯 서버에서 보내는 리소스를 압축해서 서비스해주는 것이다.

네트워크 탭의 파일 중에서 Content-Encoding: gzip을 사용하는 파일을 볼 수 있다.

압축의 알고리즘에는 gzip, Deflate 2가지가 있다.

gzip은 2KB를 기준으로 그 이하의 파일은 인코딩을 하지 않는다.

 

 

 

출처

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 - 인프런 | 강의