CSS在移動端加載圖片是一項非常關鍵的任務，因為圖片需要占用大量的帶寬資源。為了優化用戶體驗，我們需要采取一些策略來提高圖片的加載速度和質量。

img{
max-width: 100%;
height: auto;
}

我們通常使用一個簡單的CSS規則來加載圖片并確保其顯示正確。簡單來說，將圖像的最大寬度設置為100％，并將其高度設置為自動，將確保該圖像在任何設備上的顯示大小都是正確的。

@media screen and (max-width: 480px){
img{
max-width: 100%;
height: auto;
}
}

另一種方法是使用CSS媒體查詢來為小于或等于特定屏幕寬度的設備更改CSS屬性。這意味著我們可以為不同的屏幕尺寸和設備類型優化圖像，提供更好的用戶體驗。

background-image: url('image.jpg');
background-size: cover;
background-position: center center;

在某些情況下，我們可能需要使用CSS來設置背景圖片而不是img標簽。這時，我們可以通過background-image屬性來加載圖像，同時使用background-size和background-position屬性來確保圖像的縱橫比和居中對齊。

@media screen and (max-width: 480px){
background-image: url('image-small.jpg');
}
@media screen and (min-width: 481px){
background-image: url('image.jpg');
}

最后，我們可以使用CSS媒體查詢來加載針對不同設備類型和分辨率的不同圖像版本。這可以確保圖像的加載速度最快，并且在各種設備上都顯示正常。