AVIF nén hình ảnh một cách đại khái Nhỏ hơn 20% so với WebP ở cùng chất lượng, trong khi WebP mã hóa nhanh hơn nhiều lần và hoạt động ở nhiều nơi hơn. Cả hai đều là định dạng thế hệ tiếp theo bắt nguồn từ codec video: WebP từ VP8 năm 2010, AVIF từ AV1 mới hơn vào năm 2019. AVIF là trình nén mạnh hơn, hỗ trợ HDR và màu 12 bit. WebP là mặc định thực dụng, với sự hỗ trợ phần mềm rộng hơn và mã hóa nhanh hơn. Sự so sánh này bao gồm việc mỗi định dạng đến từ đâu, độ nén, tốc độ mã hóa, độ sâu màu, hỗ trợ trình duyệt, độ trong suốt và hoạt ảnh cũng như định dạng nào sẽ thắng cho một mục đích sử dụng nhất định.

Không chiến thắng hoàn toàn. AVIF tạo ra các tập tin nhỏ nhất và màu sắc rộng nhất; Ngày nay, WebP được sản xuất nhanh hơn và an toàn hơn để phục vụ. Nhiều trang web cung cấp cả hai, liệt kê AVIF đầu tiên và WebP thứ hai, với dự phòng JPG hoặc PNG cuối cùng, vì vậy mọi trình duyệt đều có định dạng tốt nhất mà nó có thể đọc được.

Mỗi định dạng đến từ đâu

Cả hai định dạng đều là ảnh tĩnh được lấy từ quá trình nén video. WebP lấy mã hóa từ VP8, một codec video của Google năm 2010, vì vậy nó đã có tuổi đời hơn một thập kỷ và được hỗ trợ kỹ lưỡng. AVIF lấy mã hóa từ AV1, một codec miễn phí bản quyền năm 2019 của Liên minh Truyền thông Mở, có các thành viên bao gồm Google, Netflix và Apple. AV1 là thế hệ đi trước VP8, đó là lý do tại sao AVIF nén mạnh hơn nhưng cũng đòi hỏi nhiều sức mạnh tính toán hơn.

Nén: AVIF thắng

Tính năng nén ưu tiên AVIF vì AV1 mới hơn và thông minh hơn. Trên cùng một bức ảnh với chất lượng phù hợp, AVIF đạt khoảng Nhỏ hơn 20% so với WebPvà nhỏ hơn nhiều so với JPG. AVIF cũng xử lý màu phẳng và chuyển màu một cách rõ ràng, tránh tạo dải hiển thị ở các định dạng yếu hơn. Đối với tệp nhỏ nhất có thể, AVIF là người chiến thắng và khoảng cách ngày càng tăng trên các hình ảnh có vùng mịn lớn.

Các hợp chất tiết kiệm trên một trang web có nhiều hình ảnh. Nếu WebP đã cắt hình ảnh của bạn xuống một phần ba dưới JPG, thì AVIF sẽ cắt thêm một phần năm nữa ở trên, do đó tổng mức giảm so với JPG ban đầu có thể đạt tới một nửa. Đối với các trang được đo lường trên Core Web Vitals, đó là mức tăng tốc độ có ý nghĩa.

Tốc độ mã hóa: WebP thắng

Mã hóa là nơi AVIF trả tiền cho việc nén của nó. AV1 nặng về mặt tính toán, vì vậy AVIF mã hóa chậm hơn nhiều lần so với WebP. Điều đó quan trọng khi một trang web xử lý hàng nghìn hình ảnh, tạo chúng nhanh chóng hoặc chạy trên tài nguyên máy chủ hạn chế. WebP mã hóa đủ nhanh để sử dụng trong thời gian thực, đó là một lý do khiến nó trở thành mặc định. Việc giải mã, những gì trình duyệt thực hiện để hiển thị hình ảnh, đều nhanh chóng đối với cả hai, do đó, khách truy cập cũng không cảm thấy bị chậm lại.

Độ sâu màu và HDR: AVIF thắng

Độ sâu màu phân biệt rõ ràng hai màu này. Hỗ trợ AVIF lên tới 12 bit cho mỗi kênh và HDR, do đó, nó chứa các hình ảnh có gam màu rộng và dải động cao mà WebP không thể làm được. Giới hạn WebP ở mức 8 bit cho mỗi kênh, giống như JPG. Đối với nhiếp ảnh, màn hình gam màu rộng hiện đại và nội dung HDR, AVIF là lựa chọn duy nhất trong số đó. Trên màn hình 8 bit tiêu chuẩn, sự khác biệt là không thể nhận thấy, nhưng trên phần cứng có khả năng AVIF hiển thị màu sắc mà WebP đơn giản là không thể lưu trữ.

Minh bạch và hoạt hình

