효과적인 이미지 로딩 구현 방식 :: 마이구미

이 글은 이미지 로딩에 관한 방법들을 알아본다.

로딩 이미지는 요청의 처리에 대한 응답이 완료되기전까지의 지연 시간을 위해 사용된다.

즉, 이미지 로딩은 이미지 다운로드로 인해 지연되는 시간으로 인한 대안을 나타낸다.

참고 링크 - https://jmperezperez.com/medium-image-progressive-loading-placeholder/

현재 이미지 로딩을 위한 많은 방식이 존재한다.

크게 3가지로 분류하면 다음과 같다.

• Lazy Loading
• Placeholder
• Tailored image sizes 
• Blur up

Lazy Loading 은 지연 로딩으로 불리는 방식이다.

사진첩과 같은 한번에 많은 수의 이미지를 보여주는 곳에서 많이 사용된다.

예를 들어, 사진첩 페이지에 접속하면 바로 모든 이미지들을 보여주는 것이 아닌, 스크롤 및 원하는 노출 시점에 도달할 때 로드하는 방식이다.

많은 라이브러리가 존재하기에, 쉽게 적용할 수 있다.

Placeholder 는 보여줄 이미지 공간에 미리 이미지를 배치한다.

이 방식은 구글의 이미지 메뉴에서 직접 확인해볼 수 있다.

아무것도 아니게 생각할 수도 있지만, 사용자들은 이미지 로딩에 대한 체감 속도가 증가하게 된다.

또한 구글 이미지에서는 스크롤로 인한 Lazy Loading 방식도 볼 수 있다.

Tailored image sizes 는 해석 그대로 맞춤 이미지 크기로써, 반응형 이미지 로드라고 볼 수 있다.

모바일의 경우 PC 크기의 이미지까지 요구할 필요가 없다.

오히려 로딩속도만 저하될 뿐이기에, 같은 이미지라도 디바이스에 따라 이미지 크기를 분류하여 가져오는 방식이다.

참고 - https://mygumi.tistory.com/349, https://mygumi.tistory.com/377

그 이외에도 작은 사이즈의 이미지에 대해서는 dataURL 또는 svg 활용, 이미지 압축 등과 같은 많은 방식들이 존재한다.

본인의 선호하는 방식은 현재 Medium 에서 사용하고 있는 방식이고, "Blur up" 이라고 불린다.

이 방식은 같은 이미지 파일 2개를 사용한다.

차이점은 이미지의 크기이다.

하나는 매우 작은 이미지이고, 나머지는 사용할 원본 이미지이다.

방법은 간단하다.

작은 이미지를 보여준 다음, 원본 이미지의 다운로드가 완료되면 대체된다.

- https://hotehrud.github.io/portfolio-vue/#/project

원본 이미지에서 크기를 줄임으로써 용량은 매우 작지만, 이미지는 깨질 것이다.

하지만 사용자는 깨진 이미지가 아닌 서서히 그 이미지가 보여지는 것으로 경험하게 된다.

코드는 다음을 참고하면 된다.

See the Pen Reproducing Medium loading image effect by José Manuel Pérez (@jmperez) on CodePen.