이미지를 쪼개 넣는 CSS Spirtes에 대해서

이미지 파일은 별도의 GET 요청을 통해 다운받는다.

한 페이지에 자잘한 이미지 파일이 많이 있다면 GET 요청을 여러번 할 수밖에 없다.

서버 요청의 수를 덜기 위해 CSS Sprites라는 수법이 생겼다.

 

작은 이미지들을 하나의 이미지로 묶어 한 번의 GET 요청만 하고

CSS로 background-position을 조절해서 원하는 부분만 이미지로 나타나게 하는 방법이다.

 

대신 용량이 큰 이미지들을 이렇게 묶는 건 다운로드 시간이 오래 걸려 사용자 경험에 좋지 않고

아이콘과 같은 작은 이미지들에만 활용하는 게 보통이다.

 

아래의 사이트에서 CSS Sprites를 위한 파일을 쉽게 만들 수 있다.

cssspritestool.com

이미지의 background-position을 자동으로 설정해 놓은 CSS 파일도 제공한다.

 

보통은 inline-block 속성을 준 span 엘리먼트의 background-image에 넣어서 사용하는 것 같다.

 

이미지를 수정하기가 번거롭다는 단점이 있다.