2026-03-22

Cách nén hình ảnh hoạt động: Giải thích về JPEG, PNG và WebP

None

Cách nén hình ảnh hoạt động: Giải thích về JPEG, PNG và WebP

Cập nhật lần cuối: Ngày 27 tháng 6 năm 2026

Nén hình ảnh sẽ thu nhỏ các tập tin bằng cách loại bỏ thông tin mà mắt bạn không thể nhìn thấy. Việc hiểu thông tin mà mà mỗi định dạng loại bỏ sẽ cho bạn biết lý do tại sao JPEG làm mờ văn bản, tại sao PNG vẫn có kích thước lớn và tại sao WebP và AVIF lại chiếm ưu thế trên ảnh. Đây là hướng dẫn của người thực hành về các thuật toán thực tế, không phải là so sánh tiếp thị.

Trả lời nhanh: nén ảnh hoạt động như thế nào?

Mỗi định dạng hình ảnh trên web thực hiện hai công việc: dự đoán giá trị pixel để thu gọn dữ liệu lặp lại, sau đó mã hóa các lỗi dự đoán một cách hiệu quả. Các định dạng mất dữ liệu (JPEG, WebP lossy, AVIF) cũng lượng tử hóa — chúng làm tròn chi tiết tần số cao mà con người hầu như không cảm nhận được. Các định dạng không mất dữ liệu (PNG, WebP không mất dữ liệu) bỏ qua lượng tử hóa và giữ lại mọi pixel.

Quyết định thực tế:

Nội dung hình ảnh Định dạng tốt nhất Tại sao
Hình ảnh, độ dốc phức tạp Mất WebP/AVIF Byte nhỏ nhất, mắt che giấu sự mất mát
Văn bản sắc nét, giao diện người dùng, nghệ thuật đường nét, logo PNG hoặc WebP không mất dữ liệu Lượng tử hóa sẽ làm mờ các cạnh
Ảnh đủ màu cần chỉnh sửa sau PNG (hoặc giữ bản gốc RAW/JPEG) Tránh mã hóa lại bị mất nhiều lần
Khả năng tương thích tối đa JPEG Giải mã ở mọi nơi, nhưng lớn nhất

Đọc so sánh AVIF với WebP và JPEG để biết quyết định định dạng; bài viết này tập trung vào những gì xảy ra bên trong mỗi bộ mã hóa.

Sự khác biệt giữa mất mát và không mất mát là gì?

Tính năng nén không mất dữ liệu sẽ tái tạo lại từng pixel ban đầu. Nó hoạt động bằng cách tìm ra sự dư thừa: các màu giống hệt nhau, các mẫu lặp lại, độ dốc có thể dự đoán được. PNG, GIF và WebP-lossless sử dụng phương pháp này. Trần nhà là entropy của hình ảnh - nhiễu ngẫu nhiên hầu như không bị nén chút nào.

Nén Lossy sẽ loại bỏ thông tin vĩnh viễn. Bí quyết là loại bỏ thông tin mà hệ thống thị giác của bạn ít chú ý nhất: kết cấu tần số cao và sự khác biệt màu sắc tinh tế. JPEG, WebP-lossy và AVIF thực hiện việc này. Phần thưởng là các tệp nhỏ hơn nhiều - thường nhỏ hơn 5–10× so với tệp không mất dữ liệu đối với ảnh.

Các định dạng sử dụng các kỹ thuật cụ thể:

Kỹ thuật Được sử dụng bởi Nó làm gì
Lấy mẫu phụ sắc độ JPEG, WebP, AVIF Giảm độ phân giải màu sắc; mắt ít nhạy cảm với màu sắc hơn độ sáng
Biến đổi Cosine rời rạc (DCT) JPEG, AVIF Chuyển đổi khối 8 × 8 thành tần số để có thể loại bỏ chi tiết một cách có chọn lọc
Lọc dự đoán PNG, WebP không mất dữ liệu Đoán từng pixel từ hàng xóm; chỉ mã hóa lỗi
LZ77 + Huffman (XẢ LỖI) PNG Nén các chuỗi byte lặp lại bằng mã ngắn
Dự đoán trong khung AVIF, WebP bị mất Mượn dự đoán khối từ codec video để dự đoán tốt hơn

Quá trình nén JPEG thực sự hoạt động như thế nào?

JPEG là đường dẫn tổn hao chuẩn. Năm giai đoạn chạy theo thứ tự:

