스프라이트 시트 vs. SVG 스프라이트 vs. 아이콘 폰트?

PNG 스프라이트는 소스가 실제 래스터(게임 아트, 사진 썸네일)일 때 여전히 우세. UI 아이콘은 SVG 스프라이트(` ` + ` `) 선호 — 스케일됨, currentColor 반응. 아이콘 폰트는 이제 대부분 레거시 폴백.

투명도는 어떻게 됨?

배경 투명 유지 시 PNG는 알파로 저장(미리보기 체커보드는 투명 영역 가시화용). 흰색·검정 선택 시 시트에 베이킹.

이미지 스프라이트 시트 생성기

이미지

작은 이미지(아이콘, UI 상태, 캐릭터 프레임) 여러 개를 다운로드 가능한 PNG 한 장으로 합치고, 각각을 `background-position`으로 배치하는 CSS 블록 출력. 아이콘 폰트·SVG 스프라이트·실제 스프라이트 시트 파이프라인 옵션 없을 때 HTTP 요청 감소. 레이아웃: 가로 스트립, 세로 스트립, 고정 컬럼 그리드; 시트는 각 행·열 최대 항목에 맞춰 사이즈. 파일 전부 canvas로 클라이언트 측 처리 — 아이콘이 브라우저 밖으로 안 나감.

—

사용법

이미지 드롭 또는 선택. OS가 넘긴 순서대로 표시.
레이아웃 선택: 가로/세로 스트립이 가장 단순, 그리드가 더 조밀. 번짐 방지엔 패딩 설정.
PNG 다운로드, CSS 복사, 함께 배포 — CSS 프리픽스에 넣은 클래스명 일치시켜.

자주 묻는 질문

스프라이트 시트 vs. SVG 스프라이트 vs. 아이콘 폰트?: PNG 스프라이트는 소스가 실제 래스터(게임 아트, 사진 썸네일)일 때 여전히 우세. UI 아이콘은 SVG 스프라이트(`<symbol>` + `<use>`) 선호 — 스케일됨, currentColor 반응. 아이콘 폰트는 이제 대부분 레거시 폴백.
투명도는 어떻게 됨?: 배경 투명 유지 시 PNG는 알파로 저장(미리보기 체커보드는 투명 영역 가시화용). 흰색·검정 선택 시 시트에 베이킹.

이미지 스프라이트 시트 생성기

사용법

자주 묻는 질문

관련 도구

이미지 크롭 (비율 맞춤)

이미지 회전 / 뒤집기

이미지 리사이즈

이미지 → Base64

QR 코드 생성

이미지 압축