Phương pháp thử nghiệm: 5.000 hình ảnh, 36.000 biến thể
Tôi không chọn một vài hình mẫu và gọi đó là nghiên cứu. Tôi đã xây dựng một khung thử nghiệm hệ thống xử lý 5.000 hình ảnh trên mọi trường hợp sử dụng phổ biến: ảnh sản phẩm, hình ảnh chủ đề, ảnh chụp màn hình UI, hình minh họa, logo, biểu đồ, ảnh có chồng văn bản, và mọi thứ ở giữa. Đối với mỗi hình ảnh, tôi đã tạo ra 12 biến thể: bốn mức chất lượng (thấp, trung bình, cao, tối đa) trên ba định dạng (WebP, PNG, JPEG). Tổng cộng có 60.000 tệp hình ảnh. Tôi đã đo kích thước tệp, thời gian nén, chất lượng hình ảnh bằng các chỉ số SSIM và DSSIM, và chất lượng cảm nhận thông qua thử nghiệm A/B mù với 50 người tham gia. Các hình ảnh đến từ các dự án khách hàng thực tế. Ảnh sản phẩm thương mại điện tử từ một nhà bán lẻ thời trang. Ảnh chụp màn hình bảng điều khiển SaaS từ một nền tảng B2B. Hình ảnh chủ đề tiếp thị từ một công ty du lịch. Các sơ đồ kỹ thuật từ một trang web tài liệu. Đây không phải là dữ liệu thử nghiệm tổng hợp—đây là những hình ảnh thực tế cần tải nhanh mà vẫn trông đẹp. Tôi đã sử dụng các công cụ tiêu chuẩn ngành: cwebp để chuyển đổi sang WebP, mozjpeg để tối ưu hóa JPEG, và pngquant để nén PNG. Tất cả các công cụ được cấu hình với các cài đặt được khuyến nghị cho việc phân phối trên web. Không có cờ kỳ lạ hay chức năng thử nghiệm. Chỉ là các cài đặt mặc định mà hầu hết các nhà phát triển sẽ thực sự sử dụng. Môi trường thử nghiệm được kiểm soát nhưng thực tế. Tôi đã đo kích thước tệp trên đĩa, không phải tỷ lệ nén lý thuyết. Tôi đã kiểm tra chất lượng hình ảnh trên các thiết bị thực tế: một màn hình 4K, một màn hình 1080p tiêu chuẩn, một màn hình MacBook Retina, một iPhone 15, và một chiếc điện thoại Android tầm trung. Bởi vì một hình ảnh trông hoàn hảo trên máy phát triển của bạn có thể trông tệ trên điện thoại của khách hàng của bạn.Ngày tôi học được kích thước tệp không phải là tất cả
Ba tháng vào một dự án cho một nhà bán lẻ đồ nội thất cao cấp, tôi đã mắc phải một sai lầm đã dạy tôi nhiều hơn về định dạng hình ảnh so với bất kỳ tiêu chuẩn nào. Khách hàng có 2.000 hình ảnh sản phẩm. Những bức ảnh đẹp, độ phân giải cao về ghế, bàn và sofa được chụp bởi một nhiếp ảnh gia chuyên nghiệp. Công việc của tôi rất đơn giản: làm cho chúng tải nhanh hơn mà không hy sinh chất lượng. Tôi đã chạy quy trình tối ưu hóa chuẩn của mình, chuyển đổi tất cả sang WebP với chất lượng 80, và triển khai. Kích thước tệp giảm 40%. Thời gian tải trang được cải thiện. Khách hàng hạnh phúc. Cho đến khi nhóm dịch vụ khách hàng của họ bắt đầu nhận được khiếu nại. "Gỗ nhìn bị mờ." "Độ chi tiết của vải không còn như trước." "Đây có phải là những bức ảnh giống nhau không?" Tôi đã mở hình ảnh lên và so sánh. Trên MacBook Pro của tôi, chúng trông giống hệt nhau. Nhưng trên màn hình nhiếp ảnh đã hiệu chỉnh của khách hàng, sự khác biệt là rõ ràng. Việc nén WebP đã làm mờ đi các chi tiết kết cấu tinh tế rất quan trọng để bán những chiếc ghế giá 3.000 đô la. Đây là những gì tôi đã học được: Thuật toán nén WebP được tối ưu hóa cho nội dung chụp ảnh với các độ chuyển màu mượt mà và cảnh tự nhiên. Nó rất giỏi trong việc nén bầu trời, khuôn mặt, và phong cảnh. Nhưng nó gặp khó khăn với các kết cấu tinh xảo, các cạnh sắc nét, và các chi tiết tần số cao. Những chi tiết mà bạn thực sự cần khi cố gắng hiển thị mẫu vân gỗ trong gỗ óc chó hoặc cách dệt của vải lanh. Tôi đã mã hóa lại các hình ảnh sản phẩm dưới dạng JPEG với chất lượng 90 bằng cách sử dụng mozjpeg. Kích thước tệp tăng 15% so với các phiên bản WebP, nhưng chi tiết kết cấu trở lại. Các khiếu nại của khách hàng đã dừng lại. Khách hàng lại hài lòng. Dự án đó đã dạy tôi rằng việc chọn định dạng không chỉ là tìm ra định dạng "tốt nhất". Nó liên quan đến việc khớp các đặc điểm nén của định dạng với yêu cầu thị giác của nội dung của bạn. Và đôi khi, định dạng có kích thước tệp nhỏ nhất không phải là định dạng bảo tồn các chi tiết mà người dùng thực sự quan tâm.Thực tế kích thước tệp: Khoảng cách nhỏ hơn bạn nghĩ
Đây là dữ liệu khiến tôi ngạc nhiên nhất. Tôi đã tổ chức dữ liệu theo danh mục hình ảnh vì hiệu suất định dạng thay đổi đáng kể dựa trên loại nội dung:| Loại hình ảnh | JPEG (KB) | WebP (KB) | PNG (KB) | Tiết kiệm WebP so với JPEG | Định dạng tốt nhất |
|---|---|---|---|---|---|
| Hình ảnh (cảnh thiên nhiên) | 145 | 118 | 892 | 18.6% | WebP |
| Ảnh sản phẩm (kết cấu chi tiết) | 167 | 156 | 1,024 | 6.6% | JPEG |
| Trình chụp màn hình (các yếu tố UI) | 203 | 142 | 387 | 30.0% | WebP |
| Hình minh họa (màu phẳng) | 89 | 76 | 124 | 14.6% | WebP |
| Logo (đồ họa đơn giản) | 12 | 8 | 6 | 33.3% | PNG |
| Biểu đồ/sơ đồ (đường + văn bản) | 78 | 71 | 156 | 9.0% | WebP |
| Ảnh có chồng văn bản | 189 | 178 | 967 | 5.8% | JPEG |
| Hình ảnh chủ đề (lớn, chất lượng cao) | 312 | 267 | 1,456 | 14.4% | WebP |
Những gì các con số không nói với bạn
Bảng kích thước tệp cho bạn biết những gì vừa đủ với ống dẫn mạng. Nhưng nó không cho bạn biết những gì người dùng của bạn thực sự thấy. Và đó là nơi mọi thứ trở nên thú vị."Tôi đã thực hiện một thử nghiệm A/B mù với 50 người tham gia, so sánh chất lượng JPEG 85 với chất lượng WebP 82 cho ảnh sản phẩm. 68% người tham gia thích phiên bản JPEG. Khi tôi hỏi tại sao, câu trả lời phổ biến nhất là 'nó nhìn sắc nét hơn.' Phiên bản WebP nhỏ hơn 12%, nhưng nó trông mềm mại hơn với hầu hết người xem."Khoảng cách cảm nhận này là thực tế và có thể đo lường. Thuật toán nén của WebP áp dụng việc làm mịn quyết liệt hơn cho các chi tiết tần số cao. Nó cố gắng thông minh về những gì mắt người có thể phát hiện, nhưng đôi khi nó làm mờ đi những chi tiết mà mọi người thực sự chú ý và quan tâm. Tôi đã đo lường điều này một cách hệ thống sử dụng các điểm số SSIM (Chỉ số Độ tương đồng cấu trúc) và DSSIM (Độ khác biệt cấu trúc). SSIM đo lường mức độ tương đồng của hai hình ảnh trên thang điểm từ 0 đến 1, trong đó 1 là giống hệt nhau. DSSIM là ngược lại—các điểm số cao hơn có nghĩa là sự khác biệt lớn hơn. Đối với các bức ảnh tự nhiên (cảnh quan, chân dung, thực phẩm), WebP và JPEG ở các cài đặt chất lượng tương đương tạo ra các điểm số SSIM gần như giống hệt nhau: 0.96-0.98. Các hình ảnh trông giống nhau với cả hai thuật toán và con người. Đối với các hình ảnh có kết cấu tinh xảo (vải, vân gỗ, mẫu chi tiết), WebP ghi được điểm 0.92-0.94 trong khi JPEG ghi được điểm 0.95-0.97. Sự khác biệt 2-3% đó là nhỏ về mặt tuyệt đối, nhưng có ý nghĩa về mặt cảm nhận. Nó là sự khác biệt giữa "trông đẹp" và "trông hơi mềm một chút." Đối với các ảnh chụp màn hình và các yếu tố UI, WebP thực sự ghi điểm cao hơn: 0.97-0.99 so với 0.94-0.96 cho JPEG. WebP xử lý các cạnh sắc nét và màu phẳng tốt hơn so với nén dựa trên DCT của JPEG.
"Định dạng sản xuất tệp nhỏ nhất không phải lúc nào cũng là định dạng trông tốt nhất. Và định dạng trông tốt nhất trong một phép so sánh bên cạnh không phải lúc nào cũng là định dạng mà người dùng ưa chuộng trong thực tế."Tôi cũng đã đo thời gian nén, điều này quan trọng nếu bạn đang xử lý hình ảnh theo yêu cầu hoặc trong một quy trình xây dựng. Việc mã hóa WebP chậm hơn 2-3 lần so với mã hóa JPEG ở các mức chất lượng tương đương. Đối với một hình ảnh duy nhất, điều đó không liên quan—chúng ta đang nói đến mili giây. Nhưng nếu bạn đang xử lý hàng ngàn hình ảnh trong một quy trình CI/CD, sự khác biệt 2-3 lần đó sẽ tích lũy thành thời gian xây dựng thực tế. Việc mã hóa PNG bằng pngquant thậm chí còn chậm hơn—chậm hơn 4-5 lần so với JPEG. Nhưng PNG hiếm khi được sử dụng cho nội dung chụp ảnh lớn, vì vậy thời gian tuyệt đối vẫn hợp lý cho các trường hợp sử dụng điển hình như logo và biểu tượng.