在網頁上實現圖片壓縮可以有多個方法，具體取決于你是希望在頁面加載時壓縮圖片、使用壓縮后的圖片文件，還是在用戶上傳時進行壓縮。以下是幾種常用的方法：
通過設置 CSS 屬性 width 和 height，可以調整圖片在網頁上的顯示尺寸，從而在視覺上“壓縮”圖片。
css復制代碼.responsive-image { width: 100%; /* 或者設定具體寬度，如200px */
height: auto; /* 自動調整高度，保持圖片比例 */}html復制代碼<!DOCTYPE html><html lang="zh-CN"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>壓縮圖片示例</title>
<style>
.responsive-image { width: 100%; /* 圖片寬度設置為容器的100% */
height: auto; /* 自動調整高度以保持圖片比例 */
} </style></head><body>
<div class="image-container">
<img src="https://example.com/image.jpg" alt="示例圖片" class="responsive-image">
</div></body></html>如果你需要在用戶上傳圖片時對其進行壓縮，可以使用 JavaScript 庫（如 Pica、Compressor.js）來壓縮圖片。
Compressor.js首先引入 Compressor.js，然后使用 JavaScript 來壓縮圖片。
html復制代碼<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>上傳圖片壓縮示例</title> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/compressor.min.js"></script></head><body> <input type="file" id="file-input"> <script> document.getElementById('file-input').addEventListener('change', function (event) { const file = event.target.files[0]; if (!file) return; new Compressor(file, { quality: 0.6, // 質量設置（0 到 1 之間，0.6表示60%質量） success(result) { console.log('壓縮后的圖片文件：', result); // 可以將壓縮后的圖片上傳或顯示 }, error(err) { console.error('壓縮錯誤：', err.message); }, }); }); </script></body></html>
使用現代圖像格式（如 WebP、AVIF）來替代傳統格式（如 JPEG、PNG）可以實現更好的壓縮比率，同時保持圖像質量。
html復制代碼<picture> <source srcset="https://example.com/image.webp" type="image/webp"> <source srcset="https://example.com/image.jpg" type="image/jpeg"> <img src="https://example.com/image.jpg" alt="示例圖片" class="responsive-image"></picture>
使用服務器端工具（如 ImageMagick、TinyPNG API）在上傳或生成圖片時進行壓縮。服務器端優化可以確保所有用戶上傳的圖片都得到一致的壓縮處理。
srcset 屬性實現響應式圖片使用 HTML 的 srcset 屬性，根據設備屏幕分辨率加載不同尺寸的圖片，從而減少加載大圖片的帶寬占用。
html復制代碼<img src="image-small.jpg" srcset="image-small.jpg 300w, image-medium.jpg 600w, image-large.jpg 1200w" sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px" alt="示例圖片">
CSS 調整尺寸適合簡單的視覺壓縮。
前端 JavaScript 壓縮適用于用戶上傳場景。
圖像格式優化和服務器端優化適合整體站點優化。
響應式圖片適用于針對不同設備優化圖片加載。