Categories WebP

Các kỹ thuật nén ảnh của WebP

Bài viết này nằm trong chuỗi nội dung nhằm nỗ lực xây dựng các cơ sở lý thuyết cho việc cải thiện tốc độ website sử dụng WordPress.

Tiếp tục bàn về định dạng ảnh mới rất hấp dẫn là WebP, bài dưới đây tập trung tìm hiểu các kiểu nén mất dữ liệu và không mất dữ liệu của nó.

—-

Tại Google, chúng tôi liên tục tìm kiếm cách làm cho trang web tải nhanh hơn. Một trong các cách để làm điều đó là làm giảm dung lượng ảnh trên web. Hình ảnh chứa đến 60% – 65% dữ liệu trên hầu hết các trang web và kích cỡ trang là vấn đề lớn trong tổng thời gian rendering (xuất trang). Kích cỡ trang đặc biệt quan trọng với thiết bị di động, khi mà ảnh nhỏ hơn sẽ tiết kiệm cả băng thông và thời gian làm việc của pin.

WebP là định dạng ảnh mới, phát triển bởi Google và được hỗ trợ trong các trình duyệt Chrome, Opera và Android, được tối ưu hóa cho tốc độ cao hơn và dung lượng ảnh nhỏ trên Web (năm 2019, thêm hai trình duyệt là Firefox và Edge Microsoft hỗ trợ WebP). Ảnh ở định dạng WebP thường nhỏ hơn 30% so với ảnh PNG và JPEG với chất lượng đồ họa tương đương. Thêm vào đó, ảnh định dạng WebP có một số tính năng tương tự với các định dạng khác. Nó hỗ trợ:

  • Nén mất dữ liệu: Nén mất dữ liệu dựa trên mã hóa khung khóa (key frame encodingVP8. VP8 là một định dạng nén video được tạo bởi On2 Technologies là người kế nhiệm định dạng VP6 và VP7.
  • Nén không mất dữ liệu: Định dạng nén không mất dữ liệu được phát triển bởi nhóm WebP.
  • Thuộc tính trong suốt: Kênh 8-bit alpha có ích cho hình ảnh đồ họa. Kênh Alpha có thể được sử dụng cùng với RGB mất dữ liệu, một chức năng hiện không có trong bất kỳ định dạng nào khác.
  • Hoạt hình: Nó hỗ trợ màu trung thực (true-color) cho ảnh động.
  • Metadata: Nó có thể có EXIF và XMP metadata (hữu ích cho máy ảnh).
  • Hồ sơ màu: Nó có thể có một hồ sơ nhúng ICC.

Với khả năng nén ảnh tốt hơn và hỗ trợ cho tất cả các chức năng trên, WebP có thể thay thế hoàn hảo cho hầu hết các định dạng ảnh: PNG, JPEG hoặc GIF. Thậm chí nó còn tốt hơn nữa, bạn có biết là WebP cho phép khả năng tối ưu hóa ảnh kiểu mới, như việc hỗ trợ nén ảnh mất dữ liệu với thuộc tính trong suốt? Vâng! WebP là định dạng ảnh vô cùng đa năng (trong bài tiếng Anh gốc nó được ví như con dao của quân đội Thụy Sĩ / Swiss Army knife).

Vậy phép thuật này được thực hiện như thế nào? Nào cùng bắt đầu tìm hiểu nhé.


Nén mất dữ liệu WebP

Nén mất dữ liệu WebP sử dụng cùng một phương thức như VP8 cho việc dự báo khung hình video. VP8 dựa trên dự đoán khối và giống như bất kỳ mã-dựa-trên-khối nào, VP8 chia khung hình thành các khúc nhỏ hơn gọi là macroblocks.

Với mỗi macroblock, bộ mã hóa có thể dự đoán chuyển động dư thừa và thông tin màu sắc dựa trên các khối đã được xử lý trước đây. Khung hình là “chìa khóa” theo nghĩa là (in the sense) nó chỉ sử dụng các pixel đã được giải mã trong vùng không gian tức thời xung quanh của mỗi macroblocks, và cố gắng khôi phục lại (inpaint) thông tin của các phần không rõ. Điều này được gọi là mã hóa dự đoán (xem thêm intra-frame coding của video VP8).

Dữ liệu dư thừa (redundant) có thể được bỏ đi (subtracted) khỏi khối, và sẽ cho hiệu quả nén tốt hơn. Chúng ta chỉ còn lại với một khác biệt nhỏ, được gọi là thặng dư (residual), để truyền tải dưới dạng nén.

Sau khi bị chuyển sang dạng toán học có thể đảo ngược (DCT, là viết tắt của từ Discrete Cosine Transform / Biến đổi Cô-sin Rời rạc), phần thặng dư thường chứa nhiều giá trị zero, có thể được nén theo cách hiệu quả hơn nhiều. Kết quả sau đó được lượng tử hóa (quantized) và mã hóa entropy (entropy-coded). Thật hài hước (amusingly), lượng tử hóa là bước duy nhất nơi các bits mất dữ liệu bị bỏ đi (tìm kiếm thêm thông tin về việc chia bởi QPj trong sơ đồ bên dưới). Tất cả các bước khác đều có thể đảo ngược (invertible) và không mất dữ liệu (lossless)!

Biểu đồ tiếp theo cho thấy các bước tham gia vào quá trình nén mất dữ liệu của WebP. Các đặc điểm khác khi so sánh với JPEG được khoanh tròn với màu đỏ.

Các bước tham gia vào quá trình nén mất dữ liệu của WebP

WebP sử dụng khối lượng tử hóa và phân phối các bits thích nghi qua các phân đoạn ảnh khác nhau: lượng bits thấp cho phân đoạn entropy thấp và lượng bits cao cho phân đoạn entropy cao. WebP sử dụng mã hóa entropy số học, có được khả năng nén tốt hơn so với mã hóa Huffman được sử dụng trong ảnh JPEG.


Các mô hình dự đoán nội của VP8

Mô hình dự đoán nội của VP8 được dùng với ba kiểu của macroblocks:

  • 4×4 luma
  • 16×16 luma
  • 8×8 chroma

Bốn mô hình dự đoán nội phổ biến được chia sẻ bởi các macroblocks:

  • H_PRED (horizontal prediction / dự đoán theo chiều ngang). Đổ đầy mỗi khối cột bằng cách copy cột trái, L.
  • V_PRED (vertical prediction / dự đoán theo chiều dọc). Đổ đầy mỗi khối hàng bằng cách copy hàng trên, A
  • DC_PRED (DC prediction / dự đoán DC). Đổ đầy khối với giá trị duy nhất sử dụng giá trị trung bình của các pixel trong hàng trên A và cột trái L.
  • TM_PRED (TrueMotion prediction / dự đoán TrueMotion). Mô hình được đặt tên từ kỹ thuật nén được phát triển bởi On2 Technologies. Ngoài hàng A và cột L, TM_PRED sử dụng pixel P phía trên và bên trái của khối. Sự khác biệt ngang giữa các điểm ảnh trong A (bắt đầu từ P) được truyền bằng cách sử dụng các điểm ảnh từ L để bắt đầu mỗi hàng.

Sơ đồ bên dưới minh họa sự khác nhau giữa các mô hình dự đoán được sử dụng bởi nén mất dữ liệu WebP.

Sự khác nhau giữa các mô hình dự đoán được sử dụng bởi nén mất dữ liệu WebP

Với khối 4×4 luma, có thêm sáu mô hình nội tương tự với V_PRED và H_PRED, nhưng tương ứng với dự đoán các điểm ảnh theo những hướng khác nhau. Chi tiết hơn về các mô hình này có thể được tìm thấy trong Hướng dẫn VP8 Bitstream.

Khối lượng tử thích nghi

Để nâng cao chất lượng ảnh, ảnh được chia ra thành các khu vực có khả năng nhìn rõ tương tự nhau (visibly similar features). Cho mỗi khu vực như vậy, thông số nén (các bước lượng tử, độ mạnh lọc, vân vân) được điều chỉnh độc lập (tuned independently). Điều này mang lại hiệu quả nén bằng cách phân phối lại (redistributing) các bits nơi chúng hữu dụng nhất. VP8 cho phép tối đa bốn phân đoạn (giới hạn của VP8 bitstream).

Tại sao WebP (nén mất dữ liệu) lại tốt hơn so với JPEG

Mã hóa dự đoán là lý do chính làm cho WebP chiến thắng JPEG. Khối lượng tử thích nghi cũng tạo ra sự khác biệt lớn. Lọc giúp bitrates ở mức trung bình và thấp. Mã hóa số học Boolean tạo ra thêm từ 5%-10% khả năng nén so với mã hóa Huffman.


Nén ảnh không mất dữ liệu WebP

Mã hóa không mất dữ liệu WebP dựa trên việc chuyển đổi hình ảnh, nó sử dụng một số kỹ thuật khác nhau. Sau đó, mã hóa entropy thực thi trên các tham số biến đổi (transform parameters) và chuyển đổi dữ liệu hình ảnh.

Việc chuyển đổi áp dụng trên ảnh bao gồm không gian dự đoán của các pixel, chuyển đổi không gian màu, sử dụng bảng màu cục bộ, đóng gói nhiều điểm ảnh vào một điểm ảnh, và thay thế alpha. Với mã hóa entropy chúng tôi sử dụng biến thể (variant) của mã hóa LZ77-Huffman, với việc sử dụng mã hóa 2D của giá trị khoảng cách và nén giá trị thưa thớt.

Chuyển đổi dự đoán (không gian)

Dự đoán không gian được sử dụng để giảm entropy bằng cách khai thác thực tế là các pixel cận kề thường có tương quan. Trong chuyển đổi dự đoán (predictor transform), giá trị của pixel hiện tại được dự đoán từ các pixels đã được giải mã (theo lệnh quét dòng), và chỉ giá trị thặng dư (thực tế – dự đoán) là được mã hóa. Mô hình dự đoán xác định kiểu dự đoán được sử dụng. Ảnh được chia ra làm nhiều vùng ô vuông và tất cả các pixel trong một vùng sử dụng cùng mô hình dự đoán.

Có 13 mô hình dự đoán khác nhau. Một số cái phổ biến (prevalent ones) là left, top, top-left & top-right pixels. Số còn lại là kết hợp (trung bình) của left, top, top-left và top-right.

Chuyển đổi màu sắc (loại bỏ tương quan)

Mục tiêu của chuyển đổi màu sắc là điều chỉnh giá trị R, G và B của mỗi pixel. Chuyển đổi màu sắc giữ nguyên giá trị màu xanh lá (G), chuyển màu đỏ (R) dựa trên màu xanh lá, và chuyển màu xanh da trời (B) dựa trên màu xanh lá và dựa trên màu đỏ.

Cũng giống như trường hợp của chuyển đổi dự đoán, đầu tiên ảnh được chia ra thành các khối và cùng một mô hình chuyển đổi được sử dụng cho tất cả pixels trong một khối. Với mỗi khối có ba kiểu chuyển đổi màu sắc: green_to_red, green_to_blue, và red_to_blue.

Chuyển đổi trừ màu xanh lá

“Chuyển đổi trừ màu xanh lá” trừ giá trị màu xanh lá từ giá trị màu đỏ và màu xanh da trời của mỗi pixel. Khi chuyển đổi này có mặt, bộ giải mã cần thêm giá trị màu xanh lá vào cả màu đỏ và màu xanh da trời. Đây là trường hợp đặc biệt của việc chuyển đổi màu sắc tổng quát ở trên, thường đủ để đảm bảo cắt giảm.

Chuyển đổi chỉ mục màu sắc (bảng màu)

Nếu không có nhiều giá trị pixel độc nhất (unique pixel values), có thể sẽ hiệu quả hơn khi tạo mảng chỉ mục màu sắc và thay thế giá trị pixel bằng chỉ số của mảng (array’s indices). Chuyển đổi chỉ mục màu sắc làm được điều này. Chuyển đổi chỉ mục màu sắc (the color indexing transform) kiểm tra các con số là giá trị độc nhất ARGB trong bức ảnh. Nếu con số đó là dưới ngưỡng (256), nó tạo một mảng các giá trị ARGB, cái sẽ được sử dụng để thay thế giá trị pixel với chỉ số tương ứng.

Mã hóa bộ nhớ đệm màu

Nén ảnh WebP không mất dữ liệu sử dụng các phân mảnh ảnh sẵn có theo thứ tự để tái tạo các pixels mới. Nó cũng có thể sử dụng bảng màu cục bộ nếu không tìm được so khớp thích hợp (if no interesting match is found). Bảng màu này được cập nhật liên tục để sử dụng lại màu sắc gần đây (reuse recent colors). Trong bức hình bên dưới, bạn có thể thấy bộ nhớ đệm màu cục bộ trong hành động được cập nhật dần dần với 32 màu được sử dụng gần đây khi quét xuống.

Bộ nhớ đệm màu cục bộ

LZ77 tham chiếu ngược

Tham chiếu ngược (backward references) là các bộ mã chiều dài và khoảng cách. Độ dài chỉ ra có bao nhiêu pixels trong lệnh quét dòng được sao chép. Khoảng cách code là con số chỉ vị trí của pixel thấy trước đây, từ pixel được sao chép. Giá trị độ dài và khoảng cách được lưu trữ sử dụng mã hóa tiền tố LZ77.

Mã hóa tiền tố LZ77 chia các số nguyên lớn ra hai phần: mã tiền tố và các bits bổ sung. Mã tiền tố được lưu trữ sử dụng mã entropy, trong khi bits bổ sung được lưu trữ như bình thường (không có mã entropy).

Hình bên dưới minh họa LZ77 (biến thể 2D) với từ-khớp / word-matching (thay cho pixel).

LZ77 (biến thể 2D) với từ-khớp / word-matching

Nén mất dữ liệu WebP với Alpha

Ngoài kiểu nén mất dữ liệu WebP (các màu RGB) và nén không mất dữ liệu WebP (nén không mất dữ liệu RGB với kênh alpha), có mô hình WebP khác cho phép mã hóa mất dữ liệu cho kênh RGB và mã hóa không mất dữ liệu cho kênh alpha. Khả năng này (mất dữ liệu RGB và không mất dữ liệu alpha) hiện không có ở bất cứ định dạng ảnh nào khác.

Ngày nay, người quản trị web cần thuộc tính trong suốt phải mã hóa ảnh không mất dữ liệu ở PNG, điều này làm cho kích cỡ tăng đáng kể (leading significant size bloat). WebP alpha mã hóa ảnh với bits-mỗi-pixel thấp và cung cấp cách hiệu quả để giảm kích cỡ các ảnh như vậy. Nén không mất dữ liệu của kênh alpha chỉ thêm 22% dung lượng so với nén mất dữ liệu mã hóa WebP (chất lượng 90).

Nhìn chung (overall), thay thế ảnh trong suốt PNG với nén mất dữ liệu+alpha của WebP cho phép tiết kiệm trung bình từ 60-70% dung lượng. Điều này đã được xác nhận là một tính năng thu hút tuyệt vời cho các trang web di động có nhiều icon.

(Dich từ bài viết Compression Techniques – Tham Chiếu – WebP – Make the Web Faster – Google Developer)

Back to Top