在網頁中，我們經常將圖片應用到頁面中以增強視覺效果。然而，當我們將圖片縮小時，有時候會發現圖片變得模糊或不清晰。這是因為瀏覽器在將圖片壓縮到較小尺寸時，自動減少了像素數，導致圖片質量降低。下面介紹幾種方法來解決這個問題。

/* 通過 CSS 進行縮小 */
img{
width: 200px;
height: auto;
}

第一種方法是使用 CSS 進行縮小。通過設置圖片的寬度和高度，我們可以手動控制圖片的尺寸，而不會導致像素數的減少。建議將圖片縮小的程度限制在原始尺寸的一半以內，以避免影響圖片質量。

/* 使用高清圖片 */
img{
width: 200px;
height: auto;
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi){
img{
width: 200px;
height: auto;
background-image: url('image@2x.png');
background-size: 200px auto;
}
}

第二種方法是使用高清圖片來解決問題。我們可以準備雙倍分辨率的圖片，然后在 CSS 中通過媒體查詢加載圖片。這樣可以保證在高分辨率設備上，圖片顯示效果良好，而在普通設備上也不會出現過多的像素浪費。

/* 使用 SVG 圖片 */
img{
width: 200px;
height: auto;
}

第三種方法是使用 SVG 圖片。與傳統的位圖不同，SVG 圖片是基于矢量的，可以進行無損縮放。即使將圖片縮小到很小的尺寸，也不會喪失清晰度。但需要注意的是，SVG 圖片不適用于所有場景。例如，復雜的插圖或照片并不適合使用 SVG 格式。