이미지 스프라이트 기법

이미지 스프라이트

여러 이미지들을 하나의 이미지로 만들어 background-position 속성으로 이미지 좌표 값을 이용하여 사용하는 기법이다.

장점 :

• 새롭게 로딩되는 경우의 깜박임 현상 없으며, 이미지는 실제로 사용되기 전 까지는 렌더링되지 않습니다. 이런 이유로 마우스오버시에만 나타나는 이미지 등은 새롭게 로딩되면서 깜박일 수 있죠. 이미지 스프라이트는 미리 모두 로드하기 때문에 이런 현상을 방지할 수 있습니다.
• HTTP 요청횟수를 줄여 웹페이지의 로딩 시간을 절약가능합니다.
  하나의 이미지 파일만 관리하면 됩니다.
• 모듈 형태로 모아서 관리가 가능
  모듈화가 가능하다는 장점이 있습니다. 모듈화를 통하여 컴포넌트화 할 수 있고 커스텀하는데에도 더 간단합니다. 또한 수정사항이에 따른 히스토리를 트랙킹하거나 새로운 업데이트 사항을 전달 받을 때에도 통합하여 전달받을 수 있죠.

단점 :

• 이미지 용량이 크다면 로딩시 매우 오래 걸리는 문제가 있습니다.
• 이미지를 불러오기 위해선 해당이미지의 Position을 알아야하며, CSS로 관리할 경우 클래스로 분리하여 관리하고 background-image, position 속성으로 사용하면 편하지만 SVG이미지로 관리를 위해서는 js코드를 모듈화해야합니다.

사용방법

==방법 1==
.content [class^="icon"]{
  background-image: url(../images/sprite-image.png);
  background-size: 844px auto;
}
.icon-file {
  width: 16px;
  height: 16px;
  background-position: -414px -24px;
}

==방법 2==
.icon-file {
  width: 16px;
  height: 16px;
  background-image: url(../images/sprite-image.png);
  background-size: 844px auto;
  background-position: -414px -24px;
}