REACT 이미지 최적화

728x90

 

Front-End 이미지 로딩 최적화

 

React 환경에서 이미지 로딩은 꽤 오래 걸리는 작업이 될 수 있다.

로딩이 오래 걸리는 경우 중 대부분이 바로 이미지 픽셀 크기 때문이다.

 

특히 아이폰으로 찍은 사진은 용량이 크기 때문에 홈페이지 내에 올릴 때 굉장한 로딩 시간이 걸릴 수 있다.

이때 1차적으로 해줄 작업은 이미지 픽셀 크기 최적화가 답이 될 수 있다.

 

다른 코드를 통한 이미지 최적화 방식이 물론 존재하지만 나같은 아마추어, 취미로 프론트엔드를 하는 사람들에겐 쉽고 확실한 방식이 될 수 있다.

 

 

예를들어서 다음과 같은 5000*3535 픽셀의 이미지를 웹에 올린다고 하자.

일단 굉장한 크기의 사진이다.

이 정도의 크기의 사진을 아래 사진과 같이 약 300*300 픽셀 내에 두어야 한다고 한다면 픽셀 손실이 발생한다.

굳이 5000*3535 픽셀 크기의 고화질 사진이 필요 없다는 얘기이다.

반응형

 

그렇다면 사진 크기를 픽셀에 맞게 축소하면 된다.

나는 주로 아래 링크를 통해서 사진 크기를 바꾼다.

https://www.iloveimg.com/ko/resize-image/resize-jpg

한 번에 여러 JPG 크기를 조절하여 시간을 절약하세요!

 

이 사진을 올리게 되면 확실히 로딩 시간이 줄어드는 것을 확인할 수 있다.

 

최적화 전에는 3초 이상이 걸렸지만 현재 0.2초 정도의 시간이 걸리는 것을 알 수 있고 최적화가 된다는 것을 확인할 수 있다!!