Mã hóa không mất dữ liệu và mã hóa thuộc tính trong suốt ảnh PNG thành WebP

hệ số nén ảnh của PNG và WebP

Tóm tắt – Chúng tôi so sánh việc sử dụng tài nguyên của bộ mã hóa/giải mã WebP với PNG trong cả hai chế độ nén không mất dữ liệu và mất dữ liệu (lossless and lossy modes). Chúng tôi sử dụng mẫu (corpus) gồm 12 ngàn ảnh PNG lựa chọn ngẫu nhiên có thuộc tính trong suốt từ web, và các phép đo đơn giản để cho thấy các thay đổi về mặt hiệu suất. Chúng tôi nén lại các ảnh PNG trong mẫu của chúng tôi để so sánh ảnh WebP về mặt dung-lượng-PNG-đã-được-tối-ưu. Kết quả của chúng tôi cho thấy ảnh định dạng WebP là thay thế tốt cho ảnh PNG để sử dụng trên web trên cả hai khía cạnh là dung lượng và tốc độ xử lý (size and processing speed).

Giới thiệu

WebP hỗ trợ cả ảnh không mất dữ liệu và trong suốt (translucent), làm nó có khả năng thay thế được cho định dạng PNG. Nhiều kỹ thuật nền tảng vốn được sử dụng trong nén PNG, chẳng hạn như từ điển mã hóa, mã hóa Huffman và biến đổi chỉ mục màu cũng được hỗ trợ trong WebP, với các kết quả về tốc độ và mật độ nén (compression density) tương tự trong trường hợp xấu nhất. Cùng lúc đó, số lượng các tính năng mới – chẳng hạn như mã entropy chia tách cho các kênh màu khác nhau, 2D cục bộ của khoảng cách tham chiếu ngược, và bộ đệm màu của các màu sắc sử dụng gần đây – cho phép cải thiện mật độ nén với hầu hết các ảnh.

Trong bài này, chúng tôi so sánh hiệu năng của WebP so với PNG với hệ số nén cao sử dụng pngcrush và ZopfliPNG. Chúng tôi nén lại mẫu ảnh trên web của mình sử dụng các thực hành tốt nhất, và so sánh với nén WebP ở cả dạng mất dữ liệu và không mất dữ liệu. Ngoài dữ liệu mẫu tham khảo, chúng tôi chọn ra hai ảnh lớn, một cái là ảnh chụp (photographic), cái còn lại là đồ họa (graphical), để kiểm tra tốc độ và bộ nhớ, sử dụng điểm chuẩn so sánh.

Tốc độ giải mã nhanh hơn so với PNG đã được chứng minh, cũng như mật độ nén tốt hơn 23% so với định dạng PNG đang đạt được ở thời điểm hiện tại. Chúng tôi đi đến kết luận rằng WebP là thay thế hiệu quả hơn cho định dạng PNG ở thời điểm hiện tại. Hơn nữa, ảnh nén mất dữ liệu với không mất dữ liệu kênh alpha cho khả năng tốt hơn nữa trong việc tăng tốc website.

Phương pháp

Các công cụ dòng lệnh

Chúng tôi sử dụng các công cụ dòng lệnh sau để đo hiệu năng:

  1. cwebp và dwebp. Các công cụ này là một phần của thư viện libwebp
  2. chuyển đổi/convert. Đây là công cụ dòng lệnh nằm trong phần mềm ImageMagick (6.7.7-10 2017-07-21)
  3. pngcrush 1.8.12 (30/7/2017)
  4. ZopfliPNG (17/7/2017)

Chúng tôi sử dụng công cụ dòng lệnh với cờ điều khiển tương ứng của chúng. Lấy ví dụ, nếu chúng tôi đề cập tới cwebp -q 1 -m 0, nó có nghĩa là công cụ cwebp đã được gọi lên với cờ -q 1 và -m 0.

Tập ảnh mẫu

