WebP tạo tập tin Nhỏ hơn 25 đến 35 phần trăm so với PNG cho cùng một hình ảnh và nó giữ nền trong suốt PNG nổi tiếng. Thực tế duy nhất đó giải thích tại sao Google xây dựng WebP và tại sao hầu hết các trang web hiện đại hiện nay đều phục vụ nó. Lập luận phản bác của PNG là phạm vi tiếp cận: nó mở ra trong mọi chương trình từng được viết, kể cả phần mềm chưa từng nghe đến WebP. Vì vậy, sự lựa chọn không phải là định dạng nào vượt trội hơn về mặt kỹ thuật, bởi vì WebP rõ ràng là như vậy. Vấn đề là bạn đang tối ưu hóa cho một trang web hiện đại hay để đảm bảo khả năng tương thích ở mọi nơi. Hướng dẫn này so sánh cả hai chiều sâu về chế độ nén, độ trong suốt, chất lượng, hỗ trợ trình duyệt, hoạt ảnh và tốc độ trang, sau đó cung cấp cho bạn quy tắc rõ ràng để lựa chọn.

WebP là gì và tại sao Google tạo ra nó

WebP là định dạng hình ảnh được Google phát hành năm 2010, được xây dựng trên công nghệ nén từ codec video VP8. Mục tiêu rất rõ ràng: làm cho hình ảnh trên web nhỏ hơn để tải trang nhanh hơn. Google có dữ liệu để biết rằng hình ảnh chiếm ưu thế trong trọng lượng trang và việc loại bỏ một phần ba mỗi hình ảnh sẽ tăng tốc độ trang web một cách đáng kể. WebP được thiết kế ngay từ đầu để thay thế ba định dạng cùng một lúc, phù hợp Độ trong suốt của PNG, khả năng nén ảnh của JPG và hoạt ảnh của GIF trong một thùng chứa duy nhất. Tham vọng đó là lý do tại sao nó có thể làm được những điều mà PNG không thể.

PNG là gì và tại sao nó tồn tại lâu dài

PNG xuất hiện vào năm 1996 dưới dạng giải pháp thay thế không có bằng sáng chế cho GIF, sử dụng tính năng nén DEFLATE không mất dữ liệu và thêm kênh alpha đầy đủ. Nó trở thành tiêu chuẩn cho logo, biểu tượng, ảnh chụp màn hình và bất kỳ đồ họa nào cần nền trong suốt. Gần ba thập kỷ hỗ trợ phổ quát là con hào của nó. Mọi trình duyệt, hệ điều hành, ứng dụng email, bộ ứng dụng văn phòng và trình chỉnh sửa hình ảnh đều đọc PNG mà không cần thiết lập. Khi một hình ảnh bắt buộc phải mở ở một nơi nào đó không xác định, PNG là định dạng không bao giờ bị lỗi.

Kích thước file: WebP thắng rõ ràng

Về cơ bản, WebP nén tốt hơn PNG trong mọi trường hợp. Đối với biểu tượng hoặc đồ họa giao diện người dùng điển hình có độ trong suốt, hãy mong đợi Giảm 25 đến 35 phần trăm chuyển từ PNG sang WebP một cách dễ dàng. Chuyển sang chế độ mất dữ liệu của WebP và mức tiết kiệm sẽ tăng lên đáng kể, thường là 60 đến 70 phần trăm, trong khi vẫn giữ kênh alpha. PNG hoàn toàn không có tùy chọn thua lỗ nên không thể cạnh tranh ở phân khúc cấp thấp. Trên một trang web có hàng tá nội dung hình ảnh, sự khác biệt đó sẽ tăng lên hàng trăm kilobyte cho mỗi lần tải trang.

Khoảng cách đến từ việc nén thông minh hơn. Thuật toán DEFLATE của PNG là một phương pháp có mục đích chung được mượn từ ZIP, rất tốt trong việc tìm kiếm sự lặp lại theo nghĩa đen. WebP sử dụng mã hóa dự đoán được xây dựng riêng cho hình ảnh, đoán từng khối từ các khối lân cận và chỉ lưu trữ sự khác biệt. Cách tiếp cận nhận biết hình ảnh đó cho thấy mức tiết kiệm mà DEFLATE không thể thấy được, đó là lý do tại sao định dạng từ năm 2010 lại đánh bại định dạng từ năm 1996 một cách nhất quán như vậy.

Tính minh bạch: cả hai đều có, WebP làm được nhiều hơn

Không giống như JPG, cả hai định dạng đều có kênh alpha đầy đủ, do đó, logo vẫn có thể nhìn xuyên qua. Nhưng WebP bổ sung thêm một thứ mà PNG không thể sánh được: minh bạch ở chế độ mất mát. Độ trong suốt của PNG chỉ đi kèm với tính năng nén không mất dữ liệu, do đó, đồ họa bán trong suốt phải được lưu trữ ở mức hoàn toàn không mất dữ liệu. WebP cho phép bạn có nền trong suốt và khả năng nén mạnh mẽ cùng lúc, đó chính xác là những gì một logo PNG nặng cần có. Đối với nội dung giao diện người dùng và phần cắt sản phẩm phải minh bạch trong khi có trọng lượng nhẹ hơn, sự kết hợp này là lập luận mạnh mẽ nhất của WebP.

Chất lượng: chế độ lossless và lossy

WebP cung cấp cả hai chế độ, giúp nó linh hoạt theo cách mà PNG không có:

WebP không mất dữ liệu khớp chính xác với PNG, pixel cho pixel, đồng thời tạo ra tệp nhỏ hơn. Không có sự đánh đổi về chất lượng, chỉ có một chiến thắng về quy mô.
WebP bị mất dữ liệu loại bỏ chi tiết như JPG, thu nhỏ tệp hơn nữa và không giống như JPG, nó vẫn có thể giữ được độ trong suốt.

PNG chỉ cung cấp lossless, đó là lý do tại sao nó vẫn có kích thước lớn. Nếu bạn cần một bản sao hoàn hảo, WebP lossless sẽ cung cấp cho bạn bản sao nhỏ hơn. Nếu bạn có thể chấp nhận mất mát vô hình, WebP mất mát sẽ mang lại cho bạn một phần nhỏ kích thước. Dù bằng cách nào thì cũng có cài đặt WebP đánh bại PNG.

Hỗ trợ trình duyệt và phần mềm

Đây là lợi thế thực sự duy nhất của PNG và nó đang bị thu hẹp. Mọi trình duyệt hiện đại đều hỗ trợ WebP, bao gồm Chrome, Firefox, Safari và Edge, vì vậy trên web mở, câu hỏi về tính tương thích về cơ bản đã được giải quyết. Các lỗ hổng tồn tại ở những nơi khác: một số phần mềm máy tính để bàn cũ hơn, một số ứng dụng email nhất định, các phiên bản Office cũ hơn và các nền tảng cũ vẫn từ chối WebP. Các biểu mẫu tải lên là một cái bẫy khác, vì nhiều biểu mẫu chỉ chấp nhận JPG và PNG và sẽ từ chối hoàn toàn tệp WebP.

Vì vậy, tóm tắt trung thực là WebP an toàn cho trang web của bạn và gây rủi ro cho các tệp bạn chuyển đến các hệ thống không xác định. PNG vẫn là phương án dự phòng phổ biến cho mọi thứ nằm ngoài tầm kiểm soát của bạn.

Hoạt ảnh: WebP cũng thay thế GIF

Một khả năng PNG đơn giản là thiếu hoạt ảnh. PNG tiêu chuẩn giữ một khung duy nhất và mặc dù tiện ích mở rộng APNG tồn tại nhưng việc hỗ trợ luôn không nhất quán. Hỗ trợ WebP hoạt hình nguyên bản với alpha đầy đủ, tạo ra các tệp nhỏ hơn nhiều so với GIF tương đương trong khi hiển thị hàng triệu màu thay vì 256 của GIF. Nếu bạn đang chọn giữa các định dạng cho đồ họa vòng lặp ngắn, WebP sẽ đánh bại cả PNG và GIF một cách dứt khoát.

Tại sao WebP tăng tốc trang web

Trọng lượng trang được nạp trực tiếp vào Sơn có nội dung lớn nhất, một trong những Core Web Vitals của Google và là tín hiệu xếp hạng đã được xác nhận. Hình ảnh thường là thứ nặng nhất trên một trang, do đó, việc cắt bớt một phần ba mỗi hình ảnh sẽ có tác động có thể đo lường được đối với thời gian tải, điểm LCP và tỷ lệ thoát. Các trang nhanh hơn cũng chuyển đổi tốt hơn, đó là lý do tại sao hiệu suất hoạt động được trả gấp đôi.

Mô hình thực tế mà hầu hết các trang web sử dụng là tiến bộ: cung cấp WebP cho các trình duyệt hỗ trợ nó và quay lại PNG hoặc JPG cho phần còn lại. HTML hiện đại tự động xử lý việc này bằng thành phần hình ảnh và hầu hết các hệ thống quản lý nội dung và dịch vụ hình ảnh đều làm điều đó cho bạn. Bạn có được chiến thắng nhanh chóng mà không vi phạm bất cứ điều gì đối với khách hàng lớn tuổi.

Khi nào nên sử dụng từng định dạng

sử dụng WebP dành cho hình ảnh trang web, đặc biệt là các biểu tượng và biểu tượng có độ trong suốt, trong đó các tệp nhỏ hơn có nghĩa là trang nhanh hơn.
sử dụng WebP khi bạn cần độ trong suốt cộng với kích thước nhỏ, vì đây là định dạng phổ biến duy nhất cung cấp cả hai.
sử dụng PNG khi hình ảnh phải mở trong bất kỳ chương trình nào, kể cả phần mềm cũ và ứng dụng email.
sử dụng PNG để tải lên các biểu mẫu và hệ thống liệt kê rõ ràng các định dạng được chấp nhận và bỏ qua WebP.
sử dụng PNG với tư cách là người quản lý lưu trữ của bạn, vì sự hỗ trợ chung quan trọng hơn kích thước đối với tệp bạn lưu giữ mãi mãi.

Cách chuyển đổi PNG sang WebP

Việc chuyển đổi không cần cài đặt. Mở của chúng tôi bộ chuyển đổi, thêm PNG của bạn và chọn tùy chọn giữ độ trong suốt, xuất WebP. Quá trình xử lý diễn ra cục bộ thông qua API HTML5 Canvas nên không có gì tải lên và bạn có thể gộp nhiều tệp cùng một lúc. Nền trong suốt vẫn tồn tại nguyên vẹn trong khi tệp trở nên nhẹ hơn đáng kể. Hướng dẫn đầy đủ có trong Hướng dẫn PNG sang WebP.

Còn AVIF thì sao?

Đáng để biết về ngữ cảnh: AVIF là một định dạng mới hơn, thậm chí còn nén tốt hơn WebP, thường nhỏ hơn 20% và nó cũng hỗ trợ độ trong suốt và hoạt ảnh. Hỗ trợ trình duyệt hiện đã tốt nhưng hơi chậm so với WebP và hỗ trợ phần mềm vẫn còn chậm hơn. Đối với hầu hết các trang web hiện nay, WebP là sự lựa chọn thực dụng với sự cân bằng tốt nhất giữa tiết kiệm và hỗ trợ, với AVIF đáng xem khi việc áp dụng ngày càng tăng. PNG vẫn là dự phòng cho cả hai.

Bản án

WebP giành chiến thắng về mặt kỹ thuật một cách toàn diện: tệp nhỏ hơn, tính minh bạch ở cả chế độ không mất dữ liệu và mất dữ liệu, hoạt ảnh và hỗ trợ trình duyệt hiện đại đầy đủ. PNG chiến thắng ở một điều vẫn còn quan trọng, đó là mở cửa hoàn toàn ở mọi nơi mà không cần thắc mắc. Sử dụng WebP cho trang web của bạn và PNG cho bất kỳ nội dung nào bạn gửi vào nơi chưa xác định và cung cấp WebP với dự phòng PNG khi bạn muốn cả hai. Đối với hình ảnh có định dạng rộng hơn, Hướng dẫn PNG và JPG bao gồm những nơi hình ảnh phù hợp.

Ví dụ về kích thước trong thế giới thực

Tỷ lệ phần trăm trừu tượng giúp ít hơn con số thực tế, vì vậy đây là khoảng cách trông như thế nào trên các tài sản thông thường:

