Adblock_detected

AdBlock을 사용중이시네요..

index.html

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

[CODE/WEB]

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

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


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

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

제가 개인적으로 쓰는 사이트는 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 에 클래스를 지정해 주시면 됩니다.


1 ··· 6 7 8 9 10