JPEG, PNG, WebP, AVIF - Nên Sử Dụng Định Dạng Nào Cho Website

Hình ảnh là tài nguyên phổ biến nhất trên website, trước khi tìm hiểu về hình ảnh, mình đã từng nghĩ chỉ cần bỏ ảnh vô website là xong. Tuy nhiên, trong thực tế, việc hiểu rõ để lựa chọn các định dạng hình ảnh không hề đơn giản.

Trong bài viết này, mình sẽ chỉ đề cập đến các định dạng hình ảnh phổ biến như: JPEG, PNG, Webp và AVIF. Cùng mình đi tìm hiểu về sự khác biệt giữa chúng về khả năng nén hình ảnh, độ phân giải, mật độ điểm ảnh, cách các yếu tố này ảnh hưởng đến cách hình ảnh được hiển thị lên website và tác động của chúng đến trải nghiệm của người dùng.

Vậy thì tại sao mình lại nói rằng để lựa chọn ảnh hiển thị trên website dưới định dạng nào không hề đơn giản, cùng mình tìm câu trả lời, khi đọc hết bài này nhé.

1. Compression Algorithms - thuật toán nén ảnh

Bạn đã bao giờ tự hỏi tại sao đôi lúc, bạn có thể gửi hàng chục bức ảnh qua chat mà vẫn nhanh "vù vù", trong khi có lúc chỉ một tấm đã tốn cả "thanh xuân" để tải

Bí mật nằm ở đây là nén ảnh - kỹ thuật giúp giảm kích thước file ảnh nhưng vẫn giữ được chất lượng hiển thị ở mức có thể chấp nhận được. Nhờ đó, quá trình truyền tải dữ liệu hay lưu trữ ảnh (trên website, tin nhắn, hay cloud) đều trở nên hiệu quả hơn.

Về cơ bản, có hai loại nén ảnh phổ biến:

• Lossy compression: để giảm dung lượng file, một số chi tiết trong ảnh (được coi là ít quan trọng) sẽ bị lược bỏ. Nếu lạm dụng quá đà, chất lượng ảnh có thể giảm rõ rệt, xuất hiện hiện tượng "vỡ hạt". Tuy nhiên, bù lại, dung lượng file ảnh sẽ được giảm rất nhiều, rất thích hợp khi bạn cần ưu tiên tốc độ tải và không quá quan trọng độ chi tiết của bức ảnh.
• Lossless compression: giải pháp này sau khi nén, ảnh có thể được giải nén về trạng thái ban đầu. Dù hiệu quả nén (giảm dung lượng) không được tốt như lossy, nhưng đây cũng là một option tuyệt vời nếu bạn cần giữ nguyên chất lượng, thường thấy trong định dạng PNG hay một số biến thể của WebP.

2. Pixel Density and Resolution - mật độ điểm ảnh và độ phân giải

Khi bạn nhìn vào màn hình máy tính hoặc điện thoại, bạn không chỉ quan tâm độ lớn nhỏ mà còn cần để ý đến mật độ điểm ảnh và độ phân giải. Hai khái niệm này đôi lúc sẽ gây nhầm lẫn cho bạn, nhưng thực tế nó liên quan chặt chẽ đến trải nghiệm nhìn của người dùng.

• Pixel density (mật độ điểm ảnh): là số lượng pixel trên một đơn vị diện tích màn hình, hay còn gọi là PPI (Pixels Per Inch). Một màn hình có PPI càng cao thì hình ảnh càng sắc nét vì có nhiều điểm ảnh trong một không gian nhỏ.
• Resolution (độ phân giải): chính là tổng số điểm ảnh theo chiều rộng và chiều cao (ví dụ: 1920×1080). Độ phân giải lớn thường giúp hình ảnh trông chi tiết hơn, tỉ lệ thuận với đó là dung lượng và kích thước file tăng lên.

Ở những thiết bị Retina hoặc màn hình có mật độ điểm ảnh cao, các icon và chữ hiển thị thường rất mịn và rõ nét. Tuy nhiên, khi bạn thiết kế hoặc đăng hình ảnh, hãy cân nhắc giữa chất lượng và dung lượng file. Một tấm ảnh "siêu khổng lồ" sẽ hiển thị cực kỳ sắc nét nhưng lại có thể làm website của bạn tải chậm hơn, còn ảnh độ phân giải thấp thì load nhanh nhưng sẽ vỡ nếu bạn phóng to. Vì vậy, việc chọn độ phân giải phù hợp sẽ giúp bạn cân bằng giữa chất lượng hiển thị và hiệu suất của ứng dụng.

3. Bit Depth

Bit depth là yếu tố quyết định thông tin màu sắc được lưu trữ cho mỗi pixel trong một bức ảnh. Đây là thước đo trực tiếp cho độ phong phú và chi tiết màu sắc mà hình ảnh có thể thể hiện.