Cả hai định dạng đều bao gồm độ trong suốt và hoạt ảnh, vì vậy cả hai định dạng đều không thắng ở đây. Mỗi người mang một kênh alpha đầy đủ, do đó, logo trong suốt vẫn có thể nhìn xuyên qua và cả hai đều hỗ trợ các clip hoạt hình nhỏ hơn nhiều so với GIF. Hoạt ảnh của AVIF nén chặt hơn nhờ AV1, trong khi hoạt ảnh của WebP được sản xuất nhanh hơn. Đối với đồ họa hoạt hình đơn giản, chắc chắn sẽ đánh bại GIF.

Hỗ trợ trình duyệt và phần mềm: WebP thắng

Hỗ trợ là lợi thế của WebP. Mọi trình duyệt hiện đại đều đã đọc WebP trong nhiều năm và có rất nhiều phần mềm, plugin và CDN xử lý việc đó. Hỗ trợ AVIF hiện đã được phổ biến rộng rãi trên các trình duyệt, bao gồm Chrome, Firefox và Safari, nhưng nó bám sát WebP và các trình soạn thảo trên máy tính để bàn, hệ thống cũ hơn và một số CDN còn tụt lại phía sau. Đối với một tệp phải mở một cách đáng tin cậy ngày nay trên phần mềm hỗn hợp, WebP là lựa chọn an toàn hơn.

Kích thước tập tin theo thực tế

Những con số thực làm cho giao dịch trở nên cụ thể. Một bức ảnh có dung lượng 400KB dưới dạng JPG có thể đạt gần 280KB dưới dạng WebP và khoảng 220KB dưới dạng AVIF ở cùng chất lượng. Đồ họa trong suốt có kích thước 120KB dưới dạng PNG có thể là 80KB dưới dạng WebP và 60KB dưới dạng AVIF. Các số liệu chính xác phụ thuộc vào hình ảnh, nhưng theo thứ tự: AVIF nhỏ nhất, WebP ở giữa, định dạng kế thừa lớn nhất. Chọn dựa trên việc liệu 20 phần trăm bổ sung có xứng đáng với việc mã hóa chậm hơn và hỗ trợ hẹp hơn của AVIF hay không.

Tốc độ giải mã và cảm nhận của khách truy cập

Giải mã chứ không phải mã hóa là những gì khách truy cập trải nghiệm và ở đây hai định dạng này gần giống nhau. Khi trình duyệt hiển thị một hình ảnh, nó phải giải mã nó và cả AVIF và WebP đều giải mã đủ nhanh để tải trang mượt mà. Việc tính toán AV1 nặng nề trong AVIF nằm ở phía mã hóa, được thực hiện một lần khi hình ảnh được tạo chứ không phải mỗi lần tải. Vì vậy, khách truy cập không bao giờ phải trả chi phí mã hóa cho AVIF; họ chỉ được hưởng lợi từ việc tải xuống nhỏ hơn.

Sự phân chia này quan trọng đối với cách bạn triển khai từng định dạng. Mã hóa AVIF trước thời hạn, trong bước xây dựng hoặc CDN và lưu kết quả vào bộ đệm. Không bao giờ mã hóa nó theo mọi yêu cầu vì điều đó sẽ đánh thuế máy chủ của bạn mà không mang lại lợi ích gì cho khách truy cập. WebP đủ dễ dàng để mã hóa nhanh chóng, nhưng AVIF thưởng cho thế hệ trước.

Xây dựng dự phòng trong HTML

Việc cung cấp cả hai định dạng sẽ sử dụng thành phần hình ảnh một cách an toàn, cho phép trình duyệt chọn nguồn tốt nhất mà nó hiểu được. Bạn liệt kê AVIF trước, WebP thứ hai và JPG hoặc PNG cuối cùng. Trình duyệt đọc danh sách và tải định dạng đầu tiên nó có thể giải mã, bỏ qua phần còn lại. Một trình duyệt hiện đại sử dụng AVIF, một trình duyệt cũ hơn sử dụng WebP và một trình duyệt cổ hơn sử dụng JPG. Không có khách truy cập nào nhìn thấy một hình ảnh bị hỏng và mỗi người sẽ nhận được tệp nhỏ nhất mà phần mềm của họ cho phép.

Hầu hết các hệ thống quản lý nội dung và CDN hình ảnh đều xây dựng đánh dấu này cho bạn, vì vậy, bạn tải lên một tệp và hệ thống sẽ tạo các định dạng và chuỗi dự phòng. Làm điều đó bằng tay là phù hợp đối với một trang web nhỏ, nhưng tự động hóa sẽ mở rộng quy mô tốt hơn trên hàng trăm hình ảnh.

AVIF dành cho chụp ảnh và HDR

