2022-01-08

프론트엔드 성능 개선 기법 중 하나로써,

우리나라에선 네이버가 이 기법으로 포털사이트를 운영하고 있다.

CSS Sprite를 먼저 설명하자면, 웹 사이트에서 이미지를 표출할 때

각 이미지를 서버로부터 각각 가져와서 페이지에 뿌리는게 아닌

가져올 이미지들을 미리 하나로 합쳐놓은 이미지만을 가져와서

CSS를 이용하여 필요한 부분만 잘라서 쓰는 것이다.

도대체 뭔 소린가 하면,

웹 페이지는 처음 로딩할 때 이미지들 각각에 대해 전부 HTTP 요청을 날린다.

웹에 나타내기 위한 이미지 파일들이 N개면 N번 요청을 하는거다.

그래서 이것을 개선하기 위해 이미지들을 다음과 같이 하나로 합친다.