Tại Google, chúng tôi liên tục tìm cách giúp trang web tải nhanh hơn. Một cách để thực hiện việc này là thu nhỏ hình ảnh trên web. Hình ảnh chiếm tới 60% – 65% byte trên hầu hết các trang web. Kích thước trang là một yếu tố chính trong tổng thời gian hiển thị. Kích thước trang đặc biệt quan trọng đối với thiết bị di động, trong đó hình ảnh nhỏ hơn sẽ tiết kiệm cả băng thông và thời lượng pin.
WebP là một định dạng hình ảnh mới do Google phát triển và hỗ trợ trong Chrome, Opera và Android. Định dạng này được tối ưu hoá để cho phép hiển thị hình ảnh nhỏ hơn và nhanh hơn trên web. Hình ảnh WebP có kích thước nhỏ hơn 30% so với hình ảnh PNG và JPEG ở chất lượng hình ảnh tương đương. Ngoài ra, định dạng hình ảnh WebP có tính năng tương đương với các định dạng khác. Cách này hỗ trợ:
Nén có tổn hao: Quá trình nén có tổn hao dựa trên phương thức mã hoá khung khoá VP8. VP8 là định dạng nén video do On2 Technologies tạo ra để kế thừa cho định dạng VP6 và VP7.
nén không tổn hao: Định dạng nén không tổn hao do nhóm WebP phát triển.
Độ trong suốt:Kênh alpha 8 bit hữu ích cho hình ảnh đồ hoạ. Bạn có thể sử dụng kênh Alpha cùng với RGB tổn hao, một tính năng hiện không có ở định dạng nào khác.
Ảnh động: Hỗ trợ hình ảnh động màu thực.
Siêu dữ liệu: Thông tin này có thể có siêu dữ liệu EXIF và XMP (ví dụ: máy ảnh sử dụng).
Color Profile (Hồ sơ màu): Video có thể có hồ sơ ICC được nhúng.
Nhờ khả năng nén hình ảnh hiệu quả hơn và hỗ trợ tất cả các tính năng này, WebP có thể là giải pháp thay thế tuyệt vời cho hầu hết các định dạng hình ảnh: PNG, JPEG hoặc GIF. Hơn nữa, bạn có biết rằng WebP mang đến các cơ hội mới để tối ưu hoá hình ảnh, chẳng hạn như khả năng hỗ trợ hình ảnh bị tổn hao với độ trong suốt không? Có! WebP là con dao của Quân đội Thuỵ Sĩ với các định dạng hình ảnh.
Vậy, phép màu này được thực hiện như thế nào? Hãy tổng hợp và tìm hiểu kỹ hơn.
WebP suy hao
Tính năng nén có tổn hao của WebP sử dụng phương pháp tương tự như VP8 để dự đoán khung hình (video). VP8 dựa trên dự đoán khối và giống như bất kỳ bộ mã hoá và giải mã dựa trên khối nào, VP8 chia khung thành các phân đoạn nhỏ hơn gọi là macroblock.
Trong mỗi macroblock, bộ mã hoá có thể dự đoán thông tin chuyển động và màu sắc dư thừa dựa trên các khối được xử lý trước đó. Khung hình ảnh là "khoá" theo nghĩa là nó chỉ sử dụng các pixel đã được giải mã trong vùng lân cận không gian ngay lập tức của mỗi khối macro và cố gắng lấp đầy phần không xác định của chúng. Đây gọi là mã hoá dự đoán (xem mã hoá trong khung hình của video VP8).
Sau đó, dữ liệu dư thừa có thể được trừ khỏi khối, giúp nén dữ liệu hiệu quả hơn. Chúng ta chỉ còn lại một sự khác biệt nhỏ, gọi là phần dư, để truyền tải dưới dạng nén.
Sau khi trải qua một phép biến đổi đảo ngược về mặt toán học (DCT nổi tiếng, viết tắt của Discrete Cosine Transform), phần dư thường chứa nhiều giá trị bằng 0, có thể được nén hiệu quả hơn nhiều. Sau đó, kết quả sẽ được lượng tử hoá và mã hoá entropy. Điều thú vị là bước lượng tử hoá là bước duy nhất trong đó các bit bị loại bỏ có tổn hao (tìm kiếm giá trị chia cho QPj trong sơ đồ dưới đây). Tất cả các bước khác đều không thể đảo ngược và không tổn hao!
Sơ đồ dưới đây cho thấy các bước trong quá trình nén có tổn hao WebP. Các tính năng phân biệt so với JPEG được khoanh tròn màu đỏ.
WebP sử dụng quá trình lượng tử hoá khối và phân phối các bit có tính thích ứng trên các phân đoạn hình ảnh khác nhau: ít bit hơn đối với các phân đoạn entropy thấp và các bit cao hơn cho các phân đoạn entropy cao hơn. WebP sử dụng phương thức mã hoá entropy số học, đạt được khả năng nén tốt hơn so với phương thức mã hoá Huffman dùng trong JPEG.
Chế độ dự đoán VP8
Các chế độ dự đoán nội bộ VP8 được sử dụng với ba loại macroblock:
- Lumen 4x4
- Lumen 16x16
- Sắc độ 8x8
Các macroblock sau đây có chung 4 chế độ dự đoán phổ biến:
H_PRED (dự đoán theo chiều ngang). Điền bản sao của cột bên trái, L vào mỗi cột của khối.
V_PRED (dự đoán theo chiều dọc). Điền bản sao của hàng trên, A vào mỗi hàng của khối.
DC_PRED (dự đoán DC). Điền một giá trị duy nhất vào khối bằng cách sử dụng giá trị trung bình của các pixel trong hàng phía trên A và cột ở bên trái L.
TM_PRED (dự đoán TrueMotion). Một chế độ lấy tên từ một kỹ thuật nén do On2 Technologies phát triển. 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 khối. Sự chênh lệch theo chiều ngang giữa các pixel trong A (bắt đầu từ P) được truyền bằng cách sử dụng các pixel từ L để bắt đầu mỗi hàng.
Sơ đồ dưới đây minh hoạ các chế độ dự đoán khác nhau được dùng trong quá trình nén tổn hao WebP.
Đối với các khối luma 4x4, có thêm 6 chế độ nội tại tương tự như V_PRED và H_PRED, nhưng tương ứng với việc dự đoán pixel theo các hướng khác nhau. Bạn có thể xem thêm thông tin chi tiết về các chế độ này trong Hướng dẫn về luồng bit VP8.
Lượng tử hoá khối thích ứng
Để cải thiện chất lượng, hình ảnh sẽ được phân thành các khu vực có các đặc điểm rõ ràng tương tự nhau. Đối với mỗi phân đoạn này, các thông số nén (bước lượng tử hoá, cường độ lọc, v.v.) được điều chỉnh một cách độc lập. Điều này mang lại quá trình nén hiệu quả bằng cách phân phối lại các bit đến vị trí hữu ích nhất. VP8 cho phép tối đa 4 phân đoạn (giới hạn của luồng bit VP8).
Lý do WebP (lossy) tốt hơn JPEG
Lập trình dự đoán là lý do chính khiến WebP thắng so với JPEG. Việc chặn lượng tử thích ứng cũng tạo ra sự khác biệt lớn. Tính năng lọc hoạt động ở tốc độ bit trung bình/thấp. Phương thức mã hoá số học Boolean có mức độ nén là 5% – 10% so với phương thức mã hoá Huffman.
WebP không tổn hao
Phương thức mã hoá không tổn hao WebP dựa trên việc chuyển đổi hình ảnh bằng một số kỹ thuật khác nhau. Sau đó, mã hoá entropy được thực hiện trên các thông số biến đổi và dữ liệu hình ảnh đã biến đổi. Các phép biến đổi áp dụng cho hình ảnh bao gồm thông tin dự đoán về không gian của pixel, biến đổi không gian màu, sử dụng bảng màu mới nổi cục bộ, gói nhiều pixel thành một pixel và thay thế alpha. Để mã hoá entropy, chúng tôi sử dụng một biến thể mã LZ77-Huffman. Biến thể này sử dụng phương thức mã hoá 2D cho các giá trị khoảng cách và các giá trị thưa thớt nhỏ gọn.
Biến đổi công cụ dự đoán (Không gian)
Dự đoán không gian được dùng để giảm entropy bằng cách khai thác thực tế là các pixel lân cận thường có tương quan. Trong biến đổi công cụ dự đoán, giá trị pixel hiện tại được dự đoán từ các pixel đã được giải mã (theo thứ tự dòng quét) và chỉ giá trị còn lại (thực tế - dự đoán) được mã hoá. Chế độ dự đoán xác định loại thông tin dự đoán sẽ sử dụng. Hình ảnh được chia thành nhiều vùng hình vuông và tất cả các pixel trong một hình vuông đều sử dụng cùng một chế độ dự đoán.
Có 13 chế độ dự đoán khác nhau. Các pixel phổ biến là pixel bên trái, trên cùng, trên cùng bên trái và trên cùng bên phải. Các chỉ số còn lại là sự kết hợp (trung bình) giữa bên trái, trên cùng, trên cùng bên trái và trên cùng bên phải.
Chuyển đổi màu (loại bỏ tương quan)
Mục tiêu của việc biến đổi màu là trang trí các giá trị R, G và B của từng pixel. Tính năng biến đổi màu giữ nguyên giá trị màu xanh lục (G) như hiện tại, chuyển đổi màu đỏ (R) dựa trên màu xanh lục và chuyển đổi màu xanh lam (B) dựa trên màu xanh lục và sau đó dựa trên màu đỏ.
Tương tự như trường hợp biến đổi dự đoán, trước tiên, hình ảnh được chia thành các khối và cùng một chế độ biến đổi được sử dụng cho tất cả pixel trong một khối. Đối với mỗi khối, có 3 loại phần tử biến đổi màu: xanh lục sang đỏ, xanh lục và xanh dương và đỏ sang xanh dương.
Trừ đi Biến đổi màu xanh lục
"Phép biến đổi màu xanh lục trừ đi" trừ các giá trị màu xanh lục khỏi các giá trị màu đỏ và màu xanh của mỗi pixel. Khi có sự biến đổi này, bộ giải mã cần thêm giá trị màu xanh lục vào cả màu đỏ và màu xanh dương. Đây là trường hợp đặc biệt của sự biến đổi tương quan màu chung nêu trên, đủ thường xuyên để đảm bảo một phần cắt bỏ.
Chuyển đổi lập chỉ mục màu (bảng màu)
Nếu không có nhiều giá trị pixel duy nhất, việc tạo một mảng chỉ mục màu và thay thế các giá trị pixel bằng các chỉ mục của mảng có thể sẽ hiệu quả hơn. Sự biến đổi lập chỉ mục màu đạt được điều này. Phép biến đổi lập chỉ mục màu kiểm tra số lượng giá trị ARGB duy nhất trong hình ảnh. Nếu số đó thấp hơn ngưỡng (256), hệ thống sẽ tạo một mảng gồm các giá trị ARGB đó, sau đó được dùng để thay thế các giá trị pixel bằng chỉ mục tương ứng.
Mã hoá bộ nhớ đệm màu
Tính năng nén WebP không tổn hao sử dụng các mảnh hình ảnh đã xem để tạo lại các pixel mới. Công cụ này cũng có thể sử dụng bảng màu cục bộ nếu không tìm thấy kết quả phù hợp thú vị nào. Bảng màu này được cập nhật liên tục để sử dụng lại các màu gần đây. Ở hình ảnh dưới đây, bạn có thể thấy bộ nhớ đệm màu cục bộ đang được cập nhật dần dần với 32 màu được sử dụng gần đây khi quá trình quét đi xuống.
Tham chiếu lùi LZ77
Tham chiếu ngược là các bộ dữ liệu về độ dài và khoảng cách. Độ dài cho biết số lượng pixel theo thứ tự dòng quét sẽ được sao chép. Mã khoảng cách là một số cho biết vị trí của một pixel đã nhìn thấy trước đó, từ đó các pixel sẽ được sao chép. Giá trị độ dài và khoảng cách được lưu trữ bằng mã hoá tiền tố LZ77.
Việc mã hoá tiền tố LZ77 chia các giá trị số nguyên lớn thành hai phần: mã tiền tố và các bit thừa. Mã tiền tố được lưu trữ bằng mã entropy, trong khi các bit bổ sung được lưu trữ nguyên trạng (không có mã entropy).
Sơ đồ dưới đây minh hoạ LZ77 (biến thể 2D) với tính năng khớp từ (thay vì pixel).
WebP suy hao với Alpha
Ngoài WebP có tổn hao (màu RGB) và WebP không suy hao (RGB không tổn hao với alpha), còn có một chế độ WebP khác cho phép mã hoá có tổn hao cho các kênh RGB và mã hoá không tổn hao cho kênh alpha. Khả năng như vậy (RGB mất dữ liệu và alpha không mất dữ liệu) hiện không có sẵn với bất kỳ định dạng hình ảnh hiện có nào. Ngày nay, các quản trị viên trang web cần độ trong suốt phải mã hoá hình ảnh không tổn hao ở định dạng PNG, dẫn đến kích thước tăng lên đáng kể. WebP alpha mã hoá hình ảnh với số bit thấp trên mỗi pixel và cung cấp cách hiệu quả để giảm kích thước của những hình ảnh đó. Tính năng nén không tổn hao của kênh alpha chỉ thêm 22% byte so với phương thức mã hoá WebP có tổn hao (chất lượng 90).
Nhìn chung, việc thay thế tệp PNG trong suốt bằng WebP có tổn hao + alpha sẽ giúp tiết kiệm trung bình 60-70% kích thước. Đây là tính năng được xác nhận là một tính năng thu hút tuyệt vời cho các trang web dành cho thiết bị di động có nhiều biểu tượng (ví dụ như everything.me).
