도구 11

CSS 스프라이트 생성기

여러 작은 이미지를 하나의 PNG로 합치고 background-position CSS 코드까지 자동 생성.

옵션

왜 스프라이트인가요?

1

HTTP 요청 감소

아이콘 30개를 30번 요청하는 대신 한 번에 받아 페이지 로딩 속도 개선.

2

캐싱 효율

한 파일이라 브라우저 캐시 효율이 더 좋고, 변경 시에도 한 파일만 갱신.

3

CSS만으로 표시

background-position만 바꾸면 다른 아이콘 표시. JS 없이도 가능.

4

SVG도 고려

아이콘이 단순한 도형이면 인라인 SVG가 더 가벼울 수 있어요.