image sprite 이미지스프라이트

🌌 image sprite(이미지스프라이트)

1. image sprite란?

• 배경이미지를 적용할때 각각의 요소에 들어가는 배경이미지를 따로따로 만들지 않고,
  여러 가지의 이미지를 하나의 이미지 파일 안에 배치하여 이미지 로드 부담을 줄이는 방법이다.

이미지 출처

2. image sprite 사용법

• 방법 1: background: url( ) 값 다음에 x, y 2개 값으로 지정
• 방법 2: background-position 속성으로 지정

⭐️방법 1

.imgsprite {
  width: 314px; //원하는 이미지의 가로좌표 
  height: 314px; //원하는 이미지의 세로좌표
  
  background: url(    ) no-repeat;  //이미지 주소
}

결과 ⬇️

⭐️방법 2

background-position을 사용하며, 가로이동(→)과 세로이동(↓)은 -값을 줘야 한다!

.tool {
  width: 130px; //원하는 이미지 가로길이
  height: 80px; //원하는 이미지 세로길이
  
  background: url(  ) no-repeat; //이미지 주소
  background-position: -315px -225px; //원하는 이미지의 위치까지 가로,세로 이동
}

결과 ⬇️

💡 이미지스프라이트 도움 사이트 💡

🔗 이미지 스프라이트 생성사이트
🔗 이미지 좌표확인 사이트

3. image sprite 장단점

장점

1. 이미지를 다운받기 위한 서버 요청을 단 몇 번으로 줄일 수 있어 웹페이지 로딩 시간을 줄여준다.
2. 모바일 환경과 같이 한정된 자원을 사용하는 플랫폼(platform)에서는 웹 페이지의 로딩 시간을 단축해주는 효과가 있다.
3. 많은 이미지 파일을 관리하는 대신 몇 개의 스프라이트 이미지(sprite image) 파일만을 관리하면 되므로 매우 간편하다.
4. hover 시 나타나는 이미지의 경우, 이미 스프라이트 이미지를 로딩했기에 로딩 지연이 없다.

단점

1. 이미지 용량이 클 시 로딩이 매우 오래걸리는 문제점이 있다.
2. 해당 이미지의 정확한 position을 알아야한다.
3. 스프라이트 이미지 내의 이미지를 변경할 시 단일파일보다 번거롭다.

🌠