沒有圖片尺寸影響網站速度

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的大屏幕和響應能力，你可以做顯示：塊;

瀏覽器不呈現顯示無任何元素，所以這可能是一個竅門。