[웹 최적화] 이미지 로딩 최적화(Image loading Optimzation)

오늘은 웹 개발시에 자주 접하게 되는 이미지 로딩에 대해서 알아보겠습니다. 그 중에서도 이미지와 관련된 성능 최적화에 대해서 한번 알아보도록 하겠습니다.

 

 우리는 개발을 하다 보면 이미지를 아주 많이 접하게 됩니다. 배경이 될 수 도 있고, 아이콘이 될 수도 있고, 사람의 프로필 등으로 다양한 모습으로 접하게 될 겁니다. 이렇게 자주 만나는 이미지는 웹 성능에 큰 영향을 미치는 요소 중 하나입니다. 실제로 lighthouse에서 검사 시에도 이와 관련된 작업을 따로 하지않는다면 매우 많이 검출되는 것을 볼 수 있습니다. 제가 아는 한도내에서 어떻게 이미지를 효율적으로 다뤄야 될지에 대해 알아보겠습니다.

 

1. preconnect 옵션

<link rel="preconnect" href="테스트주소" />

이 옵션은 말 그대로 사전연결 옵션입니다. 특정 주소에서 리소스들을 불러올 때 해당 주소와 연결하는데 있어서 다양한 내부 처리들이 발생하게 됩니다. 특히, 보안연결은 DNS조회, 리디렉션 및 사용자 요청 처리 등 다양한 작업을 하는데 있어서 여러번 왕복을 할 수 있는데 이런 작업들은 속도가 느린 네트워크에서는 특히 더 큰 코스트가 발생하게 됩니다. 이런 코스트들을 사전에 연결해놓음으로써 줄여 성능을 향상시키는게 목적이라고 할 수 잇습니다.

 

2. 이미지 확장자

최선의 이미지 확장자를 선택하는 것도 성능향상에 있어서 중요한 요소라고 생각합니다. 저는 이미지의 용도에 따라 적절한 확장자를 사용해야 한다고 생각합니다.

1. SVG : 복잡도가 작은 로고 또는 아이콘 이미지
2. PNG : 투명한 배경이 필요한 이미지
3. WEBP : 압축 손실률이 작고 압축률이 높은 차세대 이미지 타입이지만, 구형 safari나 ie11(사망)은 제대로 지원을 하지 않아서 대체 이미지를 사용해야 됩니다.
4. JPG : 위 3개를 제외한 케이스 혹은 대체 이미지용으로 사용

 

3. 태그 속성

3-1. decode

<img src="테스트주소/이미지상세주소" decoding="async" />

보통 이미지를 로딩할때 디폴트 디코딩 속성은 auto입니다. 브라우저가 자체적으로 판단하여 최선의 화면을 보여주는 것입니다. 하지만, 이러한 디코딩 속성은 async로 지정하여 주면 이미지를 비동기적으로 디코딩해서 다른컨텐츠를 표시하는데 걸리는 지연을 줄입니다. 

 

3-2. loading

<img src="테스트주소/이미지상세주소" loading="lazy"/>

이미지 레이지로딩은 다들 많이 아실 거라고 생각합니다. 웹페이지 내의 실제 이미지들이 화면에 보여질 필요가 잇을때 로딩을 하도록 하는 기술입니다. 바로 로딩하지 않고, 지연로딩을 하는 것이기 때문에 초기 로딩시 필요한 리소스의 양을 줄일 수 있습니다. 당연히 통신에 대한 코스트도 감소합니다.

 

3-3. width, height

<img src="테스트주소/이미지상세주소" width="100" height="100" />

이미지의 높이와 넓이를 지정하는 것은 웹의 성능적인 측면에서 중요한 요소 입니다. lighthouse로 분석시 가이드에서도 항상 추천하고 있습니다. 이것을 하는 이유는 화면 로딩 중 CLS(Cumlative Layout shift : 누적 레이아웃 이동) 측면에서 이점이 있습니다. 이미지의 높이와 넓이가 지정되어 있지 않으면 이미지가 렌더링 되기전에 그 부분이 없었다가 이미지가 렌더링 후에 영역이 잡히면서 전체적인 레이아웃의 움직임이 있을 수 있기 때문입니다. 하지만 이미지 영역을 설정해 놓는다면 그만큼 영역이 확보된 상황에서 화면을 그리기 때문에 레이아웃의 변동이 최소화 되어 성능향상을 기대해볼 수 있습니다.

 

CLS는 사용자 입력 500ms이내에 발생하지 않는 레이아웃 이동에 대한 점수를 합산하여 콘텐츠의 불안정성을 측정하는 것입니다. 뷰포트에서 가시적인 콘텐츠가 얼마나 이동했는지와 영햐을 받은 요소가 이동한 거리를 확인합니다. 

 

4. content-visibility(Safari, FireFox 미지원)

content-visibility : auto;

해당 속성은 CSS에 추가된 문법으로 현재 Safari와 Firefox는 지원하지 않습니다. 해당 속성을 사용하게 되면 간단하게 화면밖의 요소에 대해서는 레이아웃과 박스의 스타일만 처리하고 내부는 렌더링 하지 않게 됩니다. 이로써 전체를 렌더링 하는 기존의 방식에 비해서 엄청난 렌더링 시간 감소를 확인할 수 있을 것입니다.

 

이 외에도 이미지 로딩에 관해서 최적화 하는 방안은 캐싱 처리, 이미지 세분화 등 다양한 방법 들이 있습니다. HTML, CSS, Javascript는 매해 새로운 문법이 나오며 조금 더 나은 사용자 경험을 위해 발전해 나가고 있다고 생각합니다. 프론트엔드 환경은 계속적으로 변화하고 있고 이에 따라 끊임없이 공부해야만 보다 더 나은 사용자 경험을 제공할 수 있다고 생각합니다.