Có 3 tập mẫu được chúng tôi chọn lựa:

  1. Một ảnh chụp (hình 1),
  2. Một ảnh đồ họa với thuộc tính trong suốt (hình 2), và
  3. Một tập ảnh web: với 12 ngàn ảnh PNG được lựa chọn ngẫu nhiên với thuộc tính trong suốt hoặc không, được thu thập trên internet. Những ảnh PNG này được tối ưu hóa thông qua chuyển đổi, pngcrush, ZopfliPNG và phiên bản nhỏ nhất của mỗi ảnh được xem xét đánh giá cho nghiên cứu.

hét ra lửa

Hình 1: Ảnh chụp, kích cỡ 1024 x 752 pixels. Nhịp thở lửa “Ban nhạc Jaipur Maharaja” Chassepierre, Bỉ, tác giả: Luc Viatour, giấy phép ảnh: Creative Commons Attribution-Share Alike 3.0 Unported license. Website tác giả bức ảnh ở đây.

ảnh đồ họa

Hình 2. Ảnh đồ họa, 1024 x 752 pixels. Các ảnh được ghép từ công cụ Google Chart.

Để đo toàn bộ khả năng của định dạng hiện có PNG, chúng tôi tiến hành nén lại tất cả những ảnh gốc PNG sử dụng một số phương thức:

  1. Kẹp 8 bít cho mỗi thành phần: convert input.png -depth 8 output.png
  2. ImageMagick(1) không có dự đoán: convert input.png -qulity 90 output-candidate.png
  3. ImageMagick với dự đoán thích nghi: convert input.png -quality 95 output-candidate.png
  4. Pngcrush(2): pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png
  5. ZopfliPNG(3): zopflipng –lossy_transparent input.png output-candidate.png
  6. ZopfliPNG với tất cả lọc: zopflipng –iterations=500 –filters=01234mepb –lossy_8bit –lossy_transparent input.png output-candidate.png

Các kết quả

Chúng tôi tính toán mật độ nén của từng ảnh trong bộ dữ liệu mẫu, liên quan đến ảnh PNG đã được tối ưu kích cỡ cho ba phương pháp:

  1. Nén không mất dữ liệu WebP (các thiết lập mặc định)
  2. Nén không mất dữ dữ liệu WebP với kích cỡ nhỏ nhất có thể (-m 6 -q 100)
  3. Ảnh nén tốt hơn trong nén không mất dữ liệu WebP và nén mất dữ liệu WebP với alpha (các thiết lập mặc định).

Chúng tôi sắp xếp các hệ số nén này và minh họa chúng trong hình 3.

hệ số nén ảnh của PNG và WebP

Hình 3: Mật độ nén của PNG được sử dụng làm điểm tham chiếu, ở mốc 1.0. Cùng các ảnh được nén sử dụng trong cả phương thức không mất dữ liệu và mất dữ liệu. Với mỗi ảnh, tỷ lệ kích cỡ nén PNG được tính toán và tỷ lệ kích cỡ được sắp xếp, cho cả nén không mất dữ liệu và mất dữ liệu. Với đường cong nén mất dữ liệu thì nén không mất dữ liệu sẽ được chọn trong trường hợp nó cho ra ảnh WebP có kích cỡ nhỏ hơn.

WebP vượt qua mật độ nén PNG với cả libpng ở chất lượng cao nhất (chuyển đổi/convert) cũng như ZopfliPNG (Bảng 1), với tốc độ mã hóa (Bảng 2), và giải mã (Bảng 3) tương đương với PNG.

Bảng 1. Trung bình bít trên mỗi pixel cho ba mẫu sử dụng các phương thức khác nhau (thấp hơn thì tốt hơn).

Bộ Ảnhconvert -quality 95ZopfliPNGWebP không mất dữ liệu -q 0 -m 1WebP không mất dữ liệu (thiết lập mặc định)WebP không mất dữ liệu -m 6 -q 100WebP mất dữ liệu với alpha
ảnh chụp12.312.210.510.19.830.81
đồ họa1.361.050.880.710.700.51
web6.855.054.424.043.961.92

