INJEBLOG

HTML 벡터 이미지 로딩속도 향상시키기

INJE | 2017.08.25 14:01

벡터 이미지들이 고해상도의 일반 이미지들 보다 파일 크기는 작지만, 사이트가 로딩될 때

이미지를 렌더링 하는 시간이 필요하기 때문에 로딩 시간이 길어질 수 있는데요.


이걸 해결할 수 있는 방법은 이미지를 폰트로 바꾸는 겁니다.

벡터 그래픽을 폰트로 바꿔주는 사이트가 몇개 있는데, 

제가 개인적으로 쓰는 사이트는 icoMoon 입니다.



import icons 를 눌러 벡터 파일들을 올리고,



Generate Font 버튼을 누르면,

폰트파일과 css 파일, 예제 html 파일이 들어있는 zip 파일을 하나 받을 수 있는데요.


받은 파일들을 통채로 가져다가 쓰시면 됩니다.

<link href="assets/css/style.css" rel="stylesheet">

받은 파일중 style.css 파일을 불러와 주시고,

<span class="icon-github"></span>

icon-올린파일이름 형식으로 span 에 클래스를 지정해 주시면 됩니다.


CODE/WEB
2017.08.25 14:01
COMMENTS
  1. profile_img
    SONYLOVE

    저도 icomoon 을 애용중이에요.
    마음대로 추가하거나 빼서 관리할수 있다는게 가장 마음에 듭니다.

    EDIT/DELETE COMMENT 2017.08.30 19:54 신고