JPG, PNG, WebP và AVIF – Bạn thực sự nên sử dụng định dạng hình ảnh nào?

JPG (JPEG) là định dạng mà cha mẹ bạn sử dụng mà không biết tên của nó. Được tạo ra vào năm 1992, đây là định dạng ảnh mặc định trong ba thập kỷ. Mọi thiết bị, mọi trình duyệt, mọi ứng dụng trên trái đất đều mở JPG. Nó sử dụng tính năng nén mất dữ liệu — nghĩa là nó loại bỏ một số dữ liệu hình ảnh để giảm kích thước tệp. Ở cài đặt chất lượng cao (85-95%), hầu hết mọi người đều không thấy được sự khác biệt. Ở chất lượng thấp, bạn sẽ có được những tạo tác "khối" đặc trưng xung quanh các cạnh.

PNG là định dạng mà các nhà thiết kế yêu thích. Nó sử dụng tính năng nén không mất dữ liệu — không bao giờ có dữ liệu nào bị mất. Điều này quan trọng vì hai lý do: hỗ trợ độ trong suốt (JPG không thể tạo nền trong suốt) và độ sắc nét của văn bản. Ảnh chụp màn hình, logo, đồ họa có văn bản, bất kỳ thứ gì có đường nét sắc nét - PNG xử lý những điều này một cách hoàn hảo. Sự đánh đổi là kích thước tệp: PNG có thể dễ dàng lớn hơn 5-10 lần so với JPG của cùng một bức ảnh.

WebP là câu trả lời của Google cho "điều gì sẽ xảy ra nếu JPG và PNG có con?" Nó hỗ trợ cả nén có mất dữ liệu và không mất dữ liệu, xử lý độ trong suốt và thường tạo ra các tệp nhỏ hơn 25-35% so với các tệp JPG tương đương. Hỗ trợ trình duyệt đạt hơn 95% vào năm 2023, do đó lý do tương thích cũ về cơ bản không còn nữa. Nếu bạn đang phân phát hình ảnh trên web thì WebP là lựa chọn thiết thực lúc này.

AVIF là đối thủ mới nhất, dựa trên codec video AV1. Với hiệu suất nén thuần túy, nó đánh bại mọi thứ khác — nhỏ hơn khoảng 50% so với JPG ở cùng chất lượng hình ảnh. Nó hỗ trợ độ trong suốt, HDR và ​​gam màu rộng. Nhược điểm? Quá trình mã hóa chậm (chậm hơn đáng kể so với WebP) và khả năng hỗ trợ trình duyệt, tuy tốt nhưng vẫn chưa phổ biến. Safari chỉ mới bổ sung hỗ trợ đầy đủ gần đây.

Đối với ảnh - ảnh kỳ nghỉ, ảnh sản phẩm, ảnh chân dung - bạn muốn nén giảm chất lượng vì những ảnh này có độ chuyển màu mượt mà và nhiều biến thể màu sắc. JPG hoạt động hoàn hảo nếu khả năng tương thích là ưu tiên của bạn. Nếu bạn đặt những thứ này lên một trang web, WebP cắt giảm băng thông của bạn xuống 30% mà không có sự khác biệt rõ ràng. AVIF tiết kiệm nhiều hơn nhưng mất nhiều thời gian hơn để mã hóa.

Ví dụ trong thế giới thực: ảnh phong cảnh có độ phân giải 1920x1080 có thể có kích thước 450 KB ở chất lượng-90 JPG, 320 KB ở dạng WebP và 200 KB ở dạng AVIF. Chất lượng hình ảnh giống nhau trên cả ba - sự khác biệt hoàn toàn nằm ở kích thước tệp. Đối với một trang web tải 20 hình ảnh, đó là sự khác biệt giữa 9 MB và 4 MB dữ liệu hình ảnh. Người dùng của bạn trên kết nối 4G sẽ nhận thấy.

Đối với hình ảnh có cạnh sắc nét, văn bản, màu phẳng hoặc độ trong suốt, trò chơi sẽ thay đổi. PNG vẫn là mặc định an toàn — đảm bảo chất lượng không bị mất dữ liệu, hỗ trợ toàn cầu và tính minh bạch. WebP không mất dữ liệu cung cấp cho bạn chất lượng tương tự với kích thước tệp nhỏ hơn khoảng 26%. AVIF lossless cũng hoạt động nhưng tiết kiệm ít hơn AVIF lossless.

Không bao giờ sử dụng JPG cho ảnh chụp màn hình có văn bản, biểu tượng hoặc mô hình giao diện người dùng. Tính năng nén JPG bị mất dữ liệu tạo ra các thành phần giả có thể nhìn thấy xung quanh các chuyển đổi màu sắc sắc nét — văn bản trông mờ, các đường thẳng trở nên lượn sóng. Đó không phải là vấn đề thiết lập chất lượng; đó là một hạn chế cơ bản về cách hoạt động của tính năng nén JPG.

Nếu bạn là người dùng iPhone, bạn có thể tự hỏi HEIC phù hợp ở đâu. HEIC là định dạng ảnh mặc định của Apple và nó nhỏ hơn khoảng 50% so với JPG với chất lượng tương tự. Nhưng đây là vấn đề: các trình duyệt web khác ngoài Safari phần lớn không hỗ trợ nó. Windows cần một plugin để xem nó. Hầu hết các hình thức trực tuyến đều từ chối nó. HEIC rất tốt để lưu trữ ảnh trên iPhone của bạn, nhưng khi bạn cần chia sẻ hoặc tải lên, bạn sẽ chuyển đổi nó sang JPG hoặc WebP.

