Bạn kéo một PNG "trong suốt" vào một trang chiếu tối và một hình chữ nhật trắng đi kèm với nó. Tệp vẫn ổn trong trình biên tập. Vậy chuyện gì đã xảy ra? Câu trả lời nằm ở kênh thứ tư hiếm khi được để ý. Mỗi điểm ảnh trong ảnh mang các giá trị đỏ, xanh lục và xanh lam, và ở một số định dạng, một số thứ tư gọi là kênh alpha cho biết bao nhiêu phần của điểm ảnh đó nên hiển thị.
Hướng dẫn này giải thích con số đó lưu gì, định dạng nào giữ nó (PNG và WebP), định dạng nào rút gọn nó thành một công tắc (GIF), định dạng nào vứt bỏ nó (JPG), và vì sao SVG chơi theo luật khác. Trên đường đi, chúng tôi đọc kênh alpha của bảy ảnh tách nền thật theo từng điểm ảnh, nên những con số dưới đây đến từ tệp chứ không phải lý thuyết.
Một PNG, bốn phông nền. Đôi giày sneaker là đầu vào thử nghiệm do AI tạo, được tách nền bằng công cụ xóa nền của Atlas Cloud; tệp được đặt lên từng nền mà không thay đổi.
Điểm chính
- Kênh alpha là kênh thứ tư lưu độ mờ đục cho mỗi điểm ảnh, từ 0 (trong suốt hoàn toàn) đến 255 (đặc hoàn toàn) trong ảnh 8-bit.
- PNG và WebP giữ một kênh alpha đầy đủ. GIF chỉ có thể đánh dấu một màu trong bảng màu là trong suốt. JPG không lưu trữ chút trong suốt nào.
- Công cụ xóa nền AI miễn phí của Atlas Cloud trả về PNG trong suốt ở kích thước điểm ảnh bạn đã tải lên, được xử lý ngay trong trình duyệt của bạn.
- Trong bảy ảnh tách nền được đo, chỉ có 0,7% đến 2,2% điểm ảnh là trong suốt một phần. Dải mỏng đó chính là cạnh đã khử răng cưa, giúp tóc và đường viền trông tự nhiên.
- Một PNG hiển thị phông nền trắng hoặc đen trong trình xem thường không hề mất kênh alpha. Hãy kiểm tra nó trên nền tối hoặc nền bàn cờ trước khi xuất lại bất cứ thứ gì.
Kênh alpha lưu gì bên trong mỗi điểm ảnh
Hỏi kênh alpha là gì và bạn thường nhận được một phép ẩn dụ. Thay vào đó, đây là con số. Đặc tả PNG của W3C định nghĩa nó trong một câu: "Mẫu alpha xác định mức độ mờ đục của một điểm ảnh, trong đó 0 nghĩa là trong suốt hoàn toàn và giá trị tối đa nghĩa là mờ đục hoàn toàn." Trong ảnh 8-bit, giá trị tối đa là 255, tạo ra 256 mức giữa trong suốt và đặc.
PNG cũng cho phép alpha 16-bit. Đặc tả cho phép độ sâu bit 8 hoặc 16 cho cả hai kiểu màu mang alpha của nó, thang độ xám có alpha và màu thực có alpha, và kênh alpha 16-bit có 65.536 mức. Ngoài các pipeline tổng hợp, bạn sẽ gặp 8 bit là chủ yếu.
Vậy một điểm ảnh RGBA là bốn con số. Ba con số mô tả màu, một con số mô tả độ phủ. Chỉ thay đổi con số thứ tư và màu vẫn giữ nguyên trong khi điểm ảnh mờ dần. Đó là toàn bộ thủ thuật đằng sau cạnh tóc mềm, bóng đổ và kính cho phông nền lộ qua.
Từ "trong suốt" che giấu một sự phân tách quan trọng. Một số định dạng lưu giá trị alpha đầy đủ cho mỗi điểm ảnh, nên một điểm ảnh có thể hiển thị 37%. Những định dạng khác lưu một cờ bật/tắt duy nhất: điểm ảnh này được vẽ, điểm ảnh kia bị bỏ qua. Cả hai đều được gọi là trong suốt, và chỉ loại đầu tiên có thể làm mờ một cạnh. Hãy nhớ kỹ sự khác biệt đó, vì đó là lý do sticker GIF trông lởm chởm còn ảnh tách nền PNG thì không.
Còn một thuật ngữ nữa bạn sẽ gặp trong công cụ video và game: alpha nhân trước. Trong một tệp alpha thẳng (hay không nhân trước), các giá trị màu được lưu ở cường độ đầy đủ và alpha sẽ chia tỷ lệ chúng khi hiển thị. Trong một tệp alpha nhân trước, các giá trị màu đã được nhân với alpha, nên một điểm ảnh đỏ hiển thị một nửa được lưu dưới dạng đỏ có cường độ một nửa. PNG dùng loại thẳng; đặc tả nêu rằng các giá trị màu "không được nhân trước bởi giá trị alpha".
Ý tưởng này có dấu vết tài liệu. Bản ghi nhớ năm 1995 của Alvy Ray Smith về lịch sử alpha ghi công ông và Ed Catmull với khái niệm này vào thập niên 1970 tại New York Institute of Technology, và ghi công bài báo năm 1984 của Porter và Duff với việc phân định ranh giới giữa hai quy ước. Với công việc web và in ấn hằng ngày, bạn có thể bỏ qua sự khác biệt; trình biên tập của bạn xử lý nó.
Cách lưu PNG có nền trong suốt
Rất nhiều rắc rối kiểu "bản xuất của tôi không trong suốt" được quyết định trước khi hộp thoại lưu mở ra. Ba quy tắc bao quát điều đó. Lớp nền phải được ẩn hoặc xóa, để khung vẽ hiển thị nền bàn cờ trong trình biên tập. Định dạng phải là loại có kênh alpha, trên thực tế nghĩa là PNG hoặc WebP.
Và tùy chọn PNG nên là loại 8-bit mỗi kênh, thường được ghi là PNG-24 hoặc 32-bit, thay vì phiên bản bảng màu mà một số trình xuất rút gọn thành trong suốt bật-hoặc-tắt. Đặc tả PNG có cho phép ảnh dạng chỉ mục mang "bảng alpha liên kết một mẫu alpha với mỗi mục bảng màu", nhưng bạn không thể trông cậy vào việc mọi công cụ đều dùng nó.
Các đường dẫn menu dưới đây đến từ tài liệu của từng nhà cung cấp.
| Phần mềm | Nơi có chức năng xuất PNG trong suốt |
|---|---|
| Công cụ xóa nền Atlas Cloud | Nhấp vào Tải xuống; kênh alpha đã có sẵn, nên không có cài đặt định dạng nào để làm sai |
| Photoshop | Tệp > Xuất > Xuất thành, chọn PNG làm định dạng và cho phép trong suốt trong cài đặt định dạng |
| GIMP 3.0 | Tệp > Xuất thành, đặt tên tệp .png; tùy chọn "Lưu giá trị màu từ các điểm ảnh trong suốt" chỉ áp dụng cho ảnh một lớp |
| Figma | Chọn frame, thêm xuất PNG ở thanh bên phải; nếu frame có màu tô, bỏ chọn Hiện trong bản xuất trong mục Tô |
| PowerPoint | Định dạng Ảnh > Xóa Nền, sau đó nhấp chuột phải vào ảnh, Lưu dưới dạng Ảnh, và chọn PNG trong danh sách Lưu dưới dạng loại |
Dù bạn dùng công cụ nào, hãy xem kết quả trên nền bàn cờ trước khi tải xuống. Bảng kết quả của Atlas hiển thị đúng như vậy, để bạn thấy kênh alpha hoạt động trước khi tệp chạm tới đĩa của mình.
Chuyển mọi hình ảnh thành PNG trong suốt chỉ bằng một cú nhấp
Cách nhanh nhất để có một tệp với kênh alpha thật là để một mô hình phân đoạn tạo ra nó. Atlas Cloud chạy một công cụ xóa nền ngay trong tab trình duyệt, một trong số ít công cụ AI miễn phí trên trang không cần tài khoản. Bạn kéo một ảnh vào, nhấp Chạy Miễn Phí, và tải kết quả xuống.
Mô hình chạy cục bộ qua WebGPU, với phương án dự phòng WASM trên máy không có nó, và chúng tôi đã hoàn thành một ảnh tách nền khi ngắt mạng. Không có hình mờ và không cần đăng ký.
Chủ thể không chỉ giới hạn ở chân dung. Trong thử nghiệm, ảnh nhóm, một con chó lông dài, một đôi giày sneaker trắng, chữ ký viết tay, logo dạng nét vẽ, và một chiếc áo trắng chụp trước tường trắng đều trả về ảnh tách nền dùng được, logo vẫn để hở khoảng âm. Nếu ảnh tách nền bạn cần dành cho bản in lớn, hãy kết hợp với so sánh trình nâng cấp ảnh miễn phí mà chúng tôi đã chạy, vì kênh alpha chia tỷ lệ cùng với ảnh.
Bên trong một ảnh tách nền thật: Các điểm ảnh mềm nằm ở đâu
Chúng tôi mở bảy kết quả đó trong Python và đếm từng điểm ảnh theo giá trị alpha. Mẫu hình giống nhau ở cả bảy. Từ 60,6% đến 98,4% điểm ảnh trong suốt hoàn toàn, tùy thuộc chủ thể chiếm bao nhiêu phần khung.
Các điểm ảnh trong suốt một phần, tức những điểm ảnh có alpha từ 8 đến 250, chiếm 0,7% đến 2,2% ảnh. Đó là một dải rộng 1 đến 3 điểm ảnh chạy quanh đường viền, và nó đảm nhận toàn bộ công việc khử răng cưa.
Tấm voan mỏng dạy chúng tôi điều mà chỉ định nghĩa sẽ không nói ra. Kênh alpha có thể lưu độ trong mờ, vậy mà tấm voan trả về chỉ với 0,73% điểm ảnh trong suốt một phần, cùng đường viền mỏng như đôi giày sneaker. Bản thân vải được ghi là đặc, với cây xanh phía sau hòa sẵn vào màu của nó. Hình dạng được giữ, độ trong mờ bị mất. Một tệp có kênh alpha không cho bạn biết gì về việc liệu mô hình có chọn dùng phần giữa của dải giá trị hay không.
Một quan sát kỹ thuật nhỏ cho người tò mò: trong cả bảy tệp, các điểm ảnh chủ thể đặc nằm ở alpha 254 thay vì 255, một khác biệt không màn hình nào hiển thị được. Trong các PNG kích thước đầy đủ mà chúng tôi kiểm tra, mọi điểm ảnh trong suốt hoàn toàn đều mang cùng một giá trị màu, đen trơn, nên tệp không lưu phông nền ẩn nào có thể rò rỉ trở lại thành viền màu.
Những định dạng hình ảnh nào hỗ trợ trong suốt
Năm định dạng bao quát gần như mọi tệp bạn sẽ từng được đưa. Chúng lưu độ trong suốt theo bốn cách khác nhau, và sự khác biệt quyết định liệu một cạnh có thể mờ dần, liệu tệp có thể tạo hoạt ảnh, và cuối cùng nó lớn cỡ nào.
| Định dạng | Cách lưu trữ độ trong suốt | Mức | Cạnh mềm | Hoạt ảnh |
|---|---|---|---|---|
| PNG | Alpha 8 hoặc 16-bit cho mỗi điểm ảnh, hoặc một chunk tRNS cho độ trong suốt dạng chỉ mục và một màu | 256 hoặc 65.536 | Có | Có (APNG, nay là một phần của đặc tả PNG) |
| WebP | Alpha 8-bit cho mỗi điểm ảnh, ở cả chế độ mất dữ liệu và không mất dữ liệu | 256 | Có | Có |
| GIF | Một chỉ mục bảng màu được đánh dấu là trong suốt | 2 (bật hoặc tắt) | Không | Có |
| SVG | Hình vector không có phông nền; độ mờ đục được đặt cho từng phần tử | Liên tục | Có | Có |
| JPG | Không | 1 | Không | Không |
JPG có hỗ trợ trong suốt không?
Không. Hướng dẫn định dạng hình ảnh của MDN nói thẳng: "JPEG không hỗ trợ kênh alpha." Định dạng này lưu ba kênh màu và không gì khác, nên khi bạn lưu một ảnh nhiều lớp dưới dạng JPG, trình biên tập phải làm phẳng nó lên một màu trước, thường là trắng. Màu trắng đó sau đó là các điểm ảnh bình thường, và nó đi theo chủ thể bất cứ nơi nào tệp đến.
Đây cũng là lý do bản tải xuống "JPG trong suốt" không đúng như nó tuyên bố. Hoặc tệp thực ra là PNG với phần mở rộng sai, hoặc nền bàn cờ bạn thấy đã được vẽ vào các điểm ảnh. Đổi tên .jpg thành .png chỉ thay đổi nhãn trên hộp, không thay đổi nội dung. Nếu bạn cần trong suốt, JPG phải được mở ra, xóa nền, và lưu kết quả sang định dạng có thể chứa kênh alpha.
GIF trong suốt: Một màu, cạnh cứng
Độ trong suốt của GIF đến từ bản sửa đổi 89a của định dạng, và tuổi tác của nó lộ ra. Đặc tả GIF89a thêm một Graphic Control Extension với Transparency Index, được mô tả như sau: "Transparency Index đến mức khi gặp, điểm ảnh tương ứng của thiết bị hiển thị không bị sửa đổi và xử lý tiếp tục sang điểm ảnh kế tiếp." Một mục trong bảng màu được tuyên bố là xuyên thấu. Mọi điểm ảnh khác được vẽ với cường độ đầy đủ.
Điều đó khiến độ trong suốt của GIF là chuyện 1-bit. Một điểm ảnh hoặc bị bỏ qua hoặc được vẽ, và với bảng màu tối đa 256 màu thì không có chỗ cho cạnh hiển thị một nửa. Đặt một ảnh tách nền GIF lên nền khác với nền nó được tạo ra, và đường viền sẽ bị bậc thang như cầu thang, thường kèm viền nhạt nơi các điểm ảnh khử răng cưa bị ép về đặc.
Chúng tôi chuyển ảnh tách nền giày sneaker sang GIF với ngưỡng alpha 128, mặc định thường thấy, và phóng to cùng vùng dây giày lên ba lần. Phía 8-bit mờ dần qua hai hoặc ba điểm ảnh. Phía GIF toàn góc vuông. Nếu bạn cần GIF trong suốt cho một khách hàng không chấp nhận gì khác, hãy tạo nó trên chính màu nền mà nó sẽ nằm trên, để viền khớp thay vì phát sáng.
Độ trong suốt của WebP trong tệp mất dữ liệu và không mất dữ liệu
WebP là định dạng cuối cùng đã mang kênh alpha đến cho nén mất dữ liệu. Tài liệu nén của Google mô tả "một chế độ WebP khác cho phép mã hóa mất dữ liệu cho các kênh RGB và mã hóa không mất dữ liệu cho kênh alpha", và tài liệu tham chiếu cwebp của nó đặt chất lượng alpha mặc định là 100, nghĩa là mặt phẳng alpha được lưu không mất dữ liệu trừ khi bạn yêu cầu khác.
Trang tổng quan của Google đặt WebP không mất dữ liệu nhỏ hơn PNG 26%, nói rằng trong suốt thêm khoảng 22% dung lượng byte, và đặt WebP mất dữ liệu có trong suốt thường nhỏ hơn PNG 3 lần.
Các con số của riêng chúng tôi cũng ở vùng đó. Chúng tôi lấy một ảnh tách nền 2048 x 1152 trực tiếp từ công cụ xóa nền, một PNG 1.211 KB, và lưu lại bằng Pillow ở cài đặt mặc định.
WebP không mất dữ liệu cho ra 660 KB, nhỏ hơn 46%, và mọi giá trị alpha khớp chính xác với PNG. WebP mất dữ liệu ở chất lượng 80 cho ra 124 KB, và mặt phẳng alpha của nó vẫn giống hệt bản gốc từng byte một. Thứ duy nhất thay đổi là dữ liệu màu. Để phân phối ảnh tách nền trên web, đó thường là tệp bạn muốn. Với bản gốc chính mà bạn định tiếp tục chỉnh sửa, hãy giữ PNG hoặc WebP không mất dữ liệu.
Nền trong suốt SVG: Không có phông nền để xóa
SVG không có phông nền để làm trong suốt, vì nó chưa từng có. Một tệp SVG là danh sách các hướng dẫn vẽ: vẽ hình tròn này ở đây, tô nó bằng màu này. Không gì trong danh sách đó tô lên khung vẽ trừ khi bạn thêm một hình chữ nhật bao phủ nó. Khi một SVG trông như có nền trắng, bạn đang nhìn vào trang hoặc trình xem phía sau nó.
Độ trong suốt bên trong SVG được đặt cho từng phần tử. Tài liệu tham chiếu của MDN mô tả giá trị fill là none nghĩa là không tô gì, nên phần bên trong một hình vẫn trong. Thuộc tính fill-opacity chỉ làm mờ phần tô bên trong một hình, trong khi opacity làm mờ toàn bộ phần tử, bao gồm cả nét viền.
Hai điều khiến mọi người vấp. Một ảnh raster được nhúng vào SVG qua phần tử image giữ nguyên kênh alpha mà ảnh có, nên một JPG bên trong SVG vẫn mang theo hộp trắng của nó. Và chạy một ảnh qua bộ chuyển đổi raster sang SVG không xóa nền; nó truy vết cả nền thành các hình cùng với mọi thứ khác.
Tại sao PNG của tôi không trong suốt?
Hãy chạy các kiểm tra này theo thứ tự. Một tệp vượt qua kiểm tra đầu tiên thì không cần sửa gì cả.
Trình xem đã tô phông nền. Các trình xem ảnh phải đặt thứ gì đó phía sau các điểm ảnh trong suốt, và nhiều trình chọn trắng hoặc đen. Tệp không đổi; chỉ màn hiển thị đổi. Mở cùng PNG đó trong ứng dụng thiết kế, một tab trình duyệt có trang tối, hoặc một trang chiếu có màu tô tối. Nếu hộp biến mất, dừng ở đây.
Tệp không có kênh alpha. Một JPG được đổi tên thành .png, ảnh chụp màn hình của một ảnh trong suốt, hoặc một tệp đã đi qua ứng dụng nhắn tin hay CMS có mã hóa lại đều sẽ trông đục vì chúng đúng là đục. Kiểm tra chế độ ảnh. Trong Photoshop, bảng Kênh phải liệt kê một kênh Alpha; trên Windows, Thuộc tính > Chi tiết hiển thị độ sâu bit là 32 cho PNG RGBA thay vì 24; trong Python, Image.open("file.png").mode trả về RGBA. Nếu thiếu alpha, hãy quay lại bản gốc nhiều lớp và xuất lại.
Cạnh bị cứng hoặc có viền màu. Đường viền bậc thang chỉ ra độ trong suốt 1-bit, còn viền nhạt hoặc có màu chỉ ra các điểm ảnh cạnh vẫn mang màu nền cũ. Thử nghiệm tường đỏ của chúng tôi cho thấy điều đó xảy ra thế nào: với áo trắng trước tường đỏ bão hòa, 69% điểm ảnh cạnh bán trong suốt ngả đỏ, và trên nền mới dải đó bị đọc thành viền màu. Cách khắc phục là xuất lại với alpha 8-bit và không có màu matte, và với ảnh tách nền, dùng phông nền trung tính trong ảnh gốc hoặc co mặt nạ đi 1 điểm ảnh.
Nền bàn cờ đã bị nướng vào. Thay đổi kích thước ảnh. Nếu các ô xám và trắng lớn lên và nhỏ đi cùng bức ảnh, chúng là điểm ảnh. Ảnh xem trước từ các trang stock thường có kiểu này. Hãy tải tệp thật, hoặc tách nền lại.
Câu hỏi thường gặp
Kênh alpha có giống mặt nạ lớp không?
Chúng là họ hàng với nhau. Trợ giúp Photoshop của Adobe mô tả kênh alpha như một vùng chọn được lưu dưới dạng mặt nạ thang độ xám có thể chỉnh sửa trong bảng Kênh, và mặt nạ lớp hoạt động theo cùng cách bên trong trình biên tập. Khác biệt nằm ở thứ sống sót qua xuất. Mặt nạ lớp là công cụ chỉnh sửa sống trong PSD. Kênh alpha được ghi vào PNG hoặc WebP là kết quả đã làm phẳng của mọi mặt nạ, và đó chính là độ trong suốt mà các ứng dụng khác thực sự đọc.
Kênh alpha 8-bit có bao nhiêu mức trong suốt?
256, từ 0 (trong suốt hoàn toàn) đến 255 (mờ đục hoàn toàn). Kênh alpha 16-bit, mà PNG cũng hỗ trợ, có 65.536. GIF có hai: được vẽ hoặc bị bỏ qua.
Tôi có thể thêm kênh alpha vào JPG không?
Không, khi nó vẫn là JPG, vì định dạng này không có chỗ để lưu kênh alpha. Hãy mở tệp, tách chủ thể khỏi nền, và lưu kết quả dưới dạng PNG hoặc WebP. Công cụ tách nền chạy trên trình duyệt trên Atlas Cloud thực hiện chuyển đổi trong một bước: JPG vào, PNG trong suốt ra, miễn phí dùng và không cần đăng nhập.
Độ trong suốt của WebP có hoạt động trên mọi trình duyệt không?
Các phiên bản hiện tại của những trình duyệt lớn đều hiển thị WebP có alpha, và bảng tương thích của MDN cho định dạng này là nơi để xác nhận hỗ trợ cho bất kỳ phiên bản cũ hơn nào bạn vẫn cần phục vụ. Nếu đối tượng dùng hệ thống cũ quan trọng, hãy phục vụ PNG làm phương án dự phòng qua phần tử picture.
Tại sao PNG trong suốt của tôi có quầng trắng?
Các điểm ảnh dọc theo cạnh trong suốt một phần, và màu của chúng vẫn mang theo nền mà chúng được tách ra. Trên bản gốc trắng, dải đó trông như quầng trắng khi bạn đặt ảnh tách nền lên thứ gì đó tối. Hãy xuất lại với alpha 8-bit và matte đặt thành none, hoặc co vùng chọn đi một điểm ảnh trước khi lưu.
Kết luận
Độ trong suốt là một con số. Mỗi điểm ảnh trong RGBA PNG hoặc WebP mang một giá trị alpha từ 0 đến 255, và một khi điều đó rõ ra, các định dạng khác tự sáng tỏ: GIF có một cờ bật-tắt duy nhất, JPG không có gì, và SVG không có phông nền để xóa ngay từ đầu. Bảy ảnh tách nền chúng tôi đo đặt toàn bộ cạnh đã khử răng cưa vào một dải chiếm 0,7% đến 2,2% ảnh, đúng là phần mà định dạng 1-bit vứt bỏ.
Nếu bạn đến đây hỏi kênh alpha là gì vì một tệp không chịu trong suốt, hãy kiểm tra trình xem trước, rồi chế độ của tệp, rồi đến cạnh. Và nếu bạn cần một kênh alpha sạch mà không phải mở trình biên tập, một công cụ xóa nền chạy trên trình duyệt sẽ đưa cho bạn một kênh trong một PNG duy nhất, ở kích thước điểm ảnh bạn bắt đầu.
