PNG hay JPG? Quy tắc mười năm tôi dùng để quyết
Dov Azencot
@DovAzencotPNG và JPG đã là hai câu trả lời mặc định cho "lưu tấm ảnh này" suốt hơn hai mươi năm, và hầu hết mọi người chọn giữa chúng một cách tình cờ — hộp thoại xuất ra mặc định thế nào thì lấy thế đó. Cách đó ổn cho tới ngày bạn email cho ai đó một ảnh chụp màn hình 9 MB, hay đăng một logo có quầng xám xấu xí viền quanh, và bỗng nhiên lựa chọn trở nên quan trọng.
Vấn đề là thế này: quyết định thật ra rất đơn giản. Nó rút về một câu hỏi tôi đã hỏi suốt chừng mười năm, và chưa một lần nó phụ tôi.
Câu hỏi duy nhất
Tấm ảnh này được làm nên từ cạnh, hay từ ánh sáng?
Chỉ vậy thôi. Chữ, logo, biểu tượng, ảnh chụp màn hình, sơ đồ, nét kẻ, bất cứ thứ gì có ranh giới rõ và những vùng màu phẳng — đó là cạnh. Ảnh chụp, dải chuyển màu, bất cứ thứ gì có tông liên tục mượt mà và hàng nghìn chuyển màu tinh tế — đó là ánh sáng.
Cạnh cần PNG. Ánh sáng cần JPG. Gần như mọi thứ đều theo từ đó mà ra.
Vì sao cạnh cần PNG
PNG không mất dữ liệu. Mỗi pixel bạn lưu đều trở lại y hệt, mãi mãi, dù bạn mở lại bao nhiêu lần. Nó nén bằng cách tìm những dải màu giống hệt nhau, mà đó đúng là thứ ảnh dạng cạnh chứa đầy — một nút bấm màu đặc, một nền trắng, một nét đen. PNG ngốn thứ đó ngon lành và vẫn sắc như dao.
Nó còn có kênh alpha, nên có thể trong suốt thật sự. Đó là lý do mọi logo bạn muốn đặt lên một nền màu đều nên là PNG. JPG hoàn toàn không có độ trong suốt — nó lấp những vùng đó bằng màu trắng, và đó chính là nơi cái quầng xấu xí sinh ra.
Chỗ nó gãy là ảnh chụp. Lưu một tấm ảnh chụp thành PNG và nó ngoan ngoãn ghi lại từng hạt nhiễu cảm biến cùng từng vi chuyển màu với độ trung thực đầy đủ, rồi tệp phình to. PNG lãng phí không phải vì nó tệ. Nó lãng phí vì nó thành thật về những chi tiết mà mắt bạn vốn sẵn lòng bỏ qua.
Vì sao ánh sáng cần JPG
JPG mất dữ liệu. Nó vứt bỏ những thông tin mà mắt bạn kém nhận ra — biến thiên màu tinh vi, chi tiết tần số cao — và nó làm việc này cực kỳ giỏi trên ảnh chụp. Đó đúng là thứ mà một tấm ảnh dư dả. Kết quả là một tệp chỉ bằng một phần nhỏ dung lượng, mà bạn không thấy thứ gì đã mất.
Nhưng chĩa JPG vào cạnh xem, nó tan tành. Nó trét những vết nhòe mờ quanh các ranh giới rõ — đặc biệt là quanh chữ — vì cạnh sắc chính là loại chi tiết tần số cao mà nó được thiết kế để vứt đi. Một ảnh chụp màn hình mã nguồn dưới dạng JPG trông hơi bẩn quanh từng con chữ. Đó không phải màn hình của bạn. Đó là định dạng làm đúng thiết kế trên loại đầu vào sai.
Bảng dung lượng chốt hạ
Cùng hai tấm ảnh nguồn, lưu theo cả hai cách ở thiết lập hợp lý:
| Ảnh | Dưới dạng PNG | Dưới dạng JPG |
|---|---|---|
| Một tấm ảnh chụp — 12 MP | ~14 MB | ~3 MB |
| Ảnh chụp màn hình giao diện có chữ | ~600 KB | ~900 KB |
| Logo phẳng hai màu | ~20 KB | ~85 KB |
Đọc theo cả hai chiều. Tấm ảnh chụp nhỏ hơn gần 5 lần khi ở dạng JPG, mà không mất gì nhìn thấy. Nhưng ảnh chụp màn hình và logo lại to hơn khi ở dạng JPG — và chúng còn trông tệ hơn, với quầng và vết nhòe. Định dạng nào nhỏ hơn lật ngược hoàn toàn tùy vào thứ nằm trong bức hình. Đó là toàn bộ bài học gói trong ba hàng.
Các ca ngoại lệ (chỉ có hai ca đáng biết)
Độ trong suốt buộc phải PNG. Nếu bất cứ phần nào của tấm ảnh cần nhìn xuyên qua, JPG bị loại khỏi bàn bất kể nội dung là gì, vì nó không thể nào lưu nổi một kênh alpha. Kể cả một tấm ảnh chụp được cắt ra trên nền trong suốt cũng phải là PNG (hoặc WebP).
Chữ-trên-ảnh là chuyện phải cân nhắc. Một tấm ảnh có chú thích in sẵn thì nửa ánh sáng, nửa cạnh. Tôi chọn JPG nếu nó chủ yếu là ảnh và chấp nhận chữ hơi mềm, hoặc PNG nếu chữ phải giữ sắc và tôi kham được dung lượng. Không có kẻ thắng gọn gàng; bạn chọn khuyết điểm nào mình chịu được hơn.
Khi bạn lỡ có sẵn định dạng sai
Phần lớn thời gian bạn không phải chọn lúc xuất — bạn kẹt với một tệp mà ai đó đã lưu sai. Một tay nhiếp ảnh đưa bạn những PNG 14 MB. Một nhà thiết kế gửi một logo dưới dạng JPG có quầng. Đó đơn giản là một lần chuyển đổi.
Đi theo chiều khôn ngoan — PNG sang JPG cho một tấm ảnh chụp lưu quá nặng — là một thắng lợi rõ ràng, và nó chạy ngay trong trình duyệt của bạn ở đây nên tệp không hề rời khỏi thiết bị. Đi chiều ngược lại — JPG sang PNG — là chân thật nhưng có giới hạn: nó làm tệp không mất dữ liệu kể từ đây trở đi, đúng thứ bạn muốn trước khi chỉnh sửa, nhưng nó không xóa được những vết nhòe mà JPG đã in sẵn vào. Mất dữ liệu là cánh cửa một chiều. Chuyển sang PNG không đưa bạn ngược trở lại qua cánh cửa đó; nó chỉ ngăn bạn mất thêm bất cứ thứ gì nữa.
Hỏi câu hỏi duy nhất — cạnh hay ánh sáng — và bạn sẽ đúng gần như mọi lần. Tôi vẫn hỏi nó ở mỗi lần xuất. Nó tốn nửa giây và đã cứu tôi khỏi rất nhiều quầng xám.
Bài viết liên quan
Vì sao tôi chuyển PNG sang WebP (và một lần duy nhất tôi không làm thế)
PNG là định dạng tuyệt vời để chỉnh sửa nhưng lãng phí để đăng lên. Đây là những gì WebP thật sự tiết kiệm cho bạn, chỗ nó chẳng giúp gì, và một quy tắc tôi không bao giờ phá.
Vì sao ảnh iPhone của bạn là HEIC (và khi nào cứ đổi sang JPG)
HEIC thật sự là định dạng tốt hơn mà một nửa web vẫn không mở nổi. Đây là lý do Apple chọn nó, thứ bạn thật sự đánh đổi khi sang JPG, và khi nào tôi không bận tâm.
Chuyển đổi ảnh ngay trong trình duyệt hoạt động thế nào (và vì sao tôi dựng nó theo cách đó)
"Tệp của bạn không bao giờ rời khỏi thiết bị" là một kiến trúc, chứ không phải một câu quảng cáo. Đây là cách WASM chuyển đổi ngay trong trình duyệt của bạn, và một giới hạn thật của nó.
Tất cả bài viết