[Frontend]이미지 로드 시간 줄이기

개인 프로젝트를 하는 중 배경 이미지를 선택 할 수 있는 기능을 구현 했다. 
문제는 이미지가 로드 되는 시간이 너무 오래 걸린다는 점이었다. 이 부분을 어떻게 개선 했는지 정리해보고자 한다.

 

먼저 최적화를 하기 이전에 상황을 보도록 하자. 

 

 

 

그리고 개선 이후, 화면이다.

 

영상을 업로드하면서 조금 느려보이는 경향이 있긴하지만, 우선 로딩시간이 많이 개선되었고, 이미지가 로딩되기 이전에는 placeholder를 미리 두어 이미지가 나올 것이라는 것을 사용자가 알 수 있도록 만들었다.

 

이미지 용량 줄이기

나의 가장 큰 문제는 너무 큰 이미지 용량이었다. 

배경 이미지 하나가 6MB, 큰 것은 10MB 짜리도 있었다. 나는 이미지 로딩 시간을 줄이기 위해 구글에서 출시한 파일 포맷인 webp 형식으로 이미지들을 모두 변경하였다. (변경 사이트)

PNG to WEBP | CloudConvert

 

이렇게 하니, 이미지 배경 용량이 눈에 띄게 줄어들었다. 가장 작은 것은 16.85KB로 줄었으며, 화면상 깨짐현상도 나타나지 않았다. 

이것 만으로도 사실 이미지 로드시간을 많이 줄였지만, 약간의 로딩 시간동안 사용자에게 보여줄 loading 창도 만들고 싶었다. 

---

이미지 Loading 창 만들기

나는 vue3를 사용하고 있었기에, 아래처럼 작성하였다. 

<div class="loading" v-show="loading"> </div>
<img v-show="!loading" :src="loadImage(url)" alt="" @load="loadedImage"/>

//template
const loading = ref(true);

function loadedImage(){
	loading.value = false;
}

 

이렇게 하니, 정상적으로 로딩이 되기 전에는 로딩창을 보여주다가, 이미지 로딩이 완료되었을 때, 정상적으로 이미지가 표출 되는 모습을 볼 수 있었다. 

 

주의 할 점은 v-if로 하면, 애초에 DOM에 img태그가 올라가 있지 않기 때문에,  loading 자체를 하지 않는다는 점이다. 

꼭 v-show로 설정해주자.