[CSS] 이미지 스프라이트(Image Sprite)

이미지 스프라이트?

여러 개의 이미지를 하나의 이미지로 관리하는 이미지를 말한다.

 

네이버화면에서 네트워크>이미지

 

웹 페이지를 로드하면 수 많은 이미지들을 다운받기 위해 웹 브라우저는 서버에 이미지 요청을 하게 됩니다. 하지만 사용된 이미지가 많을 경우 웹 페이지의 로딩 시간은 오래 걸리게 됩니다. 

 

이미지 스프라이트를 사용하게 되면 이미지를 다운받기 위해 서버 요청을 단 몇 번으로 줄일 수 있습니다. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼에선 웹 페이지의 로딩 시간을 단축해주는 효과가 있습니다. 또한, 관리에도 용이합니다. 

 

예

여러 이미지들

위와 같은 아이콘들을 통째로 가지고 있는 이미지가 있다고 치자.  

이 이미지의 원하는 부분을 잘라 사용하면 불러오는 이미지의 수는 줄어들 것이다. 

 

 

 

 

네이버에서는 많은 카드들이 좌측으로 가는 버튼, 우측으로 가는 버튼을 제공한다. 

이 버튼을 각각 만드는 게 아니라 하나의 요소로 묶어서 제공한다고 생각해보자 . 요소로 묶어  < 와  >를 한 덩어리로 취급하여 움직이면 호출 횟수를 줄일 수 있을 것이다.

 

 

 

 

 

 

 

참고

 

http://www.tcpschool.com/css/css_basic_imageSprites

코딩교육 티씨피스쿨

https://css-tricks.com/spriting-img/

Spriting with <img> | CSS-Tricks