CSS Image 壓縮

CSS 圖像壓縮是減小圖片在網頁中所占空間大小的一種技術，它可以幫助頁面加載更快、占用更少的資源。以下是一些常見的 CSS 圖像壓縮技術：

/* 壓縮技術一：CSS Sprites（CSS 精靈） */
/* 將多張小圖像合并成一張大圖像 */
#sprite {
background: url(images/sprite.png) no-repeat;
}
/* 顯示精靈圖像 */
.icon-home {
width: 20px;
height: 20px;
background-position: -10px -10px; /* 通過修改背景位置顯示所需圖標 */
}
/* 壓縮技術二：Base64 編碼 */
/* 將小圖像轉換成 Base64 編碼字符串 */
.icon {
background: url(data:image/png;base64,iVBORw0KGgoAAAAN...) no-repeat;
}
/* 顯示 Base64 編碼的圖像 */
.icon-home {
width: 20px;
height: 20px;
background-position: -10px -10px;
}
/* 壓縮技術三：CSS 縮寫 */
/* 省略 CSS 屬性 */
.icon-home {
background: url(images/home.png) no-repeat -10px -10px; /* 等同于：background-image: url(images/home.png); background-repeat: no-repeat; background-position: -10px -10px; */
}
/* 壓縮技術四：縮小圖像大小 */
/* 使用圖像編輯軟件將圖像縮小至所需尺寸 */
.icon-home {
width: 20px;
height: 20px;
background: url(images/home.png) no-repeat -10px -10px;
}

總之，使用 CSS 圖像壓縮技術可以有效地減小圖片大小、提高頁面性能和用戶體驗。