이미지 최적화가 왜 필요해?
이커머스 사이트 경우에는 이미지가 주가 되기 때문에 최적화가 필요하다.
이미지 사이즈를 줄이면 자연스레 웹 사이트의 렌더링 성능은 더욱 빨라지게 될 것이다.
이것은 SEO와도 연결되어 있으며 소비 패턴에도 영향을 미친다.
이미지의 종류와 특징
디지털 이미지는 일반적으로 어떻게 렌더링이 되느냐에 따라 1.레스터 이미지와 2. 백터 이미지로 구분이 되며, 이미지 손실 정도에 따라 무손실 이미지 타입과 손실 이미지 타입으로 구분이 된다.
레스터 이미지와 백터 이미지
1) 레스터 이미지 (.jpeg .gif .png)
레스터 이미지의 경우 픽셀을 이미지 형태로 표현하는 방식이다. (여러 픽셀들이 모여 하나의 이미지를 만든다)
그러기 때문에 품질이 더 좋은 이미지를 만들기 위해서는 그만큼 픽셀이 추가되면서 용량이 커지고 렌더링 속도도 현저히 떨어지게 된다.
2) 백터 이미지(.svg)
백터 이미지의 경우엔 수많은 수학 방정식을 포함하고 있는 방식의 이미지 형태이다.
선의 표현, 크기, 색상 등의 정보를 이미지 안에 계산식으로 연산하여 이미지를 제공한다.
이러한 렌더링 방식으로 백터 이미지는 사이즈가 커지거나 작아져도 깨지거나 정보가 달라지지 않는다. (품질 유지👍)
이 백터 이미지는 보통 아이콘, 폰트등에 주로 사용하며, 대표적으로 svg가 많이 사용된다.
무손실 이미지와 손실 이미지
1) 무손실 이미지
무손실 이미지는 원본 이미지에서 이미지를 렌더링하는데 필요하지 않은 정보들을 제거한 이미지를 무손실 이미지라고 한다.
따라서 무손실 이미지는 원본 이미지보다 용량이 줄어들 수 있다
대표적으로 GIF,PNG가 대표적인 무손실 이미지이다.
2) 손실 이미지
손실 이미지는 무손실 이미지의 화질 감소를 감수하면서 사이즈를 줄여 빠른 렌더링을 할 수 있는 이미지이다. 일반적으로 사람이 품질 저하를 거의 눈치채지 못하면서 품질을 낮출 수 있는 퍼센트는 100% ~ 75%사이라고 한다.
손실 이미지는 무손실 이미지보다 상대적으로 빠른 렌더링이 가능하여 사용자에게 꼭 필요한 정보를 주는 이미지가 아닌 경우 사용되는 이미지이다.
대표적으로 JPEG가 가장 대표적인 손실 이미지 이다.
WEBP 포멧
WebP는 2010년 구글에서 개발한 이미지 포맷으로 손실 압축과 비손실 압축을 전부 지원하는 특성을 가지고 있다. 영상압축 방식을 사용하여 파일 크기를 25% ~ 35% 정도로 압축을 할 수 있는 이미지 포맷이다. (참고로 IE는 지원하지 않는다..💦)
이미지 최적화 방법
1) 브라우저 사이즈에 맞춰 적절한 이미지를 제공
이미지를 뷰포트에 따라 대응할 수 있도록 브레이크 포인트를 걸어 사이즈를 조절해준다.
데스크톱의 이미지는 모바일 이미지보다 상대적으로 용량이 클 수 밖에 없다.
이렇게 되면 필요 이상의 이미지를 다운받게 되어 리소스를 낭비될 수 있다.
해결 방법으로는 미디어 쿼리 및 img 태그의 srcset속성, picture 태그등의 방법이 있습니다.
srcset 속성은 이미지 소스의 세트라는 의미로, 같은 비율의 다양한 크기를 가지는 동일 이미지를 명시하는 속성이다.
2) 이미지 Lazy Loading
웹사이트는 최대한 사용자가 보이는 부분부터 로드되도록 처리하며, 사용자가 보이지 않는 부분은 Lazy Loading을 적용하여 초기 랜더 효율성을 높일 수 있다.
이렇게 화면 밖의 콘텐츠들을 Above the fold라고 하며, 화면 밖의 이미지들은 자바스크립트를 이용하여 레이지 로딩을 적용한다.
레이지 로딩을 이용하는 방법 중에 img태그를 활용하는 방법이 있다.
일반적으로 img태그를 이용하여 이미지 로드를 하게 되면 이미지를 무조건 로드한다.
그러므로 이미지들의 로딩을 지연시키려면, src속성 대신 data-src라는 속성에 이미지 URL을 저장한다.
그러면 src는 비워져 있고, 브라우저는 해당 이미지를 로드하지 않는다.
예제)
<img data-src="https://ik.imagekit.io/demo/default-image.jpg" />
그리도 해당 이미지(혀재는 그냥 placeholder 상태)가 뷰포트에 들어오자마자 로딩할 수 있도록 확인해야 한다. 이 방법도 두 가지가 존재한다.
