이미지 스프라이트 시트 여러 이미지를 하나의 스프라이트 시트로 결합하여 열과 간격을 구성할 수 있습니다.
이미지 스프라이트 시트
여러 이미지를 하나의 스프라이트 시트로 결합하여 열과 간격을 구성할 수 있습니다.
이미지 업로드
스프라이트 시트에 사용할 여러 개의 이미지(아이콘, 프레임)을 드롭하거나 선택하세요.
레이아웃 구성
스프라이트 사이의 열 수와 패딩을 설정하세요.
생성 및 다운로드
스프라이트 시트 이미지를 생성하고 CSS 좌표를 복사하세요.
What Is 이미지 스프라이트 시트?
여러 개의 이미지를 하나의 구성 이미지로 결합하여 격자에 맞춰 배열하고, 각 스프라이트의 CSS 배경 위치 좌표를 함께 제공하는 스프라이트 시트 생성기입니다. 웹 성능 최적화, 게임 스프라이트 애니메이션, 아이콘 세트 등에 필수적인 도구입니다. 개별 이미지를 업로드하여 열 수와 패딩을 설정하면, 도구는 합성 PNG 및 CSS 코드 조각을 모두 생성합니다.
Why Use 이미지 스프라이트 시트?
-
스프라이트 시트 이미지 + CSS 좌표 생성
-
열과 패딩을 구성할 수 있음
-
웹 성능 개선을 위한 HTTP 요청 감소
-
아이콘 세트와 게임 스프라이트에 적합
Common Use Cases
웹 성능
HTTP 요청을 줄이기 위해 아이콘들을 하나의 스프라이트 시트로 결합하세요.
게임 개발
개별 프레임 이미지에서 애니메이션 스프라이트 시트를 생성하세요.
아이콘 세트
여러 개의 아이콘을 하나의 효율적인 스프라이트 이미지로 패키지하세요.
CSS 스프라이트
사용할 수 있는 CSS 코드와 함께 최적화된 스프라이트 시트를 생성하세요.
Technical Guide
이미지는 구성 가능한 열로 격자에 로드되어 배열됩니다. 행 수는 ceil(이미지 수/열)으로 계산됩니다. 캔버스 크기는 최대 열 너비와 총 행 높이 및 패딩에서 계산됩니다. 각 이미지는 계산된 격자 위치에 그려집니다. CSS 좌표는 각 스프라이트의 음수 배경 위치 값으로 생성됩니다.
Tips & Best Practices
-
1깨끗한 격자를 위해 일관된 이미지 크기를 사용하세요
-
2쓰레기 공간을 줄이기 위해 패딩을 1-2px로 유지하세요
-
3CSS 클래스 이름을 더 잘 만들기 위해 파일명을 설명적으로命名하세요
-
4게임 엔진 호환성을 위해 2의 거듭제곱을 사용하세요
Related Tools
Frequently Asked Questions
Q 어떤 이미지 크기가 가장 좋나요?
Q CSS를 생성하나요?
Q 몇 개의 이미지를 결합할 수 있나요?
Q 레티나 디스플레이는 어떻가요?
Q 게임 스프라이트에 사용할 수 있나요?
About This Tool
이미지 스프라이트 시트 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.