[CSS] CSS Sprite란?

Interview Section은 FrontEnd Interview Question에 대한 QnA를 다룹니다.

 

https://stackoverflow.com/questions/40625070/how-to-use-css-sprite-correctly

 

 

Q. Explain CSS Sprite and How does it enhance the performance.

 

A.

CSS Sprite란 웹사이트의 로딩 속도를 빠르게 하여 UX를 향상시키기 위한 최적화 기법 중의 하나로, 여러개의 이미지를 하나의 이미지로 합쳐서 관리하는 기술을 의미합니다. 브라우저는 웹사이트를 로드하는데 필요한 HTML파일, 이미지등의 리소스를 HTTP요청을 통해 가져옵니다. 이때 HTTP요청에는 오버헤드가 있기 때문에 이 요청을 최소화 하는 것이 브라우저의 로딩 속도를 줄이는데 큰 영향을 미칩니다.

 

 

CSS Sprite는 페이지에 필요한 이미지들을 일일이 개별적인 HTTP요청을 통해서 가져오지 않고, 이 이미지들이 한군데 모여진 커다란 이미지를 한두번의 요청을 통해 가져오고, 이를 position, width, height등의 속성을 통해 잘라서 사용할 수 있도록 합니다. 

 

 

네이버의 경우 다음과 같은 이미지를 Sprite를 통해 하나의 이미지로 관리합니다. 이를 CSS속성을 통해 개별적인 이미지로 관리해서 사용하는 것입니다. 일반적으로 Sprite를 사용하면 압축, 공통의 팔레트속성등을 사용할 수 있기 때문에 용량 측면에서도 효율적이며, HTTP 요청수를 줄이기 때문에 웹사이트 최적화에도 중요한 영향을 미칩니다.