이미지 대신 CSS 스프라이트가 필요하십니까?

Question

몇 가지 큰 웹 사이트의 코드를 보면 (내가 때때로하는 것처럼) 큰 웹 사이트 (YouTube와 Yahoo가 내가 본 두 사람) 중 일부가 거의 모든 것에 CSS 스프라이트를 사용하는 것으로 나타 났으며 어떤 웹 사이트도 거의 사용하지 않는 것으로 나타났습니다 태그.

일반적으로 이것은 우수 사례로 간주됩니까? Sprited 이미지를 링크하는 데 빈 이미지를 사용하여 링크를 만든 다음 alt 속성 (YouTube 로고 왼쪽 상단 모서리에는이 기술이 사용됨) 스프라이트 사용 속도와 태그 사용의 접근성이 모두 필요합니다.

링크에 사용되지 않는 이미지에 대해 스프라이트를 사용하는 것은 어떻습니까? 태그 없이는 YouTube에서 사용하는 것과 동일한 기술을 사용하고 두 가지를 모두 활용할 수 있습니까?

웹 사이트를 개발할 때 누구나 스프라이트를 광범위하게 사용합니까? 나는 당신이 그들 (더 적은 HTTP 요구와 모두)을 사용함으로써 성과 보너스를 얻는다는 것을 알고 있지만 많은 이미지가 하나의 방대한 이미지에있는 사이트를 관리하는 것은 무서운가?

Answer 1

내용물 인 이미지와 장식 이미지를 분리해야합니다.

장식 이미지 (예 : 아이콘, 그라디언트 또는 그림자)은 스프라이트 내에 넣을 수 있습니다. 브라우저가 준비가되기 전에 수행해야하는 HTTP 요청 수를 저장하므로 성능면에서 가장 우수합니다. 유지하는 것은 짜증나, 인정해야합니다. 그러나 한 이미지에 모든 아이콘을 함께 묶어 놓는 한 그 이미지는 그리 좋지 않습니다. 스프라이트 대신 데이터 uri : s를 사용하고 이미지를 CSS 파일에 포함 시키지만 가장 느린 브라우저 인 IE7에서는 잘 작동하지 않습니다. 따라서 IE7 지원이 필요한 경우 CSS 스프라이트가 여전히 최선의 방법이라고 말할 수 있습니다.

콘텐츠 이미지은 적절한 대체 텍스트가 설정된 HTML 형식이어야 보조 기술 (및 Google)이 필요한대로 콘텐츠를 읽을 수 있어야합니다.