웹 개발을 하다 보면 아이콘을 넣어야 할 때가 있다.

이 때, 보통 아이콘을 SVG 파일을 많이 이용한다. 그런데 무조건 SVG 파일이 좋은 것은 아니다.

SVG 어떨 때 안좋을까?

[실제 서비스에 사용되는 아이콘들]

실제 서비스에 들어갈 아이콘들이다. 세번째 아이콘은 그나마 단순한 형태지만, 첫번째 두번째 아이콘은 매우 복잡한 형태다.

실제로 첫번째 아이콘을 SVG 파일로 내보내기 하여 코드를 까보면, 다음과 같이 어마어마한 양의 데이터가 들어있는 것을 볼 수 있다. (아예 데이터 문자열이 image 태그를 통해 들어가있다.)

<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect width="24" height="24" fill="url(#pattern0)"/>
  <defs>
    <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
      <use xlink:href="#image0_28507_46806" transform="scale(0.00195312)"/>
    </pattern>
    <image id="image0_28507_46806" width="512" height="512" xlink:href="data:image/png;base64,iVBO..."/>
  </defs>
</svg>

이렇게 복잡한 아이콘을 SVG로 사용할 경우, PNG 파일에 비해 용량이 적게는 몇배, 많게는 수십배 이상 커지기도 한다.

[예시 아이콘은 약 10배 정도의 차이가 난다.]

벡터 이미지 대신 픽셀 이미지를 사용하자!

복잡한 아이콘은 벡터 이미지 대신 픽셀 이미지를 이용하면 용량이 많이 줄어든다.

피그마에서는 보통 1배수부터 4배수까지 크기를 조절해서 내보내기 할 수 있으므로, 적절한 해상도의 아이콘 이미지 파일을 다운로드받아, <img/> 혹은 <picture/> 태그를 이용해 렌더링해주자.

얼마나 빨라질까?

fast 3G 환경에서 이미지 패치 속도를 비교해봤다.

[클락아이콘로딩속도비교]

[마이크아이콘로딩속도비교]

시계 아이콘은 약 60%, 마이크 아이콘은 약 50% 속도가 향상되었다. (물론 인터넥 속도가 빠를 수록 속도 차이는 줄어든다.)