Lợi thế về màu sắc của AVIF quan trọng nhất trong nhiếp ảnh. của nó Hỗ trợ màu 12-bit và HDR giữ dải âm rộng của máy ảnh hiện đại và đầu ra sống động của màn hình HDR, cả hai đều không thể lưu trữ trong WebP. Phong cảnh có bầu trời sáng và bóng tối giữ được nhiều chi tiết hơn ở cả AVIF. Trên màn hình gam màu rộng, màu đỏ và xanh bão hòa mà WebP sẽ cắt vẫn đúng.

Đối với đồ họa web hàng ngày trên màn hình tiêu chuẩn, lợi thế này là vô hình vì màn hình 8 bit không thể hiển thị phạm vi bổ sung. Nhưng đối với các trang web nhiếp ảnh, nội dung HDR và màn hình cao cấp, AVIF là trang duy nhất trong số hai trang cung cấp hình ảnh công bằng.

Chi phí máy chủ và công cụ của AVIF

Việc nén của AVIF không miễn phí tại thời điểm tạo. Phương tiện mã hóa chậm hơn của nó chi phí CPU cao hơn và thời gian xây dựng lâu hơn, giá trị này sẽ tăng lên khi một trang web tạo ra hàng nghìn hình ảnh. Các thư viện hình ảnh cũ hơn và một số trình soạn thảo cũng chưa thể ghi AVIF, vì vậy công cụ của bạn phải hỗ trợ nó. Ngược lại, WebP được hầu hết mọi thư viện hình ảnh xử lý và mã hóa nhanh chóng, điều này khiến nó trở thành lựa chọn ít ma sát nhất hiện nay.

Bài học rút ra thực tế là cân nhắc việc tiết kiệm thêm 20% kích thước so với chi phí mã hóa và khoảng cách về công cụ. Đối với hoạt động truyền thông lớn tối ưu hóa từng byte, AVIF giành được vị trí của mình. Đối với một trang web nhỏ, WebP mang lại hầu hết lợi ích mà không gặp trở ngại nào.

Định dạng nào thắng

Không chiến thắng cho mọi công việc. chọn AVIF cho các tệp nhỏ nhất, HDR và màu rộng khi công cụ của bạn hỗ trợ nó và thời gian mã hóa không phải là trở ngại. chọn WebP để mã hóa nhanh, hỗ trợ rộng rãi và mặc định an toàn ngày nay hoạt động trên nhiều phần mềm hơn. Thiết lập mạnh nhất phục vụ cả hai: AVIF đầu tiên, WebP thứ hai và dự phòng JPG hoặc PNG cuối cùng, vì vậy mỗi khách truy cập sẽ nhận được định dạng tốt nhất mà trình duyệt của họ có thể giải mã.

Cách tạo các định dạng này

Việc tạo các định dạng hiện đại không cần đến công cụ nặng nề cho WebP. của chúng tôi Công cụ chuyển đổi PNG sang WebP chạy trong trình duyệt của bạn, tập hợp các tệp và không thêm hình mờ. Mã hóa AVIF đòi hỏi khắt khe hơn nên thường được xử lý bằng CDN hình ảnh hoặc bước xây dựng thay vì công cụ trình duyệt nhanh. Đối với hầu hết các trang web, tạo WebP ngay bây giờ và thêm AVIF thông qua CDN của bạn sau này là cách thực tế.

Câu hỏi thường gặp

AVIF có làm chậm trang web của tôi khi tải không?

Không. AVIF giải mã nhanh; chỉ mã hóa là chậmvà quá trình mã hóa diễn ra một lần khi hình ảnh được tạo chứ không phải trên mỗi lần tải trang. Khách truy cập chỉ nhận được tải xuống nhỏ hơn.

Làm cách nào để phân phối AVIF với dự phòng WebP?

Sử dụng yếu tố hình ảnh. Liệt kê AVIF đầu tiên, WebP thứ hai, JPG hoặc PNG cuối cùngvà trình duyệt tải định dạng đầu tiên mà nó có thể giải mã.

AVIF có đáng giá cho một trang web nhỏ không?

Thường là chưa. WebP mang lại phần lớn sự tiết kiệm với ít trở ngại hơn, vì những thiếu sót về công cụ và mã hóa chậm của AVIF làm tăng thêm chi phí mà một trang web nhỏ hiếm khi cần đến.

AVIF có tốt hơn WebP không?

Về nén, có. AVIF nhỏ hơn khoảng 20 phần trăm và hỗ trợ HDR. WebP mã hóa nhanh hơn và có hỗ trợ rộng hơn, vì vậy đây là mặc định an toàn hơn hiện nay.

AVIF nhỏ hơn WebP bao nhiêu?

Xung quanh nhỏ hơn 20 phần trăm ở cùng chất lượng và nhỏ hơn nhiều so với JPG, vì AVIF sử dụng codec AV1 mới hơn.

Tại sao AVIF được sản xuất chậm hơn?

