圖片壓縮在前端尤其是移動端至關重要，因為它直接影響加載速度和用戶體驗。解決方案包括使用canvas api進行客戶端壓縮，通過將圖片繪制到canvas并導出為指定質量的圖片實現壓縮；選擇合適的壓縮質量需權衡文件大小與視覺質量，可針對不同圖片類型調整參數或進行a/b測試；除了canvas，還可使用webassembly壓縮庫、瀏覽器內置image api、漸進式jpeg及webp格式優化；為避免失真，應選擇合適算法、避免過度壓縮、使用高質量原始圖、預處理及專業工具；最后，結合客戶端與服務器端壓縮是最佳方案，既能減少傳輸量，又能統一壓縮策略。
圖片壓縮，簡單來說，就是在保證圖片質量的前提下，盡可能減小圖片的文件大小。在前端，尤其是在移動端，圖片體積直接影響加載速度和用戶體驗，所以客戶端圖片壓縮至關重要。
解決方案
JS實現圖片壓縮，主要依賴于Canvas API。其核心思路是：將圖片繪制到Canvas上，然后通過Canvas提供的API將Canvas內容導出為指定質量的圖片。
以下是一個簡單的JS圖片壓縮函數：
function compressImage(imageFile, quality, callback) { const reader = new FileReader(); reader.onload = function(event) { const img = new Image(); img.src = event.target.result; img.onload = function() { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0, img.width, img.height); const compressedDataUrl = canvas.toDataURL('image/jpeg', quality); // 可選 'image/png' // 將Data URL轉換為Blob對象 const blob = dataURLToBlob(compressedDataUrl); callback(blob); } } reader.readAsDataURL(imageFile); } // Data URL轉換為Blob對象 (兼容性處理) function dataURLToBlob(dataURL) { const parts = dataURL.split(';base64,'); const contentType = parts[0].split(':')[1]; const raw = window.atob(parts[1]); const rawLength = raw.length; const uInt8Array = new Uint8Array(rawLength); for (let i = 0; i < rawLength; ++i) { uInt8Array[i] = raw.charCodeAt(i); } return new Blob([uInt8Array], { type: contentType }); } // 使用示例： const inputElement = document.getElementById('imageInput'); inputElement.addEventListener('change', function(event) { const imageFile = event.target.files[0]; compressImage(imageFile, 0.7, function(compressedBlob) { // compressedBlob 就是壓縮后的Blob對象，可以上傳到服務器或者進行其他操作 console.log('壓縮后的圖片 Blob:', compressedBlob); // 創建一個URL用于顯示壓縮后的圖片 const compressedImageUrl = URL.createObjectURL(compressedBlob); const imgElement = document.getElementById('compressedImage'); imgElement.src = compressedImageUrl; }); });
這里的quality參數控制壓縮質量，取值范圍是0到1，值越小壓縮率越高，但圖片質量也會降低。 實際應用中，需要根據具體需求調整這個值。
為什么選擇Canvas壓縮？
因為Canvas API在瀏覽器端提供了直接操作像素的能力，無需依賴服務器，減少了網絡傳輸，提高了效率。 另一方面，它具有良好的跨瀏覽器兼容性。
如何選擇合適的壓縮質量？
壓縮質量的選擇是一個權衡的過程。 理想情況下，我們需要找到一個既能顯著減小文件大小，又能保持可接受的視覺質量的平衡點。
一種策略是：針對不同類型的圖片使用不同的壓縮質量。 例如，對于色彩豐富的照片，可以適當降低質量；而對于包含大量文本或線條的圖像，則應盡量保持較高的質量，以避免失真。
另一個方法是：進行A/B測試。 可以針對同一張圖片嘗試不同的壓縮質量，然后對比壓縮后的效果，選擇最適合的參數。
此外，一些高級的圖片壓縮庫（例如pica）提供了更精細的控制，允許你調整各種壓縮參數，以獲得更好的效果。
除了Canvas壓縮，還有其他客戶端圖片壓縮方案嗎？
除了Canvas壓縮，還可以考慮以下方案：
-
WebAssembly (wasm) 壓縮庫: WASM 允許你在瀏覽器中運行高性能的 C/c++ 代碼。 已經有一些基于 WASM 的圖片壓縮庫，例如 MozJPEG 和 WebP encoder，它們通常比純 JS 實現的壓縮算法更快，壓縮率更高。 但引入 WASM 可能會增加項目的復雜性。
-
使用瀏覽器內置的 Image API: 一些現代瀏覽器提供了一些原生的 Image API，可以用于圖片壓縮。 例如，ImageBitmap 接口可以用于創建和操作圖像數據，并提供了一些優化選項。 但這些 API 的兼容性可能存在問題，需要進行充分的測試。
-
漸進式 JPEG (Progressive JPEG): 漸進式 JPEG 是一種特殊的 JPEG 格式，它允許圖片在加載過程中逐漸顯示，而不是從上到下逐行加載。 這可以改善用戶的感知體驗，尤其是在網絡較慢的情況下。 可以使用一些工具或庫將普通 JPEG 轉換為漸進式 JPEG。
-
圖片格式優化: WebP 是一種由 Google 開發的現代圖片格式，它通常比 JPEG 和 PNG 具有更高的壓縮率和更好的視覺質量。 如果你的目標瀏覽器支持 WebP，可以考慮將圖片轉換為 WebP 格式。
如何避免壓縮后圖片失真？
圖片壓縮不可避免地會造成一定程度的失真，但我們可以采取一些措施來盡量減少失真：
-
選擇合適的壓縮算法: 不同的壓縮算法適用于不同的圖片類型。 例如，JPEG 適用于色彩豐富的照片，而 PNG 適用于包含大量文本或線條的圖像。
-
避免過度壓縮: 壓縮率越高，失真越嚴重。 因此，應該盡量避免過度壓縮，選擇一個既能減小文件大小，又能保持可接受的視覺質量的平衡點。
-
使用高質量的原始圖片: 原始圖片的質量越高，壓縮后的效果越好。 因此，應該盡量使用高質量的原始圖片，避免使用已經經過壓縮的圖片。
-
進行預處理: 在壓縮之前，可以對圖片進行一些預處理操作，例如銳化、降噪等，以提高壓縮后的視覺質量。
-
使用專業的圖片壓縮工具: 一些專業的圖片壓縮工具提供了更精細的控制，允許你調整各種壓縮參數，以獲得更好的效果。
除了客戶端壓縮，服務器端圖片壓縮也很重要嗎？
是的，客戶端壓縮和服務器端壓縮都很重要，它們可以互相補充，共同提高網站的性能。
客戶端壓縮的優點是：減輕了服務器的壓力，減少了網絡傳輸，提高了響應速度。 缺點是：可能會增加客戶端的計算負擔，對一些低端設備可能會造成性能問題。
服務器端壓縮的優點是：可以對所有用戶應用統一的壓縮策略，保證了圖片質量的一致性。 缺點是：增加了服務器的壓力，需要消耗更多的計算資源。
因此，最佳的方案是：結合客戶端壓縮和服務器端壓縮。 在客戶端進行初步的壓縮，然后在服務器端進行進一步的優化。 這樣可以充分利用客戶端和服務器端的優勢，達到最佳的性能效果。 比如，可以先在客戶端壓縮到一定程度，上傳到服務器后，服務器再根據不同的設備類型和網絡狀況，生成不同尺寸和質量的圖片。
