스프라이트 시트 생성기
여러 이미지를 하나의 스프라이트 시트로 합치고 CSS 코드를 생성합니다. 브라우저에서 처리됩니다.
이미지를 드래그하거나 클릭하여 업로드 (여러 개 선택 가능)
PNG, JPEG, WebP, SVG 지원
스프라이트 시트 생성기란?
무료 온라인 스프라이트 시트 도구로 여러 이미지를 하나의 스프라이트 시트로 합칠 수 있습니다. CSS background-position 코드와 JSON 메타데이터를 자동으로 생성합니다.
주요 기능
- 여러 이미지를 하나의 스프라이트 시트로 합치기
- 열 수, 간격, 스프라이트 크기 조절
- CSS 클래스 정의 자동 생성
- JSON 메타데이터 (프레임 위치, 크기)
- PNG 스프라이트 시트 + CSS 파일 다운로드
- 투명 또는 단색 배경 선택
- 100% 클라이언트 처리 -- 이미지가 서버로 전송되지 않습니다
스프라이트 시트 생성기 사용 가이드
여러 이미지를 하나의 스프라이트 시트로 합치고, CSS background-position 코드와 JSON 메타데이터를 자동으로 생성합니다. HTTP 요청을 줄여 웹 성능을 최적화하세요. 모든 처리가 브라우저에서 이루어집니다.
스프라이트 시트란?
스프라이트 시트는 여러 개의 작은 이미지를 하나의 큰 이미지로 합친 것입니다. 웹에서 아이콘, 버튼, UI 요소 등을 하나의 이미지로 로드하면 HTTP 요청이 줄어들어 페이지 로딩 속도가 크게 향상됩니다.
CSS 스프라이트 사용법
CSS background-image로 스프라이트 시트를 로드하고, background-position으로 각 스프라이트의 위치를 지정합니다. 이 도구가 자동으로 정확한 좌표를 계산하여 CSS 코드를 생성해 줍니다.
웹 성능 최적화
50개의 아이콘을 개별 파일로 로드하면 50번의 HTTP 요청이 필요하지만, 스프라이트 시트로 합치면 단 1번의 요청으로 해결됩니다. 특히 HTTP/1.1에서 성능 향상이 크며, HTTP/2에서도 여전히 효과적입니다.
FAQ
Related Tools
🎨Color Picker
HEX, RGB, HSL converter🖼️Image Optimizer
Compress images🖼️Favicon Generator
Multi-size icon creator✏️SVG Editor
Edit & optimize SVG