이미지 크기가 없으면 사이트 속도에 영향을받습니다.

Question

응답 성있는 웹 사이트를 디자인하고 있습니다. 반응 형 웹 디자인에서는 "img"태그에서 이미지 너비와 높이를 지정할 수 없습니다. 그러나 너비와 높이가 없으면 사이트가 매우 느립니다. 이것에 대한 해결책이 있습니까?

Answer 1

대형 화면 용과 작은 화면 용 (축소판) 이미지를 복제 할 수 있습니다.

<img src="large.jpg" alt="images alt for big screens" class="show-for-large"/> 
<img src="small.jpg" alt="images alt for small screens" class="show-for-small"/> 

CSS는 :

.show-for-large {display:block;} 
.show-for-small {display:none;} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    .show-for-large {display:none;} 
    .show-for-small {display:block;} 
} 

그리고 당신은 표시 할 수 없음 대형 화면 및 디스플레이를 할 수있는 응답에있는 작은 IMG : 블록;

브라우저는 디스플레이 없음으로 요소를 렌더링하지 않으므로 트릭이 될 수 있습니다.