[웹최적화] 이미지 스프라이트

1. 이미지 스프라이트란?

• 하단 사진처럼 여러 개의 이미지를 하나의 이미지로 만들어 놓는 것이다.
  

2. 사용 방법

• 스프라이트 이미지는 CSS의 배경 이미지의 위치를 정하는 background-position 속성을 사용한다.

🧐 예시

• background-image 속성을 통해 이미지를 지정하고, 로고 별로 클래스를 생성하여 위치값을 지정한다.

a::after {
  content: "";
  display: block;
  width: 130px;
  height: 130px;
  background-image: url(./assets/sprite.png);
}

.youtube::after {
  background-position: -10px -5px;
}
.netflix::after {
  background-position: -150px -5px;
}
.appletv::after {
  background-position: -150px -130px;
}
.tving::after {
  background-position: -10px -130px;
}

• <a> 태그에 각 클래스를 적용하면 하단 이미지와 같이 로고가 출력된다.

<div class="container">
  <a href="#" class="youtube">youtube</a>
  <a href="#" class="netflix">netflix</a>
  <a href="#" class="appletv">appletv</a>
  <a href="#" class="tving">tving</a>
</div>

3. 이미지 스프라이트를 사용하는 이유?

1️⃣ 이미지 로딩 속도 향상

• <img> 태그에 각각 이미지를 삽입하면 하단 이미지처럼 이미지 하나 당 31~32밀리초가 소요된다.

<div class="container">
  <img src="./assets/youtube.png" alt="youtube">
  <img src="./assets/netflix.jpg" alt="netflix">
  <img src="./assets/appletv.png" alt="appletv">
  <img src="./assets/tving.jpg" alt="tving">
</div>

• 이미지 스프라이트를 통해 이미지를 삽입하면 하단 이미지처럼 26밀리초가 소요된다.
  

💡 이미지 스프라이트를 사용하면 리소스 요청 수가 줄어들기 때문에 로딩 시간이 줄어든다 !

4. 그럼 무조건 이미지 스프라이트 기법을 사용하는게 좋은가?

1️⃣ 유지보수의 어려움

• 이미지 스프라이트를 통해 이미지 파일을 관리한다면 파일 갯수가 줄어들기 때문에 파일 관리는 쉬워질 수 있다. 하지만 이미지가 추가되거나 변경되는 일이 자주 발생할 경우 그 때마다 해당 이미지를 수정해야 하는 경우가 발생한다.

💡 자주 수정하는 이미지인 경우 이미지 스프라이트보단 각각의 이미지 파일을 사용하는 것이 유지보수하기에 편리하다 !

2️⃣ 웹 접근성

• 상단에서 이미지 스프라이트를 사용하기 위해 CSS의 background-image 속성을 사용했다. 아이콘 같이 의미가 없고 디자인적인 요소로 사용하는 것은 무관하겠지만, 상품 이미지 등을 이미지 스프라이트 기법을 사용하면 SEO에도 악영향이 생기고, 스크린 리더에서도 이미지가 아니라고 판단하기 때문에 웹 접근성에도 좋지 않다.

---

이미지 스프라이트 기법을 사용하면 웹 최적화 면에선 좋을 순 있어도 유지보수나 웹 접근성 면에선 좋지 않으니, 이미지 스프라이트 기법을 사용하기에 적절한 경우에 사용하면 될 것 같다.