A Biểu tượng 500 x 500 pixel với độ trong suốt: khoảng 45KB dưới dạng PNG-24, khoảng 30KB dưới dạng WebP không mất dữ liệu và dưới 12KB dưới dạng WebP mất dữ liệu với kênh alpha còn nguyên.
A đồ họa anh hùng có chiều rộng đầy đủ với bóng mềm: thường là 400KB trở lên dưới dạng PNG, khoảng 260KB dưới dạng WebP không mất dữ liệu và dưới 100KB dưới dạng WebP mất dữ liệu.
A Bộ biểu tượng giao diện người dùng trong số 20 đồ họa nhỏ: toàn bộ bộ có thể giảm từ khoảng 200KB xuống 130KB mà không mất dữ liệu, trước khi thực hiện bất kỳ điều chỉnh mất dữ liệu nào.

Nhân ví dụ chính trên hàng tá trang và việc tiết kiệm sẽ trở thành thời gian tải vài giây trên kết nối chậm, đây chính xác là loại khác biệt mà Core Web Vitals đo lường.

Chuyển đổi thư viện PNG hiện có

Hầu hết các trang web không bắt đầu sạch sẽ; họ có hàng trăm PNG đã được triển khai. Ba cách tiếp cận có hiệu quả, tùy thuộc vào thiết lập của bạn. Nếu trang web của bạn chạy trên một framework hoặc CMS hiện đại thì đường dẫn hình ảnh có thể tự động chuyển đổi và phục vụ WebP, do đó bạn thay đổi cài đặt thay vì tệp. Nếu bạn sử dụng dịch vụ CDN hoặc hình ảnh, hầu hết đều cung cấp đàm phán định dạng tự động, phân phối WebP tới các trình duyệt chấp nhận nó và PNG cho những trình duyệt không chấp nhận nó, từ cùng một tệp nguồn. Và nếu bạn đang quản lý tệp bằng tay, việc chuyển đổi hàng loạt nội dung và cập nhật tài liệu tham khảo sẽ hoạt động, mặc dù việc này tốn nhiều công sức nhất.

Dù bạn đi theo con đường nào, hãy giữ nguyên PNG gốc. Họ là bậc thầy của bạn và bạn có thể cần họ cho hệ thống từ chối WebP sau này.

Những lỗi WebP phổ biến cần tránh

Một số bẫy bắt người ta chuyển sang WebP:

Chuyển đổi bản gốc lưu trữ của bạn: chuyển đổi các bản sao để phân phối và giữ bản gốc PNG vì hỗ trợ WebP trong phần mềm máy tính để bàn hẹp hơn.
Sử dụng lossy WebP trên đồ họa văn bản: nén mất dữ liệu làm mờ các chữ cái sắc nét giống như JPG. Sử dụng WebP không mất dữ liệu cho ảnh chụp màn hình và hình ảnh có nhiều văn bản.
Bỏ qua dự phòng: việc phân phối WebP mà không có giải pháp thay thế PNG hoặc JPG sẽ phá vỡ hình ảnh đối với các ứng dụng khách cũ hơn và một số ngữ cảnh email.
Gửi WebP để tải lên biểu mẫu: nhiều người chỉ chấp nhận JPG và PNG và sẽ từ chối tệp hoàn toàn.

Không có lý do nào trong số này là lý do để tránh WebP. Đó là lý do để sử dụng nó ở nơi nó thuộc về, tức là phân phối đến các trình duyệt hiện đại, đồng thời giữ PNG cho các bản chính và cho bất kỳ thứ gì nằm ngoài tầm kiểm soát của bạn.

Cách trình duyệt thực sự chọn định dạng

