리액트 성능 최적화 기법 1 - 이미지 최적화

이미지 최적화란? 

뷰어에게 보여지는 이미지의 품질은 훼손시키지 않으면서 동시에 가능한 작은 크기의 이미지를 제공하는것

가능한 작은 이미지를 제공하여 사용자가 이미지 로드를 기다리는 시간을 줄일 수 있다.

또한 적절한 alt 요소를 사용하는것도 이미지 최적화로 볼 수 있다.

 

1. img 태그 사용하기

.thumb{
background-image: url("thumb.png")
}

<img src="thumb.png" alt="썸네일 이미지">

img 태그를 적절하게 사용하면 스크린 리더기와 같은 보조기구에 더 인식이 잘되며 

SEO 최적화에 도움이 된다.

 

2. 이미지의 크기를 적절하게 조절하기

html에서 img 태그는 본인의 width, height 픽셀의 2.4배정도 표현 할 수 있다.

예를 들어 100x100 img 태그에 1200x1200 이미지를 사용하나, 240x240 이미지를 사용하나 사용자가 보기에는 별 다를바가 없다는 뜻이다.

https://imgix.com/ 

해당 사이트는 이미지 src의 뒤에 "w=숫자&h=숫자" 파라미터를 붙여 사이즈를 편집할수 있게 도와주는 사이트이다.

 

3. 이미지 압축하기

이미지를 압축하면 퀄리티는 최대한 유지하며 용량을 줄일 수 있다.

https://imagecompressor.com/ko/

 

이미지를 압축하다보니 46% 압축률을 보인 사진도 있었다.

용량을 크게 줄일 수 있는 사진도 있으니 애니매이션등 성능이 중요한 부분에서 사용하면 좋을거 같다.

 

4. 중요 이미지는 빠르게 띄우기

<img src="tmumb"/>

<img src="thumb" fetchpriority="high"/>

 

사용자에게 최우선적으로 보여져야하는 이미지에 fetchpriority 옵션 high로 주면 해당 이미지를 우선적으로 처리하게 됩니다.  

썸네일, 주력 상품과 같은곳에 사용하면 좋다.