[html/css] 이미지 스프라이트(image sprite)란?

 

 

-웹 페이지에 이미지가 사용될 경우 해당 이미지를 다운받기 위해 웹 브라우저는 서버에 이미지를 요청하게 됩니다.

하지만 사용된 이미지가 많을 경우 웹 브라우저는 서버에 해당 이미지의 수만큼 요청해야만 하므로 웹 페이지의 로딩 시간이 오래 걸리게 됩니다.

 

이미지 스프라이트(image sprite)를 사용하면 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있습니다.

모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다.

또한, 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편합니다.

 

---

이미지 스프라이트의 단점..

1)개별 스트라이프 크기(width, height)

이미지의 특정부분을 노출하기 위해서는 스프라이트 이미지의 시작점과 크기에 대한 정보가 필요하다.

크기(width,height)를 알기위해서는 포토샵같은 그래픽툴을 사용해서 개별 스프라이트의 시작점과 끝점을 알아내 직접 크기를 구해야 할 것이다.

네모반듯한 이미지라면 간단하지만 형태가 복잡한 이미지이거나 투명도나 그림자가 있는 이미지라면 이미지의 경계가 제대로 확인되지 않을 수 도있어 상황이 좋지 않다.

 

2)개별 이미지의 위치(position)

css로 스프라이트에 대한 정보를 기술할때 크기에 대한 정보는 width, height로 나타내고 위치에 대한정보는 background-position에 음수값으로 나타낸다.

스프라이트 이미지에서의 위치에 대한정보는 스프라이트 이미지 자체의 정보이기 때문에 이 작업을 일일히 그래픽툴을 열고 픽셀값을 확인 하는 작업을 해야한다.

 

---