원문: CSS Sprite: 할 것인가 말 것인가?
번역: 스프라이트를 할 것인지, 아니면 하지 않을 것인지
면책조항: 이 기사에서 언급된 CSS Sprites는 CSS Sprites 입니다. 이 문구는 고정된 중국어 번역이 없었습니다. 일부 사람들은 이를 CSS Sprites라고 부르기 시작했습니다. 우리는 앞으로도 계속 그렇게 할 것입니다. CSS Sprites라고 불릴 것입니다. ——선페이( 보컬 )
CSS Sprite는 한동안 사용되어 왔으며 웹 사이트를 더 빠르게 만드는 방법으로 떠오르고 있습니다. Steve Souders는 방금 Velocity '09에서 SpriteMe!를 발표했습니다 (토론 - 캔버스와 toDataURL을 사용하고 즉석에서 스프라이트를 생성할 수 있는데 왜 CSS Sprite Generator나 다른 서버 기반 도구를 사용합니까?). 그러나 CSS 스프라이트에 대한 몇 가지 오해가 있는데, 가장 큰 이유는 단점이 없다는 것입니다.
CSS Sprite의 기본 원칙은 웹 사이트에 사용되는 일부 이미지를 단일 이미지로 통합하여 웹 사이트에 대한 HTTP 요청 수를 줄이는 것입니다. 이미지는 CSS 배경 및 배경 위치 속성을 사용하여 렌더링됩니다. 이는 태그가 더 복잡해지고 이미지가 <img> 태그가 아닌 CSS에 정의된다는 점을 언급할 가치가 있습니다.
CSS Sprite의 가장 큰 문제는 메모리 사용량입니다. 스프라이트 이미지를 매우 주의 깊게 구성하지 않으면 쓸데없는 공백이 많이 발생하게 됩니다. 제가 가장 좋아하는 예는 이 이미지가 스프라이트로 사용되는 WHIT TV 웹사이트의 예입니다. 이는 1299×15,000픽셀 PNG 이미지입니다. 또한 매우 잘 압축되어 있습니다. 실제 다운로드 크기는 약 26K에 불과하지만 브라우저는 압축된 이미지 데이터를 렌더링하지 않습니다. 이 이미지를 다운로드하고 압축을 풀면 약 75MB(1299 * 15000 * 4)의 메모리를 차지하게 됩니다. 이 이미지가 알파 투명도를 사용하지 않으면 1299 * 15000 * 3으로 최적화되지만 렌더링 속도가 저하됩니다. 그럼에도 불구하고 우리는 55MB에 대해 이야기하고 있습니다. 이 사진의 대부분은 실제로 비어 있으며 아무 것도 없고 유용한 내용도 없습니다. WHIT 홈페이지를 로드하는 것만으로도 해당 이미지 하나 때문에 브라우저의 메모리 사용량이 최소 75MB 이상으로 증가합니다. ( PS: 안타깝게도 최근 웹사이트가 개정되어 기사에 언급된 사진이 더 이상 존재하지 않습니다 .)
웹사이트에 유리한 올바른 절충안은 존재하지 않습니다.
또 다른(중요하지는 않지만) 단점은 CSS Sprite를 사용하는 페이지가 일부 브라우저에서 제공하는 전체 페이지 확대/축소 기능을 사용하여 크기가 조정되는 경우 브라우저가 이러한 이미지 가장자리의 동작을 수정하기 위해 몇 가지 추가 작업을 수행해야 한다는 것입니다. 기본적으로 , 이는 Sprite의 인접한 그림이 "노출"되는 것을 방지하는 것입니다. 이는 작은 이미지에는 문제가 되지 않지만 큰 이미지에는 성능 저하가 발생합니다.
CSS 스프라이트의 명확한 이점을 보여주는 몇 가지 예가 있습니다. 주요 예는 동일한 크기의 이미지 배치를 단일 파일로 병합하는 것입니다. 예를 들어, 사이트의 많은 항목을 식별하는 데 사용되는 일련의 16×16 아이콘 또는 카테고리 헤더 등으로 사용되는 몇 개의 32×32 아이콘입니다. 하지만 크기가 크게 다른 이미지, 특히 넓고 짧은 이미지 옆에 크고 얇은 이미지를 결합하는 것은 결코 좋은 생각이 아닙니다.
그러나 CSS Sprite는 페이지 로드 시간을 향상시킵니다(적어도 초기 페이지 로드 시 - 후속 페이지 로드 시 브라우저가 이미지를 캐시함). 대체할 수 있는 것이 있나요? 아쉽게도 아직 대안은 없습니다. 많은 브라우저가 오프라인 매니페스트를 지원하기 시작했으며 이를 확장하여 리소스 목록과 해당 URL이 포함된 파일(예: jar/zip 파일)을 다운로드할 수 있습니다. 하지만 그러한 접근 방식은 한동안 보이지 않을 것입니다…
따라서 CSS Sprite 사용 여부를 결정할 때 초기 페이지 로드 성능 외에도 많은 요소가 있다는 점에 유의하세요. 일반적으로 CSS 스프라이트의 상당 부분에 실제 이미지 콘텐츠가 포함되어 있지 않으면 그에 따라 사용하지 않는 것이 좋습니다. 마찬가지로, 페이지 로드 속도를 유지하면서 메모리 버그와 Sprite 성능 영향을 방지하도록 주의하면서 향후 발생할 수 있는 문제를 주시하세요.
기타 CSS 스프라이트 단점
다음은 이 기사의 댓글에서 일부 네티즌이 언급한 CSS Sprite의 몇 가지 단점입니다.
사용 중에 다른 CSS Sprite에서 결함을 발견하면 자유롭게 언급해 주세요.