CSS Image Sprites

Image Sprites

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth.

 

 

image sprite는 하나의 이미지로 놓기 위한 이미지의 집합이다.

많은 이미지를 가지고 있는 웹페이지는 많은 서버에 리퀘스트를 발생시키고 로드시키기 위해 많은 시간을 소비한다.

image sprite를 사용하는 것은 서버의 요청의 수를 감소시키고, 대역폭을 저장한다.

 

Image Sprites - Simple Example

Instead of using three separate images, we use this single image ("img_navsprites.gif"):

 

 

3개의 분할된 이미지를 사용하는 것 대신에 우리는 하나의 이미지를 사용한다.

 

With CSS, we can show just the part of the image we need.

In the following example the CSS specifies which part of the "img_navsprites.gif" image to show:

 

우리는 우리가 필요한 부분의 이미지의 부분만 보여주는 것이 가능하다.

다음의 예제에서 css는 보여주기 위한 "img_navsprites.gif"를 명시한다 ?

 

Example explained:

• <img id="home" src="img_trans.gif"> - Only defines a small transparent image because the src attribute cannot be empty. The displayed image will be the background image we specify in CSS
• width: 46px; height: 44px; - Defines the portion of the image we want to use
• background: url(img_navsprites.gif) 0 0; - Defines the background image and its position (left 0px, top 0px)

This is the easiest way to use image sprites, now we want to expand it by using links and hover effects.

 

예제를 설명하자면,

 

오직 작은 투명한 이미지를 명시한다 왜냐하면, src 속성은 비어있을수 없다. 보여지는 이미지는 우리가 css로 명시한 배경이미지가 될것이다.

우리가 사용하기를 원하는 이미지의 부분을 정의하라

배경이미지와 위치를 정의하라

 

이것이 image sprites를 사용하기 가장 쉬운 방법이다. 지금 우리는 링크와 hover effect를 사용함으로써 확장되기를 원한다.

 

Image Sprites - Create a Navigation List

We want to use the sprite image ("img_navsprites.gif") to create a navigation list.

We will use an HTML list, because it can be a link and also supports a background image:

 

우리는 네비게이션 리스트를 만들기 위해서 sprite image를 사용하기를 원한다.

우리는 html 리스틀 사용할것이고 이것은 링크가 될것이고, 또한, 배경 이미지를 지원한다.