CSS 이미지의 스프라이트 높이 제한?

Question

스프라이트를 만들고 그 높이가 4000px에 달합니다. 그래픽 디자인 커뮤니티에서 사용되는 최대 스프라이트 높이의 일반적인 크기가 있습니까?

Answer 1

아주 적은 수의 스프라이트 만 사용하거나 대부분의 이미지가 공백 인 경우에도 브라우저는 전체 이미지를 압축 해제 (그리고 메모리에 유지)해야합니다. 데스크톱 클라이언트의 경우 너무 많은 메모리를 사용하여 좋은 시민이 될 기회를 놓쳤습니다 (브라우저는 이미 많은 메모리를 낭비하고 있습니다). 일부 모바일 클라이언트 (예 : degzipping 후 25k가 넘는 파일의 경우 IPhone)의 경우 문제가 될 수 있으며 이미지가 전혀 캐시되지 않으므로 < 개의 파일 2 개와 두 개 이상의 HTTP 요청 하나를 갖는 것이 더 나을 수 있습니다 > 25k 파일 및 단일 요청이 캐시되지 않습니다.

마지막 문제인 PNG 압축은 라인 기반이므로 큰 이미지보다 넓은 이미지를 갖는 데 드는 오버 헤드가 적습니다 (이론적으로 너무 심할 수도 있지만 이론적으로 나쁜 경우도 있습니다. 한 줄에 하나의 예측 필터 유형 만있을 수 있기 때문에).

오, 그리고 너무 많은 스프라이트로 인해 동일한 이미지에서 지나치게 다른 색상으로 끝날 수 있으며 적절한 팔레트 이미지의 기회를 놓치게됩니다. 이 모든 조합을 테스트하는 것은 지루하지만, 가능한 경우 그라디언트의 주 색상으로 스프라이트를 그룹화하는 것은 좋은 발견 적 방법입니다 (그라디언트/흐림 효과는 다양한 색상이 필요하기 때문에).

Answer 2

스프라이트가 물리적으로 얼마나 큰지 (너비 x 높이)에 집중해야한다고 생각하지 않지만 스프라이트 파일 크기가 얼마나 큰지 생각하고 스프라이트를 여러 스프라이트로 분할 할 가치가 있는지 스스로에게 질문하십시오. .

우리는 색상에 따라 스프라이트를 분할하는 경우가 많으므로 스프라이트는 주로 파란색 또는 빨간색 또는 노란색입니다. 그렇게하면 이미지 파일 크기를 줄이면서 부드러운 그라디언트와 전반적인 이미지 품질을 얻을 수 있습니다.