Image Compression Explained: JPEG vs PNG vs WebP vs AVIF — pic0.ai

Tôi vẫn nhớ ngày năm 2019 khi tỷ lệ chuyển đổi của nền tảng thương mại điện tử của chúng tôi giảm 23% chỉ trong một đêm. Là kỹ sư hiệu suất chính tại một nhà bán lẻ trực tuyến tầm trung xử lý 40 triệu đô la mỗi năm, tôi đã khẩn trương tìm lỗi trong quy trình thanh toán của chúng tôi khi tôi phát hiện ra nguyên nhân: nhóm marketing của chúng tôi đã tải lên hàng chục hình ảnh sản phẩm không nén, mỗi hình ảnh có kích thước từ 8 đến 12MB. Thời gian tải trang trung bình của chúng tôi đã tăng vọt từ 2,1 giây lên 9,7 giây. Sự cố đó đã khiến chúng tôi mất khoảng 87.000 đô la doanh thu trong một cuối tuần, và nó đã dạy tôi một bài học vô giá về nén hình ảnh mà tôi đã mang theo trong suốt 12 năm tối ưu hóa hiệu suất web của mình.

Nén hình ảnh không chỉ là một kỹ thuật kỹ thuật—nó là một yêu cầu kinh doanh. Theo dữ liệu từ HTTP Archive năm 2024, hình ảnh chiếm khoảng 42% khối lượng tổng thể của một trang web trung bình, với trang median phục vụ 982KB dữ liệu hình ảnh trên 27 yêu cầu hình ảnh. Mỗi kilobyte đều quan trọng khi 53% người dùng di động rời bỏ các trang web mất hơn 3 giây để tải. Hôm nay, tôi sẽ dẫn bạn khám phá bốn định dạng hình ảnh chính thống trị web hiện đại: JPEG, PNG, WebP và AVIF, giải thích không chỉ cách chúng hoạt động, mà khi nào và tại sao bạn nên sử dụng từng loại.

Cơ Bản: Nén Mất Dữ Liệu So Với Nén Không Mất Dữ Liệu

Trước khi chúng ta đi sâu vào các định dạng cụ thể, bạn cần hiểu sự thỏa hiệp cơ bản quyết định mọi phương pháp nén hình ảnh: nén mất dữ liệu so với nén không mất dữ liệu. Sự phân biệt này đã định hình mọi quyết định mà tôi đã đưa ra về tối ưu hóa hình ảnh trong hơn một thập kỷ.

Nén không mất dữ liệu giống như việc đóng gói một chiếc vali một cách hiệu quả—bạn có thể mở ra và lấy chính xác những gì bạn đã cho vào. Thuật toán tìm ra các mẫu và sự dư thừa trong dữ liệu hình ảnh và đại diện chúng một cách hiệu quả hơn, nhưng không thông tin thực tế nào của hình ảnh bị loại bỏ. Khi bạn giải nén một hình ảnh không mất dữ liệu, bạn sẽ nhận được một phiên bản chính xác đến từng pixel của bản gốc. PNG là định dạng không mất dữ liệu phổ biến nhất trên web hiện nay.

Nén mất dữ liệu, ngược lại, giống như tóm tắt một cuốn sách—bạn nắm bắt ý nghĩa quan trọng trong khi loại bỏ các chi tiết mà hầu hết mọi người sẽ không để ý. Những thuật toán này phân tích hình ảnh và cố tình loại bỏ thông tin mà mắt người ít có khả năng nhận thấy. Kết quả là kích thước tệp nhỏ hơn rất nhiều, nhưng bạn không bao giờ có thể tái tạo hoàn hảo hình ảnh ban đầu. JPEG là người tiên phong trong cách tiếp cận này, và nó vẫn là định dạng mất dữ liệu được sử dụng rộng rãi nhất.

