Mỗi định dạng ảnh là một tập hợp các đánh đổi giữa dung lượng tệp, chất lượng, và các tính năng như độ trong suốt hay hoạt ảnh. Chọn sai và bạn có tệp phình to, chữ mờ, hoặc đồ họa không hiển thị được. Đây là từng định dạng thường gặp giải thích bằng lời đơn giản, tiếp theo là một bảng bạn có thể để sẵn bên tay.
Hai họ lớn
Trước khi vào từng định dạng, một phân biệt giải thích được phần lớn chúng:
- Ảnh raster là các lưới pixel. Ảnh chụp là raster. Phóng to đủ xa và bạn thấy các ô vuông. PNG, JPG, WebP, AVIF và GIF đều là raster.
- Ảnh vector là toán học — đường thẳng, đường cong và hình khối được định nghĩa bằng tọa độ. Chúng phóng đến bất kỳ cỡ nào mà không nhòe. SVG là định dạng vector trên web.
Ý tưởng then chốt kia là có mất mát (lossy) so với không mất mát (lossless). Định dạng có mất mát (JPG, thường là AVIF/WebP) vứt bỏ một số chi tiết để thu nhỏ tệp. Định dạng không mất mát (PNG, GIF, WebP lossless) giữ mọi pixel chính xác.
Từng định dạng, cái một
JPG (JPEG) — Con ngựa thồ cho ảnh chụp. Có mất mát, nhỏ, và đọc được ở đúng nghĩa mọi nơi. Không độ trong suốt, không hoạt ảnh. Lưu lại nhiều lần dần làm nó xuống cấp. Dùng cho ảnh chụp và bất cứ chỗ nào cần tính tương thích tối đa.
PNG — Không mất mát, hỗ trợ độ trong suốt. Lựa chọn đúng cho ảnh chụp màn hình, logo, biểu tượng và sơ đồ — bất cứ thứ gì có chữ hoặc mép cứng. Ảnh chụp ở dạng PNG rất lớn, nên đừng dùng cho ảnh chụp.
WebP — Một định dạng hiện đại làm được cả hai việc: chế độ có mất mát vượt JPG về dung lượng (nhỏ hơn ~25–35%), chế độ không mất mát hỗ trợ độ trong suốt và vẫn gọn. Cũng xử lý được hoạt ảnh. Giờ được hỗ trợ phổ quát trong các trình duyệt. Lý tưởng cho web; kém hơn cho email hay phần mềm cũ.
AVIF — Bộ nén mới nhất và tốt nhất ở đây, chừng một nửa dung lượng của JPEG ở chất lượng tương đương, có độ trong suốt và HDR. Trình duyệt có thể hiển thị nó tốt, nhưng chúng không thể mã hóa nó một cách đáng tin từ một canvas — nên các công cụ chạy trên trình duyệt quay về WebP khi bạn yêu cầu AVIF. Mã hóa AVIF thật sự cần một máy chủ hoặc ứng dụng gốc.
GIF — Cũ, giới hạn ở 256 màu, nhưng là kinh điển cho hoạt ảnh đơn giản. Với bất cứ thứ gì vượt một vòng lặp ngắn, WebP (hoặc một video) nhỏ và sắc hơn. Ổn cho các biểu tượng động tí hon; kém cho ảnh chụp.
SVG — Vector, nên nó phóng vô hạn mà không nhòe và vẫn tí xíu với đồ họa đơn giản. Hoàn hảo cho logo, biểu tượng và tranh minh họa. Nó là mã, không phải pixel, nên nó không thể biểu diễn một tấm ảnh chụp.
Bảng so sánh
| Định dạng | Loại | Nén | Trong suốt | Hoạt ảnh | Tốt nhất cho |
|---|---|---|---|---|---|
| JPG | Raster | Có mất mát | Không | Không | Ảnh chụp, tương thích tối đa |
| PNG | Raster | Không mất mát | Có | Không | Ảnh chụp màn hình, logo, chữ |
| WebP | Raster | Cả hai | Có | Có | Ảnh web, nhỏ + kênh alpha |
| AVIF | Raster | Có/không mất mát | Có | Có | Nén tối đa (phía máy chủ) |
| GIF | Raster | Không mất mát | Chỉ 1-bit | Có | Hoạt ảnh đơn giản |
| SVG | Vector | Không áp dụng | Có | Có (với CSS/JS) | Logo, biểu tượng, tranh minh họa |
Cách chọn, thật nhanh
- Ảnh chụp? JPG cho tính tương thích, WebP cho web.
- Ảnh chụp màn hình, logo hay chữ? PNG (raster) hoặc SVG (nếu là một đồ họa vector thật sự).
- Cần độ trong suốt? PNG, WebP, AVIF hoặc SVG — không bao giờ JPG.
- Hoạt ảnh? WebP cho chất lượng và dung lượng, GIF chỉ vì sự đơn giản kiểu cũ.
- Xuất bản lên một website? WebP thường là mặc định thông minh.
Chuyển đổi giữa chúng
Khi bạn có sai định dạng, bạn không cần tải lên bất cứ thứ gì để sửa. Công cụ chuyển đổi ảnh chuyển giữa PNG, JPG và WebP ngay trong trình duyệt của bạn bằng Canvas — không tài khoản, không gì được truyền đi, và nó chạy ngoại tuyến sau lần truy cập đầu. Nó xử lý theo lô, và nếu bạn yêu cầu AVIF nó quay về WebP (nhỏ hơn JPG/PNG và được hỗ trợ ở mọi nơi) vì trình duyệt không thể mã hóa AVIF một cách đáng tin.
Giữ bảng trên trong đầu và việc chọn định dạng thôi là đoán mò: khớp định dạng với nội dung (ảnh chụp hay đồ họa), rồi với đích đến (web, email, in ấn), và bạn sẽ chọn đúng gần như mọi lần.