이미지 스프라이트(Image Sprites)는 단일 이미지에 넣은 이미지 모음입니다.

이미지가 많은 웹 페이지는 로드하는 데 오랜 시간이 걸리고, 서버에 다수의 요청을 할 수 있습니다.

이미지 스프라이트를 사용하면 서버 요청 수가 줄어들고 대역폭(bandwidth)이 절약됩니다.

세 개의 개별 이미지를 사용하는 대신, 아래의 단일 이미지 ("img_navsprites.gif")를 사용합니다.


CSS를 사용하면 필요한 이미지의 일부만 표시할 수 있습니다.

아래의 예제에서, CSS는 이미지 "img_navsprites.gif"의 보여줄 부분을 지정합니다.

• <img id = "home"src = "img_trans.gif">- src 속성은 비워 둘 수 없으므로 작은 투명 이미지만 정의합니다. 표시된 이미지는 CSS에서 지정한 배경 이미지가 됩니다.
• width: 46px; height: 44px; - 사용하려는 이미지 부분을 정의합니다.
• background: url (img_navsprites.gif) 0 0; -배경 이미지 및 위치 정의 (왼쪽 0px, 상단 0px)

이것은 이미지 스프라이트를 사용하는 가장 쉬운 방법입니다. 이제 링크와 호버 효과를 사용하여 확장하려고 합니다.

스프라이트 이미지 ( "img_navsprites.gif")를 사용하여 네비게이션 목록을 만드는 경우,

스프라이트 이미지는 링크가 될 수 있고 배경 이미지도 지원하므로, HTML 목록을 사용합니다.