Sân khấu Chuyện gì xảy ra
1. Chuyển đổi không gian màu RGB trở thành YCbCr - một kênh luma (độ sáng, Y) và hai kênh sắc độ (màu).
2. Lấy mẫu phụ sắc độ Sắc độ được lấy mẫu xuống, thường là 4:2:0. Mắt đọc độ sáng sắc nét hơn màu sắc, do đó, điều này làm giảm một nửa dữ liệu mà ít bị mất đi.
3. DCT Mỗi kênh được chia thành các khối 8×8; Biến đổi Cosine rời rạc biến mỗi khối thành các hệ số tần số (vùng mịn ở một góc, chi tiết/cạnh ở góc kia).
4. Lượng tử hóa Các hệ số được chia cho một ma trận. Tần số cao có ước số lớn và nhiều số làm tròn về 0. Đây là bước mất mát — thanh trượt chất lượng chia tỷ lệ ma trận này.
5. Mã hóa Entropy Các hệ số lượng tử hóa được mã hóa theo thứ tự zigzag, độ dài chạy (các số 0 dài được nén cứng), sau đó được mã hóa Huffman thành các byte JPEG cuối cùng.

Lý do JPEG làm mờ văn bản và các cạnh sắc nét: các hệ số tần số cao mang các cạnh và lượng tử hóa sẽ loại bỏ chúng. Chất lượng quay đủ thấp và bạn sẽ thấy các tạo phẩm chặn 8 × 8.

Bạn có thể thấy quá trình lượng tử hóa đang diễn ra trên một chi tiết lông vũ. Cùng một vùng 500×280, được mã hóa ở ba mức chất lượng, hiển thị chính xác những gì thanh trượt chất lượng sẽ thay đổi:

Cùng cắt lông như JPEG q95 (24 KB), q75 (16 KB), q50 (9 KB): chất lượng thấp hơn mang lại khả năng chặn 8x8

Ở q95, các ngạnh lông vũ vẫn khác biệt. Đến q75, các sợi mảnh bắt đầu mờ đi cùng nhau. Ở q50, các khối 8 × 8 hiển thị rõ ràng và kết cấu bị nhòe - tệp nhỏ hơn nhưng hiện tại, hiện tượng mất mát là điều mà người xem nhận thấy.

Nén PNG hoạt động như thế nào?

PNG không mất dữ liệu và hoạt động hoàn toàn khác. Hai giai đoạn:

  1. Lọc hàng. Trước khi nén, mỗi dòng quét được lọc để dễ dự đoán hơn. PNG xác định năm bộ lọc (Không có, Phụ, Lên, Trung bình, Paeth); bộ mã hóa chọn giá trị tốt nhất trên mỗi hàng.
Lọc Dự đoán từng pixel từ… Hoạt động tốt trên…
Không có Không có gì (thô) Dữ liệu đã có sẵn ngẫu nhiên
phụ Pixel ở bên trái Độ dốc ngang
Hướng lên Pixel ở trên Mẫu dọc
Trung bình Trái và trên, tính trung bình Độ dốc mượt mà
Paeth Dự đoán tuyến tính về bên trái/trên/trên bên trái Nghệ thuật phức tạp, nặng nề
  1. Nén DEFLATE. Các byte được lọc đi qua LZ77 (tìm các chuỗi lặp lại, thay thế bằng tham chiếu ngược) cộng với mã hóa Huffman (mã ngắn cho các giá trị chung) — cùng một thuật toán mà ZIP sử dụng.

