합리적으로 많은 트래픽이있는 웹 사이트에서 작업 중이며 디자인에서 이미지로드 수를 줄이기 위해 CSS 스프라이트를 사용하고 있습니다.웹 응용 프로그램에서 CSS Sprite를 사용하면 어떤 점이 좋은가요?
전송되는 데이터의 양을 줄이는 것 외에 CSS 스프라이트를 사용하면 어떤 이점이 있습니까? 얼마나 많은 공간을 정말로 구합니까? 스프라이트를 사용하는 것이 웹 사이트에 가치있는 임계 값이 있습니까?
업데이트 : 답장을 보내 주셔서 감사합니다. 그들은 모두 매우 신중하게 생각하고 당신의 요점을 확인하는 좋은 출처를 제시합니다. 이제는 내 사이트 디자인에서 CSS 스프라이트 사용에 대한 정보에 입각 한 결정을 내릴 수 있습니다.
문제는이 저장할 수있는 대역폭의 양에 대해 일반적으로하지 않습니다. 웹 페이지를 렌더링하는 데 필요한 HTTP 요청 수를 낮추는 것에 대해서는 에 관한 것입니다.
고려 :
작은 내용을 얻기 위해 많은 요청을 할 때 시간이 오래 걸리는 이유는 무엇입니까? (이미지, 아이콘 등)은 서버로의 다중 왕복 이동입니다.이 시간을 사용하여 데이터를 다운로드하는 대신 요청을 기다리고 서버가 응답하는 데 드는 시간을 보냅니다.
우리는 요청 수를 최소화 할 수 있으면 서버에 대한 이동 횟수를 최소화하고 고속 연결을 더 잘 사용합니다. (더 작은 파일을 기다리는 대신 더 큰 파일을 다운로드합니다).
그래서 CSS 스프라이트가 사용됩니다.
는 더 많은 정보를 위해, 당신은 예를 들어, 한 번 봐 가질 수 있습니다 (이미 언급 한 바와 같이) HTTP 요청을 줄일뿐만 아니라 CSS Sprites: Image Slicing’s Kiss of Death
더 적은 HTTP 요청 = 전반적인 빠른 로딩. 야후와 공동. 이 기술을 사용하면 대역폭을 가진의 을 절약 할 수있는 사용자의 양을 상상할 수 있습니다. 50 개의 별도 이미지를 상상해보십시오. 50 개의 별도 HTTP 요청이 모든 이미지를 포함하는 하나의 CSS 스프라이트를 갖는 것과는 대조적으로 49 개의 HTTP 요청을 저장하고 사이트의 모든 사용자에 대해 곱합니다.
실제로 스프라이트는 전송되는 데이터의 양을 줄이기 위해 사용되지 않지만 대부분의 경우 전송 된 데이터의 양이 약간 증가하지만 서버에서 수행되는 요청의 양은 줄어 듭니다.
브라우저의 HTTP 요청은 전통적으로 순서대로 수행됩니다. 즉, 하나의 요청은 이전 요청이 완료 될 때까지 시작되지 않습니다. 또한 요청을하기 위해 연결을 열면 비용이 많이 듭니다. 서버에서 이루어진 요청의 양을 제한함으로써, 요소가로드하는 속도가 증가하고 있습니다.
요청 양을 제한하여 전체 페이지로드의 성능을 향상시키는 것 외에도 이미지 스프라이트는 이미지를 동적으로 스왑 할 수 있습니다 (예 : 호버의 nav 항목 배경 이미지 변경). 당신은 src 대신에 x, y를 변경합니다.
그래서 각 클라이언트에서 잠재적 인로드가 향상 되었기 때문에이를 사용하는 데 필요한 기준이 무엇인지에 대해 대답하겠습니다.
야후는 CSS 스프라이트에 대해 가장 좋은 의견을 갖고 있다고 생각합니다. 게다가, 전체 페이지 가치가 읽기는 다음과 같습니다
는, CSS 스프라이트는 자바 스크립트에 의존하지 않습니다. 이것은 몇 가지 다른 장점을 제공합니다 유지하기 위해
style를 통해 인라인 코딩 할 수:hover pseudoclass 어떤 선택에 적용 할 수있는, 또는 앵커로 포장 할 수있는 선택은 해킹 DOM을 회피하지 않은 경우 (단지 img들)에서,하지만 당신은 할 수 X와 Y 값을 주위에 밀면 멋진 애니메이션 효과를 얻을 수 있습니다. 따라서 다양한 상태 (예 : keypress 또는 onmouseclick)를 쉽게 애니메이션으로 만들 수 있습니다.
뿐만 아니라 몇 가지 흥미로운 그래픽 제작 부작용이 있습니다 직접 HTML에서 버튼 등의 레이아웃 (PSD 콤프 덜 필요)
저를 혼란에 빠뜨린 한가지 ... 우리가 더 큰 이미지를 가지고 있다면 스프라이트 시트를 말하십시오. 우리는 스프라이트 시트를 몇 번이나 반복해서 눌러야합니다. 또는 한 번 다운로드되는 동안 스프라이트 시트를 저장할 수있는 방법이 있습니까? 그렇다면 자습서 나 링크 또는 plunkr을 제안하십시오. 감사 –