브라우저가 CSS 파일에서 이미지를 더 빨리 다운로드하도록 권장하려면 어떻게해야합니까?

CSS를 사용하여 많은 이미지를 (배경으로 <div>) 배치하고 종종이 방법으로 매우 느리게로드되는 것을 발견했습니다. 그들은 마지막으로로드하는 것 같습니다. 작은 아이콘 이미지라도 이런 방식으로 표시 되려면 시간이 걸립니다. 브라우저에게 이미지의 우선 순위를 알리는 방법이 있습니까? 아니면 CSS 파일로 이미지를 미리 다운로드하여 더 일찍 렌더링하도록 하시겠습니까?

CSS는 컨텐츠가 아닌 스타일링을위한 것입니다. 브라우저는 스타일을 추가하기 전에 컨텐츠를 올바르게 표시하려고 시도하므로 스타일 시트의 이미지가 일반적으로 마지막에 다운로드되는 이유가 있습니다. 콘텐츠에 이미지가 중요한 경우 표준 HTML <IMG>태그 를 통해 이미지 를 추가하십시오 .

사용 절대 URI의 스타일 시트에서 와 숨겨진에 IMG 태그에서 이미지를 추가 <div>이것이 당신이 모든 페이지에서 동일한 이미지를 사용하고있는 가정 (페이지에, 이상적으로 바닥 글에 그들은 모두 특정 페이지 호출에로드 및 캐시하고 그래서 ).

페이지의 이미지가 우선권을 가지며 이미지가 캐시되면 후속 페이지 요청시 즉시 렌더링됩니다.

CSS 자체에 이미지를 포함하기 위해 데이터 URI 유형 ( 정보 는 http://en.wikipedia.org/wiki/Data_Uri 참조)을 지원하는 브라우저의 경우

그러나 몇 가지 단점이 있습니다.

• CSS가 정기적으로 변경되지 않는 한 이것은 별 문제가되지 않지만 CSS가 캐시 될 때 데이터가 다시로드됩니다.
• CSS의 상속이 부족하여 동일한 그래픽을 여러 번 포함하거나 문서에 사용 된 클래스를 변경해야 할 경우 시간이 낭비 될 수 있습니다 (대역폭 낭비).
• 이러한 방식으로 사용하면 이미지가 base64로 인코딩되므로 더 많은 대역폭을 사용합니다 (데이터를 압축하여 전송하는 경우 대역폭 문제는 훨씬 덜 중요 함).
• 데이터 URI를 지원하지 않는 브라우저에 대체 스타일을 제공해야합니다.이 중 일부는 흔하지 않습니다 (예 : IE6 및 IE7).

현재로서는 먼저 다운로드 할 파일을 지정할 수있는 방법이 없습니다. 참고로, 배경 이미지로 CSS 파일에 지정된 이미지 는 브라우저에서 컨텐츠가 아니므로 우선 순위가 낮으므로 빨리로드하려는 중요한 이미지에 이미지를 사용하지 않기 때문에 마지막으로 다운로드 됩니다.

특히 아이콘에 CSS 스프라이트를 사용하십시오 .

이미지를 가능한 작게 만드십시오. smush.it 를 사용 하여 불필요한 바이트를 제거 할 수 있습니다 .