• Bit Depth thấp (8-bit): hình ảnh 8-bit có thể biểu thị 256 màu khác nhau. Đây là mức cơ bản và thường đủ dùng cho nhiều ứng dụng như: đồ họa đơn giản hoặc ảnh web có kích thước nhỏ.
• Bit Depth cao (16-bit): ảnh 16-bit có thể hiển thị tới 65.536 màu, mang lại sự chuyển màu mượt mà, chi tiết và chân thực hơn. Điều này rất hữu ích cho các công việc như: chỉnh sửa ảnh chuyên nghiệp hoặc xử lý hình ảnh.

Tuy nhiên, đây là sự đánh đổi cần phải cân nhắc kĩ khi bạn muốn optimize image, phải cân bằng nhu cầu về độ chính xác của màu sắc với thực tế về băng thông và tốc độ tải.

Cá nhân mình khi optimize sẽ luôn phải đặt ra hai câu hỏi: "Nhu cầu vè ảnh cần chất lượng màu đến đâu?" và "Người dùng (hoặc thiết bị) sẽ hiển thị chúng như thế nào?" Từ hai câu hỏi này, mình chắc chắn bạn sẽ dễ dàng chọn được bit depth phù hợp, tránh lãng phí tài nguyên mà vẫn giữ được chất lượng hình ảnh ở mức ưng ý nhất.

4. Chroma Subsampling

Nếu bạn từng thắc mắc tại sao có những đoạn video trên mạng trông "nhòe" màu hay những bức ảnh lúc zoom lên thì màu sắc hơi "mờ mờ", rất có thể chúng đang được "chroma subsampling" – hay nói cách khác là "nén" thông tin màu. Nhưng trước khi đi sâu vào cơ chế, cùng ngó qua chút lý do: tại sao lại phải làm thế?

Mình biết RGB (Red, Green, Blue) vì nó đơn giản và dễ hiểu, nhưng chưa hẳn đã tối ưu khi bạn cần nén hình ảnh hay video. Lúc này, YCbCr xuất hiện - nó tách biệt hoàn toàn giá trị độ sáng (luminance - Y) khỏi màu sắc (chrominance - Cb, Cr).

• Y (Luminance): thể hiện độ sáng tối của pixel.
• Cb & Cr (Chrominance): thể hiện thông tin màu (chênh lệch so với kênh xanh và đỏ).

Lý do YCbCr được ưa chuộng trong việc nén hình ảnh và video là vì mắt người dùng thường "khó tính" với độ sáng hơn là với màu. Dễ hiểu hơn thì bạn sẽ nhạy cảm hơn với những thay đổi về độ sáng, còn nếu màu sắc có mất chút chi tiết thì cũng không hề nhận ra rõ ràng.

Về bản chất, "chroma subsampling" nghĩa là giữ nguyên kênh Y (để ảnh vẫn sắc nét về độ sáng), nhưng "giảm bớt" dữ liệu ở kênh Cb và Cr (bởi mắt ta "dễ tính" với màu hơn). Ký hiệu như: 4:4:4, 4:2:2, 4:1:1, 4:4:0 cho biết bạn "chặt" kênh màu nhiều đến mức nào.

Bạn quan sát trên hình có thể thấy:

• 4:4:4
  • Hoàn toàn không nén gì cả. Mỗi pixel được lưu đủ dữ liệu Y, Cb, Cr.
  • Chất lượng màu tốt, tỷ lệ thuận với việc đó là dung lượng file lớn.
• 4:2:2
  • Cứ 4 pixel, kênh Y vẫn được giữ full, nhưng kênh Cb & Cr chỉ được lấy mẫu (sample) cho 2 pixel.
  • Tương đối phổ biến trong nhiều thiết bị quay phim, vì giữ được độ nét tạm ổn mà file nhỏ hơn 4:4:4.
• 4:1:1
  • Vẫn là 4 pixel, kênh Y giữ nguyên, nhưng Cb & Cr chỉ lấy mẫu cho 1 pixel, dùng chung cho cả 4 pixel.
  • Dung lượng giảm đáng kể, nhưng cũng đồng nghĩa với việc mất khá nhiều chi tiết màu.
• 4:4:0
  • Giữ nguyên độ sáng (Y) cho từng pixel, nhưng kênh màu (Cb, Cr) bị "nén" theo chiều dọc, chỉ chia đều cho 2 pixel rồi nhân đôi cho 2 pixel còn lại.
  • Màu sẽ ổn theo chiều ngang, nhưng chiều dọc sẽ có chút "méo" nếu bạn zoom kỹ.
• Trường hợp cần giữ chất lượng tối đa (ví dụ: phim điện ảnh, ảnh chụp sản phẩm chuyên nghiệp, studio, VFX…), nên ưu tiên 4:4:4 hoặc ít nhất là 4:2:2 để tránh mất đi các chi tiết màu.
• Trường hợp tối ưu dung lượng (livestream, video mạng xã hội, camera giám sát…), việc nén màu mạnh như: 4:1:1 hoặc 4:4:0 sẽ tiết kiệm băng thông, giảm kích thước file mà vẫn đảm bảo được các nội dung chính.

5. Progressive và Baseline Loading

• Baseline Loading: hình ảnh tải theo chiều dọc, hiển thị từ trên xuống dưới. Người dùng sẽ thấy phần đầu của ảnh trước, sau đó ảnh đầy đủ dần.
• Progressive Loading: ảnh được hiển thị ngay lập tức ở độ phân giải thấp, rồi được cải thiện chất lượng dần. Điều này giúp người xem có "cảm giác nhanh" hơn, dù ảnh ban đầu hơi mờ.

Đối với các định dạng hình như: JPEG, cách tải (progressive hay baseline) được quyết định khi mã hóa. Trong khi đó, những định dạng mới (WebP, AVIF, JPEG XL) linh hoạt hơn, cho phép chọn kiểu tải ngay lúc giải mã, thuận tiện điều chỉnh tùy theo tốc độ mạng, thiết bị hoặc sở thích người dùng.

Bạn đọc đến đây, cũng đã hiểu được khái niệm cơ bản, hãy cùng mình đi so sánh các định dạng hình ảnh khác nhau bằng cách xem xét sự khác biệt trong cách triển khai và trường hợp sử dụng của chúng.

6. So sánh sự khác biệt giữa các loại định dạng hình ảnh

Định dạng	Compression Algorithms	Tính năng nổi bật	Độ tương thích với Browser	Dùng khi	Hạn chế
JPEG	Lossy	- Sử dụng không gian màu YCbCr (tách độ sáng và màu) - Có chế độ tải Baseline hoặc Progressive	Rộng rãi (hầu hết các trình duyệt)	- Ảnh chụp cần dung lượng nhỏ - Website muốn tiết kiệm băng thông	- Không hỗ trợ Alpha Channel (Transparency) - Ảnh có thể mất chi tiết nếu nén quá mạnh
JPEG XL	Lossy & Lossless	- Kế thừa JPEG, có tương thích ngược - Hỗ trợ HDR (dải tương phản rộng) - Tốc độ decode nhanh hơn JPEG	Hạn chế (rất ít trình duyệt hỗ trợ)	- Ảnh chất lượng cao - Lưu trữ lâu dài	- Chưa phổ biến
PNG	Lossless	- Hỗ trợ Alpha Channel (Transparency) - Không mất dữ liệu - Bit-depth linh hoạt	Rộng rãi	- Logo, icon, đồ họa văn bản - Ảnh cần nền trong suốt hoặc bán trong suốt	- Dung lượng lớn với ảnh phức tạp - Không hỗ trợ nén mất dữ liệu
WebP	Lossy & Lossless	- Nén hiệu quả hơn JPEG & PNG - Hỗ trợ alpha channel và animation	Tương đối rộng (một vài browser cũ chưa hỗ trợ)	- Thay thế JPEG/PNG trên web - Ảnh chụp cần kích thước nhỏ - Đồ họa phức tạp	- Cần kiểm tra trình duyệt - Không phải công cụ nào cũng hỗ trợ
AVIF	Lossy & Lossless	- Nén mạnh, chất lượng cao ở dung lượng thấp - Hỗ trợ alpha (trong suốt) - Dựa trên codec AV1 hiện đại	Rất hạn chế (mới hỗ trợ ở một số trình duyệt)	- Dự án đòi hỏi chất lượng hình ảnh cao - Tối ưu dung lượng	- Mã hóa/giải mã chậm hơn WebP - Browser support còn giới hạn

7. Kết luận

Việc lựa chọn đúng định dạng hình ảnh có thể tác động đáng kể đến trải nghiệm của người dùng. Bạn hãy nhớ là, không có định dạng nào là hoàn hảo tuyệt đối cho tất cả mọi trường hợp; mỗi loại ảnh (logo, banner, ảnh sản phẩm…) sẽ phù hợp với một kiểu nén khác nhau. Bài viết này giúp các bạn hiểu rõ hơn về các kiểu định dạng ảnh để có thể cân bằng giữa chất lượng và tốc độ load của website.

Các bài viết liên quan:

• Webpack vs Vite: Đâu là lựa chọn tốt dành cho dự án của bạn?
• Clerk là gì? Hướng dẫn tích hợp Clerk vào dự án NextJS
• GSAP là gì? Hướng dẫn sử dụng GSAP trong dự án React
• Tìm hiểu Microfrontend: Hướng dẫn triển khai Microfrontend trong Next.js