CSS 스프라이트 이미지 및 반응 형 디자인. 전체 크기와 반응 형 크기를 모두로드합니까?

Question

나는 이미지를 최적화하고 내 웹 사이트에 대한 내 서버 요청 수를 줄이는 중이므로 이미지 CSS 스프라이트를 만들어 이미지 수를 줄입니다.

예상대로 대부분의 이미지는 사이트 디자인의 Tablet/Mobile 레이아웃에서 더 작습니다.

이 때문에 필자는 스프라이트 내에 포함 된 아이콘 및 이미지의 모바일/태블릿 크기를 위해 이미지 스프라이트를 만들고 @media 쿼리를 사용하여 이미지를 전환 할 계획이므로 실제로 필요한 것보다 훨씬 큰 이미지를 다운로드하지 않을 예정입니다. 모바일 용.

내 질문은 아마도 매우 간단합니다. @media 쿼리 외부에서 참조 된 데스크톱 스프라이트 이미지와 @media 쿼리의 모바일/태블릿 버전이 있습니다. 누군가 모바일에서 웹 사이트에 액세스하는 경우 데스크탑 (내 모바일 @ 미디어 쿼리로 인해 필요하지 않음)과 스프라이트의 모바일/태블릿 버전 모두를 요청할 수 있습니까? 또는 @media 쿼리에 필요한 크기 인 모바일/태블릿 버전 만 요청할만큼 똑똑합니까?

미리 감사드립니다.

Answer 1

예, 두 가지 이미지 자산을 모두 다운로드합니다. 이것을 확인하는 가장 쉬운 방법은 개발자 도구를 열어 이미지 요청에 대한 네트워크 패널을 확인하는 것입니다. 모바일에서 데스크톱 애셋과 모바일 애셋에 요청할 것입니다.

미디어 애널리틱스를 확장하면 데스크톱 애셋을 다운로드하는 데스크톱과 모바일 애셋을 다운로드 할 모바일을 타겟팅 할 수 있습니다.