CSS 최적화

문제

Digg와 Google이 GIF 헤더 이미지에서 일종의 CSS 최적화를 사용하고 있음을 알았습니다. 예를 들어 Digg는이 이미지를 사용합니다.

그들은 왜이 기술을 사용하고 있으며 내 사이트에서 그것을 수행하는 방법은 무엇입니까?

해결책

CSS 스프라이트 : 이미지 슬라이싱의 죽음의 키스 :
목록

이 기술의 목적은 모든 이미지를 결합하여 HTTP 요청을 줄이는 것입니다.

다른 팁

이것을 CSS 스프라이트라고합니다. 서버 요청 수를 줄이는 데 사용됩니다.

그들에 대한이 멋진 기사를 확인하십시오. http://www.alistapart.com/articles/sprites/

나는 이것들이 부름 받았다고 믿는다 ~~스플 라이스~~ (또는 그것은입니다 스프라이트); 기본적으로 전체 이미지를 한 번에로드하고 CSS에 그 일부만 표시하도록 지시합니다. 그렇게하면 많은 이미지와 많은 이미지를로드하지 않아도됩니다.

연속 이미지가 즉시로드되므로 페이지에 더 많은 응답 성을 추가합니다.

Weichsel이 언급했듯이 기사를 확인하십시오. 목록.

그들은 해당 기술을 사용하므로 브라우저가 여러 이미지를 다운로드하기 위해 다양한 연결을 만드는 브라우저 대신 하나의 이미지가 다운로드됩니다.

그런 다음 "배경 위치"및 "폭"과 같은 CSS 속성의 조합을 사용하여 이미지를 CSS 배경 이미지로 "자르기"할 수 있습니다.

내가 글을 쓰는 동안 다른 사람들이 게시하는 링크는 아마도 이미지를 자르는 좋은 기술이있을 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow