CSS 스프라이트는 언제 너무 큽니까?
https://stackoverflow.com/questions/859857
-
21-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
페이지의 그래픽 요소에 대해 서버에 HTTP 요청을 줄이기위한 스프라이트의 주요 목적입니까? 아니면 가능한 한 많은 스프라이트에 많은 요소를 시도하고 싶습니까?
내가 묻는 것은 : 스프라이트가 언제 너무 큽니까?
해결책
페이지를 사용하기 전에 사용자가 파일을 다운로드 할 때까지 기다려야 할 때 너무 큽니다.
다른 팁
Sprite 이미지 유형에 PNG를 사용하는 경우 각 행이 일반적으로 다른 행과 독립적으로 압축 (디플레이드)임을 기억하는 것이 도움이됩니다.
따라서 스프라이트/이미지 크기의 수의 균형을 돕기 위해 수직이 아닌 수평 적으로 서로 옆에 비슷한 스프라이트를 장착하여 압축을 활용하십시오.
PNG는 또한 델타를 예측 값 (이전 행과 이전의 픽셀에 따라 같은 행에)과 실제 값 사이에 저장하는 "예측 변수"와 실제 값을 지원합니다.
이미지에 가장 적합한 설정을 찾기 위해 다른 PNG 예측기 압축 설정을 설정하거나 자동으로 최적화 할 수있는 좋은 이미지 편집기를 찾으십시오.
페이지의 그래픽 요소에 대해 서버에 HTTP 요청을 줄이기위한 스프라이트의 주요 목적입니까?
예, 작은 이미지에 대한 많은 요청을 피하고 싶습니다. 하나의 스프라이트로 결합하면 하나의 HTTP 요청으로 가져올 수 있습니다.
스프라이트가 언제 너무 큽니까?
실제로보고 싶은 모든 요청의 총계입니다. 스프라이트가 너무 커지는 유일한 방법은 부품의 합계 (정확히 Sprite입니다. ~이다) 시작하기에는 너무 큽니다.
스프라이트와 관련 하여이 블로그 게시물 아래의 메모리 사용에 대한 토론을 반드시 확인해야합니다. http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/
나의 충고:
- 스프라이트 아이콘 행, 버튼 및 반복 이미지 만 (예 : 둥근 코너 그라디언트 박스).
- 다른 모든 것을 내버려 두십시오
- 이미지를 500x500 또는 100KB 아래로 유지하고 최대한 사용하지 않은 공간을 남겨 두십시오. 상황에 따라 .png 또는 .gif를 사용하십시오
큰 문제없이 모든 작은 정적 디자인 요소를 하나의 마스터 이미지에 포장 할 수 있습니다.
물론 웹 사이트에 10 메가 픽셀 사진이 있다면 함께 포장하는 것은 광기가 될 것입니다.
CSS 스프라이트는 필수 UI 요소 외에는 아무것도 포함시킬 때 너무 큽니다. 이들은 압축이 품질을 너무 손상시키지 않는 아이콘이나 로고와 같은 작은 보충 이미지입니다. 모든 이미지가 독립적으로로드되었을 것이기 때문에 개별적으로 요청하는 것보다 더 나쁘지 않습니다. 로드하는 데 너무 오래 걸리면 문제는 스프라이트에 의존하지 않지만 이미지를 제대로 압축 할 때는 문제가 있습니다.
예, 주요 목적은 요청을 줄이는 것입니다 (및 따라서로드 시간). 또 다른 장점은 하나의 이미지를 올바르게 캐시 할 것을 걱정하면됩니다. 팁 : 압축이 큰 흰색 ( "빈") 영역을 가장 잘 처리하므로 PNG 이미지를 사용하십시오.
Google지도는 [256x256] PX 이미지를 사용합니다.
