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

작은 이미지 여럿(아이콘, UI 상태, 캐릭터 프레임)을 내려받을 수 있는 PNG 하나로 합치고, 각각을 background-position으로 배치하는 CSS 블록을 내보냅니다. 아이콘 글꼴이나 SVG 스프라이트, 제대로 된 스프라이트 시트 파이프라인을 쓸 수 없을 때 HTTP 요청 수를 줄여 줍니다. 배치는 가로 띠, 세로 띠, 고정 열 격자 중에서 고르며, 시트 크기는 각 행이나 열에서 가장 큰 항목에 맞춰집니다. 파일은 전부 캔버스로 클라이언트에서 처리되어 아이콘이 브라우저를 떠나지 않습니다.

요청 수 논리는 예전만큼 강하지 않습니다. 스프라이트 시트는 HTTP/1.1에 대한 대응이었습니다. 그때는 브라우저가 호스트당 여섯 개쯤 연결을 열었고 파일이 하나 늘 때마다 줄을 서야 했습니다. HTTP/2는 요청을 하나의 연결에 다중화하므로 작은 아이콘 쉰 개의 비용이 예전보다 훨씬 낮고, 대신 시트 자체의 단점이 앞서기 시작합니다. 아이콘 하나가 바뀌면 캐시된 파일 전체가 무효가 되고, 아이콘 세 개만 쓰는 페이지도 쉰 개를 모두 내려받습니다.

시트가 여전히 이기는 곳은 원래부터 가장 잘하던 경우, 즉 작은 이미지 여럿이 한꺼번에 다 필요한 상황입니다. 캐릭터 애니메이션, 호버할 때 바뀌는 UI 상태 묶음, 함께 보여 주는 국기 격자는 쉰 번이 아니라 한 번의 디코딩으로 올라오고, PNG 하나가 PNG 쉰 개보다 잘 압축됩니다. 공유하는 팔레트와 헤더 값을 한 번만 치르기 때문입니다.

CSS가 위치 기반이라 특정한 방식으로 부서지기 쉽습니다. 규칙마다 고정된 배치 안의 좌표를 적어 두므로, 아이콘 하나를 넣거나 빼고 시트를 다시 만들면 그 뒤의 모든 위치가 밀리고 그 아래 모든 규칙이 무효가 됩니다. 생성된 CSS와 생성된 PNG를 하나의 산출물로 묶어 함께 다시 만드십시오. 둘 중 하나를 손으로 고치는 것이 서로 어긋나기 시작하는 지점입니다.

아이콘에 한해서는 오늘날 대개 인라인 SVG 스프라이트가 더 나은 답입니다. 어떤 크기로도 확대되고 currentColor를 물려받으며 인스턴스마다 스타일을 줄 수 있는데, 래스터 시트는 그중 무엇도 못 합니다. 이 툴은 이미지가 선화가 아니라 사진이나 미리 렌더링한 프레임일 때 집으십시오.