Các mẹo tối ưu hóa PNG thực sự hữu ích:

  • Sử dụng PNG-8 (được lập chỉ mục, 256 màu) cho đồ họa phẳng — nhỏ hơn nhiều so với PNG-24.
  • Tách các đoạn không cần thiết: EXIF, ICC profile không sử dụng, kênh alpha nếu ảnh mờ.
  • Nén lại bằng optipng hoặc pngquant (pngquant (loại sau chuyển đổi thành 8-bit với phối màu để tiết kiệm đáng kể những bức ảnh phải ở dạng PNG).

Tại sao WebP lại nhỏ hơn cả hai?

WebP có hai chế độ độc lập:

  • Lossy WebP mượn từ codec video VP8. Nó sử dụng tính năng dự đoán khối trên toàn bộ khung hình (không chỉ trong các khối 8×8 như JPEG), các phép biến đổi 4×4 và 8×8 cũng như mã hóa entropy số học tốt hơn. Kết quả nhỏ hơn khoảng 25–34% so với JPEG ở chất lượng phù hợp.
  • WebP không mất dữ liệu sử dụng tối đa 13 chế độ dự đoán, chuyển đổi không gian màu để giải mã các kênh và biến thể LZ77. Nó thường ~20–26% nhỏ hơn PNG cho cùng một nội dung.

AVIF còn tiến xa hơn bằng cách sử dụng các công cụ nội khung của bộ giải mã video AV1, đánh bại khả năng mất dữ liệu của WebP thêm 20–30%. Cái giá phải trả là tốc độ mã hóa - AVIF sản xuất chậm. Xem hướng dẫn Các lựa chọn thay thế TinyPNG để biết các công cụ xuất ra WebP và AVIF.

Bạn đo chất lượng nén như thế nào?

Hai số liệu chiếm ưu thế. Không có gì là hoàn hảo; sử dụng cả hai.

Số liệu Nó đo lường những gì Giải thích thô
PSNR (Tỷ lệ tín hiệu trên tạp âm cao nhất) Chênh lệch pixel toán học, tính bằng dB >40 dB: xuất sắc · 30–40: chấp nhận được · <30: suy hao rõ ràng
SSIM (Chỉ số tương tự về cấu trúc) Sự tương đồng về cấu trúc cảm nhận, 0–1 >0,95: gần giống · 0,90–0,95: tốt · <0,90: nhìn thấy được

PSNR dễ tính toán nhưng bỏ qua những gì con người chú ý; SSIM tương quan tốt hơn với nhận thức nhưng vẫn đánh giá thấp các thành phần gây mất tập trung (đổ chuông gần văn bản). Để đưa ra quyết định về sản phẩm thực, hãy xem xét kết quả ở kích thước hiển thị mong muốn thay vì tin tưởng vào một con số duy nhất.

Mozilla nghiên cứu chất lượng JPEG và nghiên cứu nén WebP của Google công bố phương pháp và hình ảnh mẫu nếu bạn muốn tái tạo các so sánh.

Bạn nên sử dụng cài đặt chất lượng nào?

Bắt đầu từ những giá trị mặc định này, sau đó điều chỉnh nội dung của bạn. Đây là những hướng dẫn, không phải luật.

Trường hợp sử dụng Định dạng Chất lượng ban đầu Kích thước mục tiêu
Hình ảnh anh hùng / LCP WebP hoặc AVIF 75–80 <200 KB
Ảnh sản phẩm WebP hoặc AVIF 80–85 <100 KB
Hình thu nhỏ WebP 70–75 <30 KB
Logo/biểu tượng PNG hoặc SVG không mất mát <10 KB
Ảnh chụp màn hình nặng văn bản PNG không mất mát (khác nhau)

Hai quy tắc quan trọng hơn số lượng:

  • So sánh ở chất lượng hình ảnh phù hợp, không phải số chất lượng phù hợp. AVIF q60, WebP q75 và JPEG q85 trông gần giống nhau. So sánh cả ba ở "q80" là vô nghĩa.
  • Thay đổi kích thước trước khi nén. Máy ảnh 4000px ban đầu được nén thành JPEG q80 vẫn là bản tải xuống 4000px. Trước tiên hãy giảm kích thước màn hình xuống — giúp tiết kiệm nhiều byte hơn bất kỳ điều chỉnh chất lượng nào.

Đường cong kích thước so với chất lượng cho thấy tại sao dải 75–85 là khuyến nghị thông thường. Trên cùng một phần cắt chi tiết lông vũ, kích thước tập tin lúc đầu giảm mạnh, sau đó giảm dần — và mức giảm chất lượng nhìn thấy được tăng tốc xuống dưới q75. Vượt qua điểm đó sẽ tiết kiệm được ít byte nhưng lại tốn chi tiết thực sự:

Biểu đồ đường kích thước tệp JPEG được đo theo chất lượng q95 đến q35, với điểm ngọt q75-85 được đánh dấu

Làm thế nào để nén hình ảnh tốt trong thực tế?

  1. Bắt đầu từ bản gốc phù hợp. Chụp ảnh RAW hoặc JPEG chất lượng cao; các hợp chất nén, vì vậy hãy tránh mã hóa lại tệp đã bị mất.
  2. Thay đổi kích thước trước. Ghép hộp trên trang với Image Resizer trước bất kỳ bước nào khác.
  3. Chọn định dạng theo nội dung. Ảnh → WebP/AVIF lossy; văn bản/UI → PNG hoặc WebP không mất dữ liệu.
  4. Mã hóa ở chất lượng hợp lý. Bắt đầu ở mức 75–80 cho ảnh trong Bộ nén hình ảnh.
  5. Strip siêu dữ liệu cho web công cộng (giữ EXIF ​​​​để lưu trữ); Image Converter thực hiện định dạng + siêu dữ liệu trong một lần truyền.
  6. Kiểm tra kích thước hiển thị và cung cấp bản dự phòng <picture> để khách hàng cũ nhận được JPEG.

##Những lỗi thường gặp

  • Nén lại các ảnh JPEG đã được nén. Mỗi mã hóa bị mất sẽ thêm các thành phần lạ. Giữ một bậc thầy.
  • Bỏ qua việc lấy mẫu phụ sắc độ cho văn bản. 4:2:0 phù hợp với ảnh nhưng làm nhòe văn bản màu. Sử dụng 4:4:4 (hoặc PNG) cho đồ họa nhiều văn bản.
  • Tin cậy một con số chất lượng trên các định dạng. Con số này có ý nghĩa khác nhau trong JPEG, WebP và AVIF.
  • Tối ưu hóa trước khi thay đổi kích thước. Luôn thay đổi kích thước trước — đây là mức tiết kiệm byte lớn nhất.
  • Cung cấp AVIF/WebP mà không có dự phòng JPEG. Các trình duyệt và ứng dụng email cũ không hiển thị gì.

Hướng dẫn liên quan

Câu hỏi thường gặp

Quá trình nén ảnh diễn ra như thế nào?

Nén không mất dữ liệu (PNG) tìm và mã hóa các mẫu lặp lại mà không thay đổi pixel. Tính năng nén tổn thất (JPEG, WebP) loại bỏ chi tiết tần số cao mà mắt ít chú ý nhất, sau đó mã hóa phần còn lại. Cài đặt chất lượng kiểm soát mức độ nén bị mất.

Sự khác biệt giữa mất mát và không mất mát là gì?

Lossless bảo toàn chính xác từng pixel và đảo ngược hoàn hảo (PNG, lossless WebP). Lossy loại bỏ chi tiết để thu nhỏ tệp và không thể đảo ngược (JPEG, lossy WebP). Thua lỗ về kích thước cho ảnh; chiến thắng không mất mát về chất lượng cho đồ họa và bản gốc.

Định dạng nào nén ảnh tốt nhất?

AVIF (trình duyệt nhỏ nhất, hiện đại), rồi WebP, rồi JPEG. PNG là lớn nhất cho ảnh vì nó không bị mất. Đối với phân phối web, WebP là mặc định an toàn; AVIF khi bạn có thể mã hóa nó và khán giả của bạn sử dụng các trình duyệt hiện đại.

Nén có làm giảm chất lượng không?

Lossy thì có, nhưng ở chất lượng 80–85, sự mất mát là không thể nhìn thấy được ở kích thước xem. Cái bẫy đang nén lại một tập tin bị mất nhiều lần (mất thế hệ), tạo thành các tạo phẩm. Nén một lần từ bản gốc không mất dữ liệu.

Cắt hình nam vô danh nhìn ảnh in trên tay và duyệt netbook tại bàn làm việc trong phòng sáng

Nguồn ảnh

  • Bìa — Mã nguồn trên màn hình, ảnh của Leonid Altman trên Pexels (đã chuyển đổi sang WebP).
  • Thang chất lượng JPEG và đường cong kích thước so với chất lượng — do tác giả tạo ra từ bức ảnh lông chim vẹt (Pexels #36720663, ảnh của Kaca Skok) để hiển thị đầu ra JPEG thực tế được đo lường ở các mức chất lượng.

Sử dụng các công cụ miễn phí trong khi bạn theo dõi hướng dẫn.

Nén một ảnhXóa nền

Đọc tiếp

Ảnh bìa cho PNG sang WebP: Hướng dẫn Chuyển đổi và Thu nhỏ Ảnh PNG

Tue Mar 17 2026 20:00:00 GMT-0400 (北美东部夏令时间)

PNG sang WebP: Hướng dẫn Chuyển đổi và Thu nhỏ Ảnh PNG

Chuyển đổi PNG sang WebP để tối ưu hóa kích thước tệp web. Tìm hiểu khi nào nên dùng WebP không mất dữ liệu (lossless), khi nào dùng kiểu nén có tổn thất (lossy), cùng các lệnh cwebp và Pillow với fallback PNG.