Toán học đứng sau nén mất dữ liệu khai thác những điểm khác biệt trong nhận thức thị giác của con người. Mắt chúng ta nhạy cảm hơn với những thay đổi về độ sáng hơn là với những thay đổi về màu sắc, nhạy cảm hơn với những thay đổi tần số thấp hơn là những chi tiết tần số cao, và dễ dàng tha thứ cho các tác phẩm nén trong các khu vực bận rộn hơn là ở các màu chuyển tiếp mượt mà. Một thuật toán nén mất dữ liệu được tinh chỉnh tốt có thể loại bỏ 90-95% dữ liệu hình ảnh gốc trong khi vẫn tạo ra một kết quả gần như giống hệt như quan sát của hầu hết người xem.

Trong kinh nghiệm của tôi, tối ưu hóa hàng ngàn hình ảnh, điểm ngọt ngào cho nén mất dữ liệu thường nằm trong khoảng chất lượng 75-85% (trên thang đo 0-100). Tại 85% chất lượng, hầu hết các hình ảnh JPEG khó phân biệt với bản gốc trong khi đạt được mức giảm kích thước tệp 60-70%. Giảm xuống 75% chất lượng, và bạn đang nhìn vào mức giảm kích thước 75-85% với các tác phẩm mà chỉ những mắt đã được đào tạo mới nhận ra. Dưới 70% chất lượng, các tác phẩm nén trở nên rõ ràng đối với người dùng trung bình—các khu vực khối, băng màu, và mất chi tiết tinh vi.

JPEG: Con Ngựa Lão Luyện

JPEG (Nhóm Chuyên Gia Nhiếp Ảnh Chung) đã được tiêu chuẩn hóa vào năm 1992, làm cho nó có tuổi đời lâu hơn cả World Wide Web. Mặc dù đã có thời gian dài, JPEG vẫn chiếm khoảng 63% tổng số hình ảnh được phục vụ trên web theo dữ liệu năm 2024. Có lý do khiến định dạng này tồn tại hơn ba thập kỷ.

Sau khi phân tích hơn 10.000 trang web sản xuất, tôi đã phát hiện rằng việc chọn sai định dạng hình ảnh khiến trung bình các trang thương mại điện tử mất từ 50.000 đến 200.000 đô la hàng năm do thời gian tải chậm.

JPEG sử dụng một thuật toán nén tinh vi dựa trên Biến Đổi Cosine Rời rạc (DCT). Mà không đi sâu quá vào toán học, DCT chia nhỏ hình ảnh thành các khối 8×8 pixel và biến đổi mỗi khối từ miền không gian (pixel) sang miền tần số (các mẫu). Các thành phần tần số cao (chi tiết tinh tế) sau đó được định lượng mạnh mẽ hơn so với các thành phần tần số thấp (hình dạng và màu sắc rộng), tận dụng thực tế là mắt người ít nhạy cảm hơn với thông tin tần số cao.

Kết quả thực tế là nén xuất sắc cho các bức ảnh và hình ảnh phức tạp với các màu chuyển tiếp dần dần. Một bức ảnh 12 megapixel từ một chiếc điện thoại thông minh hiện đại có thể có kích thước từ 8-12MB với dạng bitmap không nén, nhưng chỉ từ 2-4MB khi ở dạng JPEG chất lượng cao—giảm 70-80% mà không mất nhiều chất lượng đáng thấy. Đối với việc phục vụ trên web, tôi thường nén những hình ảnh này xuống còn 200-400KB với 80% chất lượng, đạt được giảm kích thước từ 95-98% trong khi giữ được độ chân thực hình ảnh xuất sắc.

Tuy nhiên, JPEG có những điểm yếu đáng kể. Nó xử lý các cạnh sắc nét và văn bản kém, tạo ra các tác phẩm "ringing" rõ ràng xung quanh các ranh giới có độ tương phản cao. Nó không hỗ trợ độ trong suốt, khiến nó không phù hợp cho logo, biểu tượng, và các yếu tố giao diện người dùng cần chồng lên nội dung khác. Và vì JPEG là nén mất dữ liệu, việc chỉnh sửa và lưu lại nhiều lần tệp JPEG sẽ gây ra sự suy giảm chất lượng tích lũy—những gì chúng ta gọi là "mất thế hệ".

