如何在 Django 中使用 Pillow 處理圖片並轉換為 WebP 格式

在網頁開發中，圖片的格式和壓縮對於頁面性能至關重要。

WebP 作為一種高效的圖片格式，可以顯著減少圖片文件大小，從而提升加載速度和用戶體驗。

本篇文章將帶您了解如何使用 Django 與 Pillow 將上傳的圖片轉換為 WebP 格式，並解釋其中的每一步操作。

圖片處理的目標與流程

我們的目標是將用戶上傳的圖片（例如 JPEG 或 PNG）自動轉換為 WebP 格式，並為後續存儲和傳輸準備好數據。

整個過程包括以下步驟：

1. 打開圖片檔案，讀取到記憶體中。
2. 將圖片轉換為 WebP 格式，並進行壓縮。
3. 將處理後的圖片存儲在記憶體中，準備上傳或保存。

以下是實現這些操作的完整代碼：

from PIL import Image
from io import BytesIO

# 假設 self.photo 是用戶上傳的圖片文件
image = Image.open(self.photo)  # 打開圖片
webp_image_io = BytesIO()  # 創建記憶體檔案物件
image.save(webp_image_io, format="WEBP", quality=85)  # 將圖片轉換為 WebP 格式並壓縮
webp_image_io.seek(0)  # 重置檔案指針到開頭

代碼的詳細解析

打開圖片檔案

image = Image.open(self.photo)

功能：

• 使用 Pillow 庫打開用戶上傳的圖片文件。
• self.photo 是一個包含圖片文件路徑的物件，Pillow 會讀取該文件，並返回一個圖片對象。

創建記憶體檔案物件

webp_image_io = BytesIO()

功能：

• BytesIO 是 Python 的內建類，用於創建類似文件的內存對象。
• 它允許我們將數據存儲在記憶體中，而不是直接寫入磁碟。

將圖片轉換為 WebP 格式

image.save(webp_image_io, format="WEBP", quality=85)

功能：

• 使用 Pillow 的 save() 方法，將圖片轉換為 WebP 格式，並保存到 webp_image_io（記憶體文件）中。
• 設置 quality=85，以平衡圖片質量和壓縮率。

重置記憶體文件指針

webp_image_io.seek(0)

功能：

• 將記憶體文件的讀取指針移回到文件開頭。

ASCII 圖片說明

操作前：圖片存入 BytesIO

[圖片數據: 開始=========================結束]
               ↑
             指針位置

當圖片數據被存入 webp_image_io 後，指針會自動移動到檔案的末尾。

如果不調用 seek(0)，上傳到 S3 時會發生什麼？

S3 上傳會從指針所在的位置開始讀檔案：

[圖片數據: 開始=========================結束]
                                        ↑
                                      指針位置

• 結果：檔案從結尾開始讀，讀不到有效的數據，導致上傳失敗。

調用 seek(0) 後：指針重置

[圖片數據: 開始=========================結束]
↑
指針位置（移回到檔案開頭）

• 結果：S3 上傳會從檔案的開頭正確讀取數據，確保完整的圖片被上傳。

圖片格式和壓縮對比

WebP vs JPEG/PNG

JPG vs WebP：差別在於格式還是壓縮？

兩者都影響，但 壓縮質量 是更重要的因素：

• 格式:
  • WebP 通常比 JPG 更高效，在相同 quality 下，WebP 檔案大小會較小。
• 壓縮質量:
  • quality 直接影響檔案大小。較低的 quality 會減少檔案大小，但可能降低圖片質量。

範例

假設一張圖片原始大小為 1MB 的 JPG，轉換為 WebP 並調整壓縮質量後的檔案大小可能如下：

注意事項與最佳實踐

1. 選擇合適的壓縮質量
   • 建議設置 quality=85，這是文件大小與顯示效果的最佳平衡點。
2. 處理大文件
   • 上傳圖片時，限制文件大小，避免因處理大文件導致性能問題。
3. 兼容性考慮
   • 雖然 WebP 高效，但部分舊版本瀏覽器不支持。建議在前端提供回退選項（如 JPEG）。

結論

本文詳細介紹了如何使用 Django 與 Pillow 將圖片轉換為 WebP 格式，並分析了代碼中的每一步操作。

在實際項目中，這種處理方式不僅能減少圖片大小，還能提升網頁加載速度。

希望這篇文章能幫助您更好地理解圖片處理邏輯，並應用到實際開發中！