CSS 이미지 스프라이트(Image Sprite)는 웹 페이지에서 사용하는 여러 개의 이미지를 하나의 파일로 합쳐 놓은 결합 이미지입니다. 모든 이미지를 한 번만 로드하면 되므로 HTTP 요청 횟수가 줄어들어 페이지 로딩 속도가 크게 향상됩니다.
합쳐진 스프라이트 이미지에서 원하는 부분만 화면에 보여주려면 CSS의 background-position 속성을 활용하면 됩니다. 각 요소에 고유한 좌표 값을 지정함으로써 하나의 큰 이미지 안에서 필요한 영역만 노출시키는 방식입니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sprite {
background: url("Capture.png") no-repeat;
width: 280px;
height: 200px;
display: inline-block;
}
.flag1 {
background-position: 0px 0px;
}
.flag2 {
background-position: -255px 0px;
}
.flag3 {
background-position: -510px 0px;
}
.flag4 {
background-position: -765px 0px;
}
body {
text-align: center;
}
</style>
</head>
<body>
<div><h1>Flag Image Sprite</h1></div>
<div class="sprite flag1"></div>
<div class="sprite flag2"></div>
<div class="sprite flag3"></div>
<div class="sprite flag4"></div>
</body>
</html>출력 결과
이미지 스프라이트의 장점
위 예제에서는 네 개의 깃발 이미지가 하나의 PNG 파일에 가로로 나열되어 있습니다. 각 .flag 클래스는 동일한 배경 이미지를 공유하지만, background-position 값(-255px씩 이동)을 다르게 설정하여 서로 다른 깃발이 표시됩니다.
- 로딩 속도 개선: 이미지 요청 횟수가 줄어들어 초기 페이지 렌더링이 빨라집니다.
- 서버 부하 감소: 불필요한 반복 요청을 줄여 서버 자원을 절약할 수 있습니다.
- 호버 시 끊김 방지: 버튼 아이콘 등에 활용하면 마우스 오버 시 이미지가 새로 로드되면서 깜빡이는 현상을 막을 수 있습니다.