웹 최적화 기법 소개 - CSS 스프라이트

이미지나 외부 파일을 불러오기 위한 HTTP 요청은 페이지 로딩 시간에 많은 영향을 미치게 됩니다.

만약 페이지에서 불러와야 할 이미지가 50개라면 HTTP 요청을 최소 50번 이상 보내야 할텐데요, 이러면 3G나 네트워크 환경이 좋지 않은 환경에서는 세월아 네월아 로딩되는 페이지를 보면서 분을 삭혀야 합니다.

 

오늘은 이미지 파일 요청을 최소화하기 위한 CSS 스프라이트 라는 기법을 알아보겠습니다.

CSS 스프라이트

CSS 스프라이트는 여러 이미지를 한 장으로 묶은 후 CSS의 배경 포지셔닝을 통해 처리하는 기법입니다.

출처 - (좌) 네이버 메인 리소스 / (우) 티스토리 기본 스킨 리소스

위 사진은 여러 서비스에서 CSS 스프라이트를 사용한 예시인데요, 버튼과 로고 이미지를 일일히 HTTP 요청을 통해 불러온다면 용량이 아무리 작다 해도 브라우저의 최대 동시 요청수 제한*으로 인해 적지 않은 시간이 소요되게 됩니다.

 

(* 브라우저별로 한번에 보낼 수 있는 HTTP 요청 횟수가 약간씩 다른데요, 대부분의 최신 브라우저는 6건을 동시에 요청할 수 있습니다.)

브라우저	최대 동시 요청수
인터넷 익스플로러 7.0	2
인터넷 익스플로러 11.0	13
파이어폭스	6
사파리	6
크롬	6
오페라, IOS, 안드로이드 내장 브라우저	6

따라서 이렇게 작은 이미지 리소스들을 한 이미지로 모아 관리하면, 브라우저는 단 한 번의 HTTP 요청만으로 여러 이미지를 한꺼번에 로드해 사용할 수 있게 되는 것입니다.

 

다만 이 방식은 언제나 CSS를 통해 픽셀 단위로 이미지를 관리해야 하므로 더이상 추가되거나 수정될 일이 적은 리소스에 적합합니다. 😁

 

[샘플 CSS 코드]

.social_icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    // 사용할 버튼별로 포지션(시작지점) 부분을 조정해줍니다. 
    background-position: -420px -276px;
    background-repeat: no-repeat;
}