在現今的互聯網時代，圖像和視頻占據著越來越重要的地位。然而，在我們網頁的設計過程中，圖像和視頻的加載速度往往成為了我們經常面臨的一個大問題。

那么，該怎樣解決這個問題呢？一種常用的解決方案就是使用 CSS 縮略圖。

簡單來說， CSS 縮略圖就是指用一個小尺寸的縮略圖代替原始的圖片或視頻，并用 CSS 對它進行樣式設計，使得用戶可以通過縮略圖快速地預覽原始的圖片或視頻。這樣，我們就可以為了提升頁面加載速度，同時讓用戶獲得更好的體驗。

下面是一個使用 CSS 縮略圖的基本示例：

<div class="thumbnail">
<img src="sample.jpg" alt="Sample picture">
</div>
.thumbnail {
width: 200px;
height: 200px;
overflow: hidden;
transition: all 0.2s ease-in-out;
}
.thumbnail:hover {
transform: scale(1.2);
}
.thumbnail img {
display: block;
width: auto;
height: 100%;
margin: 0 auto;
transform: translateX(-50%);
position: relative;
left: 50%;
}

以上代碼的效果為，最初會顯示一個尺寸為 200x200 像素的固定大小的 DIV 容器，當用戶將鼠標懸停在容器上方時，圖片會放大 20% 以提供更好的預覽體驗。此外，容器內的圖片也被居中并進行了水平對齊。

到這里，你已經了解了如何使用 CSS 縮略圖技術來優化你的網頁。如果你希望進一步探索這個技術并了解更多高級應用，請繼續研究相關的 CSS 屬性和技巧。