CSS 이미지 스프라이트(Image Sprite)로 아이콘 표시하기

이미지 스프라이트(Image Sprite) 기법을 사용하는 가장 큰 장점은 HTTP 요청 횟수를 줄일 수 있다는 점입니다. 여러 개의 작은 이미지 파일을 각각 불러오는 대신 하나의 스프라이트 이미지만 요청하면 되기 때문에, 서버와의 통신 횟수가 감소하고 그 결과 사이트의 로딩 속도가 눈에 띄게 빨라집니다.

특히 SNS 아이콘, 버튼, 배지처럼 반복적으로 사용되는 작은 그래픽 요소가 많은 페이지에서 이 기법은 성능 최적화에 매우 효과적입니다.

CSS로 스프라이트 아이콘 표시하기

이미지 스프라이트에서 특정 아이콘을 화면에 표시하려면 공통 배경 이미지를 지정한 뒤, 각 요소마다 background-position 값을 조절해 원하는 영역만 노출시키면 됩니다. 아래 예제 코드를 살펴보겠습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.twitter,.facebook {
    background: url(sprites_64.png) no-repeat;
    display:inline-block;
    width: 64px;
    height: 64px;
    margin:10px 4px;
}
.facebook {
    background-position: 0 -148px;
}
</style>
</head>
<body>
<h1>Image Sprite example</h1>
<a class="twitter"></a>
<a class="facebook"></a>
</body>
</html>

코드 설명

.twitter, .facebook — 두 클래스 모두 동일한 스프라이트 이미지(sprites_64.png)를 배경으로 사용합니다.
display: inline-block — 앵커(<a>) 태그에 너비와 높이를 적용하기 위해 인라인 블록으로 설정합니다.
width / height — 표시할 아이콘의 크기를 64×64 픽셀로 지정합니다.
background-position — 페이스북 아이콘은 0 -148px로 위치를 조정하여 스프라이트 이미지 내 해당 아이콘이 있는 영역만 보여줍니다.

실행 결과

위 코드를 실행하면 하나의 스프라이트 이미지에서 트위터 아이콘과 페이스북 아이콘이 각각 별도의 이미지처럼 표시됩니다.

CSS 이미지 스프라이트(Image Sprite)로 아이콘 표시하기

마무리

이처럼 CSS의 background-position 속성만 활용하면 하나의 이미지 파일에서 여러 아이콘을 자유롭게 추출해 사용할 수 있습니다. 이미지 스프라이트는 HTTP 요청을 최소화하여 웹 페이지 초기 로딩 성능을 개선하는 대표적인 프런트엔드 최적화 기법이므로, 아이콘이 많은 프로젝트에서 적극적으로 활용해 보시기 바랍니다.