모바일에서 css image sprites 기법 활용시 장점

1. Css Image Sprites (이미지 스프라이트)란?

- 웹 페이지에 사용되는 여러 개의 이미지들을 단 한 개의 파일로 만든 후 css를 통해서 배경으로 처리해 적당한 이미지 영역을 불러와 웹 브라우저가 불러와야 하는 파일의 갯수를 줄이고자 할 때에 사용될 수 있는 방법이다.

2. Css Image Sprites 기법을 활용하는 이유? (장점)

- 웹 브라우저에서 웹 페이지를 불러올 때 다양한 요소들이 로딩 속도에 영향을 미치는데 그 중 가장 큰 영향을 미치는 것이 파일의 용량은 물론 파일의 개수다.

웹 브라우저에서 불러와야 하는 파일의 개수가 늘어나면 늘어날수록 로딩 속도가 느려진다.

왜냐하면 HTTP를 통해서 파일이 전송될때에 서버 응답시간 만큼의 지연시간이 발생하기 때문이다. 예를들어 웹 페이지에 10개의 이미지를 사용했다면 10번을 서버에게 요청하고 10번의 이미지 다운로드 작업을 하여 사용자의 컴퓨터에서 보이게 되므로 그만큼 로딩속도가 느려진다.

또 이미지 파일을 세분화 시킬 필요없이 하나의 파일로 관리할 수 있다는 점이다.

3. Css Image Sprites의 원리

- sprites 이미지를 지정 (background:url….)하고 해당 이미지가 시작되는 위치좌표 (background-position)와 가로크기(width), 세로크기(height)를 정의한다.

예시)

.spritesImg {

background:url(images/ico_home.gif) no-repeat 0 0;

           background-position:0 -50px;

           width:15px;

           height:15px;

}