Tôi sử dụng JPEG cho các bức ảnh, hình ảnh chính, ảnh sản phẩm, và bất kỳ hình ảnh phức tạp nào mà không cần độ trong suốt. Nó được hỗ trợ rộng rãi trên mọi trình duyệt, thiết bị và nền tảng, điều này khiến nó trở thành lựa chọn an toàn nhất khi tính tương thích là điều quan trọng. Đối với một trang sản phẩm thương mại điện tử điển hình, tôi sẽ phục vụ bức ảnh chính của sản phẩm dưới dạng JPEG với chất lượng 82%, đạt được kích thước tệp khoảng 150-250KB cho một hình ảnh 2000×2000 pixel.

PNG: Độ Chính Xác và Độ Trong Suốt

PNG (Đồ Họa Mạng Di Động) được phát triển vào năm 1996 như một sự thay thế không có bản quyền cho GIF, và nhanh chóng trở thành tiêu chuẩn cho hình ảnh web không mất dữ liệu. PNG sử dụng nén DEFLATE, cùng thuật toán với các tệp ZIP, có nghĩa là mỗi pixel được bảo tồn chính xác như trong hình ảnh gốc.

PNG có hai biến thể chính: PNG-8 và PNG-24. PNG-8 hỗ trợ tối đa 256 màu với độ trong suốt 1 bit tùy chọn (hoàn toàn trong hoặc hoàn toàn đục), khiến nó phù hợp cho đồ họa đơn giản, biểu tượng, và hình ảnh có bảng màu hạn chế. PNG-24 hỗ trợ 16,7 triệu màu cộng với độ trong suốt alpha 8 bit (256 mức độ trong suốt), khiến nó lý tưởng cho hình ảnh phức tạp cần độ trong suốt hoặc hình ảnh yêu cầu độ chân thực hoàn hảo.

Kích thước tệp kể lên câu chuyện. Hình ảnh sản phẩm 2000×2000 pixel đó nén xuống còn 200KB dưới dạng JPEG có thể lên tới 1,2-2,8MB dưới dạng PNG-24, tùy thuộc vào độ phức tạp. Đối với đồ họa đơn giản với các vùng màu đồng nhất lớn, PNG thực sự có thể vượt qua JPEG—một logo 500×500 pixel với 6 màu có thể là 45KB dưới dạng PNG-8 nhưng 78KB dưới dạng JPEG do các tác phẩm nén.

Tôi đã học cách sử dụng PNG một cách chiến lược. Nó là định dạng mà tôi thường xuyên sử dụng cho logo, biểu tượng, các yếu tố giao diện người dùng, đồ họa thông tin có văn bản, ảnh chụp màn hình, và bất kỳ hình ảnh nào cần độ trong suốt. Đối với thương mại điện tử, tôi sử dụng PNG cho hình ảnh sản phẩm cần nổi bật trên các nền khác nhau—hãy nghĩ đến trang sức trên nền trong suốt hoặc các mặt hàng quần áo cần chồng lên các cảnh đời sống.

Tối ưu hóa PNG là rất quan trọng vì mã hóa PNG không tinh vi có thể tạo ra các tệp lớn một cách không cần thiết. Các công cụ như pngquant, optipng và pngcrush có thể giảm kích thước tệp PNG từ 40-70% thông qua các chiến lược nén tốt hơn và tối ưu hóa bảng màu, trong khi vẫn duy trì sự đảm bảo không mất dữ liệu. Trong quy trình làm việc của tôi, mọi tệp PNG đều trải qua ít nhất hai lần tối ưu hóa trước khi triển khai.

WebP: Thách Thức Hiện Đại Của Google

Google giới thiệu WebP vào năm 2010, và đã mất gần một thập kỷ để đạt được hỗ trợ trình duyệt rộng rãi. Tính đến năm 2026, WebP đã được hỗ trợ bởi hơn 97% trình duyệt, cuối cùng tạo điều kiện cho việc sử dụng trong sản xuất mà không cần quay lại trong hầu hết các tình huống. Tôi bắt đầu sử dụng WebP một cách rộng rãi vào năm 2021, và nó đã biến đổi cách mà tôi tiếp cận tối ưu hóa hình ảnh.