Việc phục vụ hai định dạng nghe có vẻ phức tạp nhưng cơ chế lại đơn giản và tự động. Mọi trình duyệt đều gửi tiêu đề Chấp nhận với mỗi yêu cầu hình ảnh, liệt kê các định dạng mà nó hiểu được. Máy chủ hoặc CDN đọc tiêu đề đó và trả về WebP cho trình duyệt quảng cáo hỗ trợ hoặc PNG về trình duyệt không hỗ trợ, từ cùng một URL. Trong HTML, bạn có thể thực hiện điều tương tự một cách rõ ràng với phần tử hình ảnh, liệt kê nguồn WebP trước và nguồn dự phòng PNG thứ hai; trình duyệt chọn cái đầu tiên nó có thể đọc và bỏ qua phần còn lại. Dù thế nào đi nữa, không có du khách nào nhìn thấy một hình ảnh bị hỏngvà các trình duyệt hiện đại lặng lẽ lấy tệp nhỏ hơn trong khi các trình duyệt cũ hơn lấy tệp tương thích.

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

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

Về mặt kỹ thuật thì có. Tệp WebP nhỏ hơn từ 25 đến 35 phần trăm, giữ độ trong suốt và thêm các chế độ mất dữ liệu và hoạt ảnh mà PNG thiếu. PNG chỉ thắng ở khả năng tương thích phổ quát.

WebP có hỗ trợ độ trong suốt như PNG không?

Vâng, và hơn thế nữa. WebP giữ kênh alpha ở cả chế độ lossless và lossy, trong khi PNG chỉ cung cấp độ trong suốt với tính năng nén không mất dữ liệu.

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

Thông thường Nhỏ hơn 25 đến 35 phần trăm mà không mất dữ liệuvà nhỏ hơn 60 đến 70 phần trăm ở chế độ mất dữ liệu trong khi vẫn giữ được độ trong suốt.

Có phải tất cả các trình duyệt đều hỗ trợ WebP không?

Mọi trình duyệt hiện đại đều hỗ trợ WebP, bao gồm Chrome, Firefox, Safari và Edge. Một số phần mềm máy tính để bàn cũ hơn và biểu mẫu tải lên vẫn từ chối nó.

Những định dạng nào hỗ trợ tính minh bạch và hoạt ảnh?

WebP thực hiện cả hai. PNG có độ trong suốt nhưng không có hoạt ảnh đáng tin cậy và hoạt ảnh GIF nhưng bị giới hạn ở 256 màu với độ trong suốt thô.

WebP hay PNG tốt hơn cho một trang web?

WebP, cho tốc độ. Các tệp nhỏ hơn sẽ cải thiện Thời gian hiển thị nội dung lớn nhất, một tín hiệu xếp hạng của Core Web Vitals. Phục vụ dự phòng PNG cho khách hàng lớn tuổi.

Tôi nên sử dụng WebP hay AVIF?

WebP, hiện tại. AVIF nén tốt hơn khoảng 20% nhưng có phạm vi hỗ trợ hẹp hơn, vì vậy WebP là sự cân bằng thực tế giữa tiết kiệm và khả năng tương thích ngày nay.

Tôi có thể tải tệp WebP lên biểu mẫu không?

Thường thì không. Nhiều hình thức tải lên chỉ chấp nhận JPG và PNG, vì vậy hãy chuyển đổi sang một trong những định dạng đó khi hệ thống liệt kê các định dạng được chấp nhận và bỏ qua WebP.

Tôi có nên chuyển đổi các tệp PNG hiện có của mình sang WebP không?

Chuyển đổi bản sao để phân phối chứ không phải bản gốc của bạn. Giữ PNG gốc, vì hỗ trợ WebP hẹp hơn trong phần mềm máy tính để bàn và các biểu mẫu tải lên.

WebP lossy có tốt cho ảnh chụp màn hình có văn bản không?

Không. Nén lossy làm nhòe chữ sắc nét, chính xác như JPG. Sử dụng WebP không mất dữ liệu cho ảnh chụp màn hình và đồ họa nặng văn bản.

Tôi vẫn cần bản dự phòng PNG với WebP phải không?

Để đảm bảo an toàn tối đa, có. Các trình duyệt hiện đại đều đọc WebP, nhưng phần mềm máy tính để bàn cũ hơn, một số ứng dụng email và nhiều biểu mẫu tải lên vẫn không có.

Làm cách nào để trình duyệt biết nên tải WebP hay PNG?

Thông qua Chấp nhận tiêu đề nó gửi với mọi yêu cầu, liệt kê các định dạng được hỗ trợ. Máy chủ và CDN đọc nó và tự động trả về bản dự phòng WebP hoặc PNG.