작은 화면에서 이미지 다운로드 건너 뛰기

Question

this one 페이지에는 축제에 출연하는 아티스트의 목록이 표시됩니다. 작은 화면 크기 (예를 들어, 휴대 전화)에 아티스트 이미지는 미디어 쿼리 규칙과 숨겨진 :

@media (max-width: 480px) { 
    .artistEntry img { 
     display: none; 
    } 
} 

페이지 렌더링 속도와 페이지 콘텐츠의 양을 줄이기 위해. 그러나 AFAIK, 이미지는 여전히 다운로드되므로 페이지로드 시간은 소형 장치에서 매우 느립니다. 이미지가 작은 화면에 다운로드되는 것을 방지 할 수있는 방법이 있습니까?

Answer 1

배경 이미지와 관련하여 @joe의 제안을 좋아합니다. 그 사이트에 적합하지 않은 경우 다른 방법을 사용할 수도 있습니다 Adaptive Images

사용자의 뷰포트 및 설정 한 중단 점에 따라 이미지의 크기가 자동으로 조정됩니다. 그것이 당신을 위해 작동한다면, 당신은 두 세계의 최고를 얻을 ... 당신은 더 빠른 다운로드를 얻을뿐만 아니라 모바일 사용자를위한 이미지를 유지 얻을

행운을 빕니다!

UPDATE

더 상세 페이지를 보면, 난 당신이 이미지를 많이 가지고 있기 때문에 문제가 크게 생각하고 당신은 페이지의 HTML에 이미지 크기를 정의되지 않기 때문에, 브라우저는있다 모든 이미지 축소판을 다운로드하고 페이지 크기를 결정하기 전에 크기를 결정할 수 있습니다. 내 테스트에서 페이지가 렌더링되기 전에 약 12 ​​초가 걸렸습니다.

나는 두 가지 아이디어를 가지고 있습니다.

모든 아티스트 미리보기 이미지의 이미지 크기를 포함합니다. 이렇게하면 페이지 렌더링이 더 일찍 시작됩니다.

또는 기본적으로 모든 아티스트를 표시하는 대신, 당신이 동위 원소를 사용하여 무거운 물건을 들게 할 수 있는지 궁금합니다. 기본적으로 헤드 라인 아티스트 만 표시했다면이 페이지 속도가 약 50 % 빨라질 것이라고 확신합니다. 당신이 당신을하는 데 도움이 HTML

<div class="spacer" id="lineup-filter"> 
<h4>Filter Lineup by Artist</h4> 
<label class="lineup-toggle"> 
<input type="radio" name="lineup" id="all-artists">Show All Artists</label> 

<label class="lineup-toggle"> 
<input type="radio" name="lineup" checked="checked" id="headline-artists-only">Show Headline Artists Only</label> 

</div>