Bảng 2. Thời gian mã hóa trung bình cho mẫu nén và cho các phương thức nén khác (thấp hơn thì tốt hơn)

Bộ Ảnhconvert -quality 95ZopfliPNGWebP không mất dữ liệu -q 0 -m 1WebP không mất dữ liệu (thiết lập mặc định)WebP không mất dữ liệu -m 6 -q 100WebP mất dữ liệu với alpha
ảnh chụp0.500 s8.7 s0.293 s0.780 s8.440 s0.111 s
đồ họa0.179 s14.0 s0.065 s0.140 s3.510 s0.184 s
web0.040 s1.55 s0.017 s0.072 s2.454 s0.020 s

Bảng 3. Thời gian giải mã trung bình cho ba mẫu ảnh với các phương thức và thiết lập khác nhau

Bộ Ảnhconvert -quality 95ZopfliPNGWebP không mất dữ liệu -q 0 -m 1WebP không mất dữ liệu (thiết lập mặc định)WebP không mất dữ liệu -m 6 -q 100WebP mất dữ liệu với alpha
ảnh chụp0.027 s0.026 s0.027 s0.026 s0.0270.012 s
đồ họa0.049 s0.015 s0.005 s0.005 s0.0030.010 s
web0.007 s0.005 s0.003 s0.003 s0.0030.003 s

Chú thích:

  • ảnh chụp/photo
  • ảnh đồ họa/graphics
  • ảnh thu được tử web/web

Hồ sơ bộ nhớ

Với hồ sơ bộ nhớ, chúng tôi ghi lại kích cỡ tối đa được báo cáo bởi /user.bin.tim -v

Với mẫu ảnh quét trên mạng internet, kích cỡ của ảnh lớn nhất được xem là bộ nhớ sử dụng lớn nhất. Để giữ phép đo bộ nhớ có định nghĩa tốt hơn chúng tôi sử dụng bức ảnh chụp (hình 1) để có được cái nhìn tổng quan về việc sử dụng bộ nhớ. Ảnh đồ họa đưa ra cho các kết quả tương tự.

Chúng tôi đo 10 đến 19 MiB với libpng và ZopfliPNG, và 25MiB và 32MiB cho mã hóa WebP không mất dữ liệu tại thiết lập -q 0 -m 1, và -q 95 (với giá trị mặc định của -m) tương ứng.

Trong thí nghiệm về giải mã, convert -resize 1×1 sử dụng 10 MiB cho cả libpng và ZopfliPNG để tạo ra file PNG. Sử dụng cwebp, giải mã không mất dữ liệu WebP sử dụng 7 MiB, và giải mã mất dữ liệu sử dụng 3MiB.

Các kết luận

Chúng tôi vừa trình bày cả tốc độ mã hóa và giải mã của cùng một tệp các ảnh PNG. Có sự gia tăng trong việc sử dụng bộ nhớ trong pha mã hóa, nhưng pha giải mã cho thấy sự suy giảm lành mạnh, ít nhất là khi so sánh hành vi của cwebp với chuyển đổi của ImageMagick.

Mật độ nén tốt hơn đến hơn 99% trong số tất cả các ảnh trên web, điều đó gợi ý rằng có thể chuyển dễ dàng từ PNG sang WebP.

Khi WebP được chạy với các thiết lập mặc định, nó nén tốt hơn 42% so với libpng, và tốt hơn 23% so với ZopfliPNG. Điều đó gợi ý rằng WebP có khả năng đầy hứa hẹn trong việc tăng tốc các website nặng về hình ảnh.

Chú thích, tham khảo

  1. ImageMagick
  2. Pngcrush
  3. ZopfliPNG

Các tác giả:

Jyrki Alakuijala, Ph.D., Google, Inc.

Vincent Rabaud, Ph.D., Google, Inc.

(Dịch từ bài viết Lossless and Transparency Encoding in WebP – Website: Google Developers)

P/S: xem thêm ví dụ về 10 ảnh PNG đồ họa được chuyển sang webp.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top