Đối với các trang web: phân phát AVIF với dự phòng WebP và JPG làm mạng an toàn cuối cùng. Hầu hết các hệ thống quản lý nội dung và CDN hiện đại đều tự động xử lý việc này. Đối với tài liệu và biểu mẫu: hãy sử dụng JPG — đó là điều mà mọi hình thức tải lên đều mong đợi. Đối với công việc thiết kế: sử dụng PNG trong quá trình chỉnh sửa, xuất dưới dạng WebP hoặc AVIF để phân phối. Để lưu trữ: giữ nguyên định dạng gốc (thường là JPG hoặc RAW từ máy ảnh của bạn). Không chuyển đổi liên tục giữa các định dạng bị mất dữ liệu — mỗi chuyển đổi sẽ làm giảm chất lượng một chút.

Cuộc chiến định dạng sẽ tiếp tục. JPEG XL đang chờ đợi và có thể sẽ có thứ gì đó mới vào năm tới. Nhưng hiện tại, câu trả lời thiết thực cho hầu hết mọi người là: JPG để tương thích, WebP để sử dụng web hiện đại, PNG khi bạn cần độ trong suốt hoặc chất lượng không bị giảm chất lượng. Nếu bạn cần chuyển đổi giữa bất kỳ thứ nào trong số này, chuyển đổi hình ảnh hoàn thành công việc trong vài giây mà không cần cài đặt bất cứ thứ gì.

Những con số kể câu chuyện hay hơn lời nói. Chụp một bức ảnh có kích thước 1920 × 1080 điển hình và lưu nó ở từng định dạng với chất lượng hình ảnh tương đương. JPG ở chất lượng 85: ~250 KB. PNG (không mất dữ liệu): ~2,5 MB. WebP với chất lượng tương đương: ~180 KB. AVIF chất lượng tương đương: ~130 KB. Điều đó có nghĩa là AVIF có kích thước gần bằng một nửa JPG với kết quả trực quan giống hệt nhau và nhỏ hơn khoảng 30% so với WebP.

Đối với đồ họa hoặc ảnh chụp màn hình có văn bản và màu phẳng, các con số sẽ thay đổi. PNG: ~150 KB. JPG ở chất lượng 90: ~200 KB (và có các thành phần hiển thị xung quanh văn bản). WebP không mất dữ liệu: ~100 KB. AVIF không mất dữ liệu: ~90 KB. Đây là lý do tại sao PNG được ưa thích cho đồ họa - JPG thực sự tạo ra các tệp lớn hơn VÀ chất lượng thấp hơn cho loại nội dung này.

JPG và PNG hoạt động ở mọi nơi - mọi trình duyệt, mọi ứng dụng, mọi thiết bị, từ nhiều thập kỷ trước. WebP hiện có hỗ trợ trình duyệt gần như phổ biến: Chrome, Firefox, Safari (kể từ năm 2022), Edge và tất cả các trình duyệt di động đều hỗ trợ nó. Điểm trừ duy nhất là một số hệ thống doanh nghiệp và ứng dụng email rất cũ.

Hỗ trợ AVIF đang phát triển nhưng chưa phổ biến. Chrome, Firefox và Opera hỗ trợ đầy đủ. Safari đã bổ sung hỗ trợ AVIF vào năm 2023, nhưng một số thiết bị iOS cũ hơn vẫn không xử lý được. Nếu bạn đang xây dựng một trang web, cách tiếp cận an toàn là phân phát AVIF với dự phòng WebP và JPG làm mạng an toàn cuối cùng bằng cách sử dụng HTML <picture> yếu tố.

Chuyển đổi từ lossless sang lossy (PNG → JPG, PNG → WebP) hoàn toàn an toàn — bạn chỉ cần chọn mức nén. Chuyển đổi lossy sang lossy (JPG → WebP) hoạt động tốt cho một chuyển đổi duy nhất nhưng làm giảm chất lượng một chút. Không bao giờ chuyển đổi qua lại nhiều lần giữa các định dạng bị mất — mỗi lần chuyển đổi sẽ làm giảm chất lượng hơn nữa, giống như sao chụp một bản sao.

Nếu bạn cần chuyển đổi hình ảnh giữa các định dạng, chuyển đổi PNG sang JPG, chuyển đổi HEIC sang JPG, hoặc sử dụng cái khác của chúng tôi công cụ chuyển đổi — tất cả đều miễn phí và tức thì trong trình duyệt của bạn.

Sử dụng JPG khi: chia sẻ ảnh qua email, tải lên mạng xã hội hoặc khi khả năng tương thích phổ quát quan trọng hơn kích thước tệp. Sử dụng PNG khi: hình ảnh có độ trong suốt, chứa văn bản hoặc các cạnh sắc nét hoặc bạn cần chất lượng không giảm chất lượng để chỉnh sửa. Sử dụng WebP khi: tối ưu hóa hình ảnh cho trang web của bạn — đó là sự cân bằng tốt nhất giữa chất lượng, kích thước tệp và hỗ trợ trình duyệt. Sử dụng AVIF khi: bạn cần nén tối đa và có thể cung cấp các bản dự phòng cho các trình duyệt cũ hơn.