Bởi vì Mã hóa AV1 nặng về mặt tính toán. AVIF đánh đổi tốc độ mã hóa để nén tốt hơn, điều này quan trọng khi xử lý hình ảnh hàng loạt hoặc trên các máy chủ hạn chế.

WebP có hỗ trợ HDR không?

Không. Giới hạn WebP ở mức 8 bit cho mỗi kênh, vì vậy nó không thể lưu trữ HDR hoặc gam màu rộng. AVIF hỗ trợ tối đa 12 bit và HDR.

Trình duyệt nào hỗ trợ AVIF?

Chrome, Firefox và Safari hỗ trợ AVIF, mặc dù việc áp dụng WebP kém hơn và một số CDN cũng như trình chỉnh sửa bị chậm trễ. Cung cấp dự phòng WebP hoặc JPG cho khách hàng cũ.

Cả AVIF và WebP có giữ được tính minh bạch không?

Đúng. Cả hai đều mang kênh alpha đầy đủ, do đó, đồ họa trong suốt vẫn có thể nhìn xuyên qua ở cả hai định dạng, không giống như JPG.

AVIF hay WebP tốt hơn cho hoạt ảnh?

Cả hai đều đánh bại GIF; AVIF nén chặt hơn. Hoạt ảnh AVIF nhỏ hơn, tạo WebP nhanh hơn, vì vậy hãy chọn xem kích thước hay tốc độ mã hóa quan trọng hơn.

Tôi nên sử dụng AVIF hay WebP cho trang web của mình?

Phục vụ cả hai. AVIF đầu tiên cho tệp nhỏ nhất, WebP thứ hai để tương thích, với dự phòng JPG hoặc PNG cho phần còn lại.

AVIF sẽ thay thế WebP?

Không sớm đâu. AVIF nén tốt hơn, nhưng WebP mã hóa nhanh hơn và hỗ trợ rộng hơn, nên cả hai có khả năng sẽ cùng tồn tại trong nhiều năm, phục vụ cùng nhau.

Các trình duyệt cũ hơn có thể mở AVIF không?

Thường thì không. Hỗ trợ AVIF trẻ hơn WebP, vì vậy, dự phòng JPG hoặc PNG là điều cần thiết đối với khách truy cập trên phần mềm cũ hơn.

AVIF và WebP đều là các định dạng thế hệ tiếp theo được xây dựng từ codec video, nhưng AVIF nén nhỏ hơn khoảng 20% và bổ sung HDR và màu 12 bit, trong khi WebP mã hóa nhanh hơn và được hỗ trợ rộng hơn. Cả hai đều giữ được độ trong suốt và hoạt ảnh, do đó, lựa chọn tùy thuộc vào việc bạn muốn tệp nhỏ nhất hay tệp an toàn nhất, nhanh nhất. Cung cấp AVIF trước tiên cho kích thước, WebP thứ hai cho khả năng tương thích và dự phòng JPG hoặc PNG cho phần còn lại. Tạo WebP trong trình duyệt của bạn bằng trình chuyển đổi của chúng tôi ở trên và thêm AVIF thông qua đường dẫn hình ảnh của bạn.

Tham khảo nhanh: AVIF hoặc WebP

Tiếp cận với AVIF khi bạn muốn tệp có kích thước nhỏ nhất, khi hình ảnh cần HDR hoặc màu rộng và khi CDN hoặc bước xây dựng của bạn có thể mã hóa trước hình ảnh đó mà không làm chậm mọi yêu cầu. Tiếp cận với WebP khi bạn muốn mã hóa nhanh, hỗ trợ phần mềm rộng nhất và mặc định ít ma sát mà gần như mọi công cụ đều có thể xử lý được. Thiết lập mạnh nhất không phải là cái này hay cái kia mà là cả hai, được phân phát theo thứ tự: AVIF đầu tiên cho kích thước, WebP thứ hai cho phạm vi tiếp cận và dự phòng JPG hoặc PNG cuối cùng để không khách truy cập nào bị bỏ lại hình ảnh bị hỏng.

Điều gì xảy ra sau AVIF

Các định dạng hình ảnh tiếp tục phát triển và JPEG XL là đối thủ tiếp theo, hứa hẹn khả năng nén mạnh mẽ với khả năng chuyển mã JPG không mất dữ liệu. Hiện nay, sự hỗ trợ trình duyệt của nó còn hạn chế nên nó chưa phải là một lựa chọn thiết thực. Hiện tại, AVIF và WebP là hai định dạng thế hệ tiếp theo đáng để triển khai, với JPEG XL đáng xem. Xây dựng chuỗi dự phòng có nghĩa là bạn có thể thêm định dạng mới hơn sau này mà không làm hỏng các trình duyệt cũ hơn, đó là lý do tại sao phương pháp tiếp cận phần tử hình ảnh sẽ phù hợp với tương lai.