CSS Sprites 브라우저 렌더링

Question

CSS 스프라이트 이미지는 요청 양을 줄이는 데 효과적이지만 큰 이미지를 배경으로 사용하여 여러 요소로 페이지를 렌더링하는 브라우저의 성능은 어떻습니까?

Answer 1

오래된 브라우저 (예 : IE6/IE7)가 장착 된 더 느린 컴퓨터에서는 매우 큰 이미지를 한 페이지에 여러 번 사용하면 성능이 크게 떨어질 수 있습니다. 호버 (hover) 상태에 대해 스프라이트를 사용하는 경우 더욱 심각합니다.

귀하의 모든 스프라이트를 하나의 거대한 이미지로 밀어 넣으려는 유혹을 완화시켜야합니다 - 어떤 요소가 웹 사이트/웹 애플리케이션 UI의 일부인지 생각하고 하나의 스프라이트 파일에 넣으십시오 (모든 정보는 검색하는 동안 항상 표시됩니다).). 그런 다음 나머지 스프라이트를 웹 사이트 섹션 별 이미지로 그룹화하고 필요에 따라 사용하십시오. 단점은 약간의로드 시간 (HTTP 요청 추가)이지만 페이지를 보거나 스크롤하는 동안의 사용자 경험은 훨씬 높습니다.

Answer 2

Google의 YouTube 경험에 비추어 볼 때 큰 문제는 없습니다.

브라우저는 이미지를 메모리에 캐시 한 다음이 이미지가 필요한 모든 위치에서 출력을 렌더링하기를 바랍니다.

Answer 3

균형을 잡아야합니다. 1000 개의 스프라이트를 포함 할 이미지가 있다면 CSS가 커질 것입니다. 또한 어쨌든 동일한 페이지에서 모든 스프라이트를 사용하게 될 가능성이 매우 낮습니다.

Answer 4

이미지를 하나 이상의 복합 스프라이트로 통합하고 CSS를 사용하여 스프라이트의 일부를 웹 페이지에 선택적으로 표시하여 많은 양의 HTTP 요청을 저장할 수 있습니다. 주요 브라우저가 CSS 배경 및 위치 지정을 지원할만큼 발전 했으므로 더 많은 사이트에서이 성능 기술을 채택하고 있습니다. 실제로 웹에서 가장 바쁜 사이트 중 일부는 HTTP 요청을 저장하기 위해 CSS 스프라이트를 사용합니다.

수백만 명의 사용자가있는 Yahoo! AOL은 사용자 경험을 향상시키기 위해 할 수있는 모든 일을합니다. AOL.com과 Yahoo.com은 모두 복잡한 인터페이스에 대한 수많은 HTTP 요청을 저장하기 위해 CSS 스프라이트를 사용합니다. 두 사이트 모두 CSS 스프라이트를 사용하여 서비스 디렉토리 내에 아이콘을 선택적으로 표시하고 Yahoo! 다른 곳에서도 스프라이트를 사용합니다.

CSS 스프라이트의 또 다른 이점은 이미지 사이에 공백을 추가 했음에도 불구하고 결합 된 이미지가 개별 이미지보다 파일 크기가 작은 경우가 많다는 것입니다. 스프라이트의 크기가 작을수록 별도의 이미지가 필요로하는 여러 색상 표 및 서식 정보의 오버 헤드가 줄어들 기 때문입니다. 접근성과 유용성을 극대화하기 위해 CSS 스프라이트는 아이콘이나 장식 효과에 가장 적합합니다.