Công cụ Tạo Độ Trong Suốt Ảnh: Quy trình làm việc với PNG và WebP

Last updated: June 28, 2026

Một công cụ tạo độ trong suốt hình ảnh rất hữu ích khi một sản phẩm, logo, chân dung hoặc yếu tố thiết kế cần được đặt gọn gàng trên nhiều hơn một nền. Phần khó không phải là nhấn nút "xóa nền." Phần khó là giữ lại các cạnh mềm mại, chọn định dạng lưu trữ alpha, và kiểm tra tệp trước khi nó đến với chủ đề cửa hàng, mẫu quảng cáo, hoặc CMS.

Trả lời nhanh: làm thế nào để tạo độ trong suốt cho hình ảnh?

Sử dụng công cụ xóa nền hoặc trình chỉnh sửa mặt nạ để tách chủ thể, kiểm tra cạnh alpha trên các nền ô vuông (checkerboard), trắng và tối, sau đó xuất dưới dạng PNG hoặc WebP. Không nên xuất phần cắt cuối cùng dưới dạng JPEG, vì JPEG không có kênh độ trong suốt và sẽ làm phẳng các pixel trống thành một màu đặc.

Đối với hầu hết các trang web, WebP trong suốt là bản sao tốt nhất để phân phối vì nó hỗ trợ alpha và thường nhẹ hơn PNG. Hãy giữ lại một master PNG khi bạn cần khả năng tương thích của trình chỉnh sửa rộng rãi, bàn giao in ấn hoặc lưu trữ không mất dữ liệu. Nếu hình ảnh vẫn cần xóa nền, hãy bắt đầu với hướng dẫn xóa nền bằng AI, sau đó sử dụng quy trình làm việc này để hoàn thiện và xuất tài sản trong suốt.

Được đo khi chuẩn bị bài viết này, bốn hình WebP kích thước 1400 by 788 trong thư mục bài viết cục bộ được xuất từ 28 KB đến 38 KB. Chúng là đồ họa đơn giản, vì vậy một bức ảnh sản phẩm thực tế có tóc, kính, bóng đổ hoặc kết cấu tinh xảo có thể lớn hơn. Hãy kiểm tra tệp cuối cùng thay vì giả định mọi WebP trong suốt đều sẽ nhỏ.

Công cụ tạo độ trong suốt hình ảnh thực sự tạo ra cái gì?

Độ trong suốt được lưu trữ bằng một kênh alpha (alpha channel). Hình ảnh hiển thị vẫn có dữ liệu màu sắc bình thường, nhưng mỗi pixel cũng có giá trị độ mờ đục (opacity value). Các pixel hoàn toàn mờ đục thể hiện chủ thể. Các pixel hoàn toàn trong suốt sẽ biến mất. Các pixel bán trong suốt tạo ra các cạnh mềm mại xung quanh tóc, kính, khói, bóng đổ, vải và logo được giảm nhiễu (anti-aliased logos).

Thông số kỹ thuật PNG mô tả alpha là một kênh được sử dụng cho thông tin độ trong suốt, và tổng quan về PNG của W3C vẫn là tài liệu tham khảo hữu ích về lý do tại sao PNG trở thành định dạng hình ảnh trong suốt đáng tin cậy. Hướng dẫn loại tệp hình ảnh của MDN cũng lưu ý rằng WebP hỗ trợ nén có tổn hao (lossy) và không mất tổn hao (lossless) với độ trong suốt.

Checkerboard chỉ là bản xem trước. Nếu bạn có thể thấy các ô checkerboard sau khi tải tệp lên, điều đó có nghĩa là trình chỉnh sửa đã xuất một ảnh chụp màn hình hoặc hình ảnh phẳng thay vì tài sản trong suốt thực sự.

Bạn nên làm cho những loại hình ảnh nào trở nên trong suốt?

Hãy làm cho hình ảnh trong suốt khi chủ thể phải được tái sử dụng trên nhiều nền khác nhau. Một chủ cửa hàng có thể cần một phần cắt sản phẩm cho trang marketplace trắng, một hero homepage tối màu và một banner giảm giá theo mùa. Một nhà thiết kế có thể cần một logo mark đặt trên các ảnh chụp màn hình, bộ tài liệu thuyết trình (pitch decks) và đồ họa mạng xã hội mà không có hộp chữ nhật bao quanh.

Các ứng cử viên tốt bao gồm:

• Ảnh sản phẩm với chủ thể tiền cảnh rõ ràng.
• Logo được xuất từ tệp raster khi SVG gốc không khả dụng.
• Chân dung hồ sơ cho huy hiệu, ảnh thu nhỏ và trang nhóm.
• Sticker, icon và tài sản trang trí nhỏ được sử dụng trong bố cục.
• Ảnh vật thể cần bóng đổ mới hoặc nền được tạo ra.
• Ảnh chụp màn hình nơi khung thiết bị nên nổi trên một phần trang.

Các ứng cử viên kém bao gồm:

• Tài liệu quét mà giấy trắng phải giữ khả năng đọc.
• Ảnh mà nền là một phần của câu chuyện hoặc bằng chứng.
• Logo có thể được xuất từ SVG, PDF, hoặc nguồn thiết kế.
• Ảnh sản phẩm với hiện tượng nhòe chuyển động nặng hoặc các cạnh bị chặn.
• Hình ảnh mà lỗ hổng trong suốt sẽ gây nhầm lẫn cho người mua.

Nếu mục tiêu là một hình ảnh danh mục sạch thay vì một phần cắt có thể tái sử dụng, hãy đọc hướng dẫn xóa nền ảnh sản phẩm. Nó bao gồm thiết lập chụp ảnh, bóng đổ và trình bày marketplace trước khi quyết định xuất.

Làm thế nào để xóa nền mà không làm hỏng các cạnh?

Bắt đầu với tệp nguồn tốt nhất. Một bản gốc độ phân giải cao với độ tương phản chủ thể rõ ràng sẽ cung cấp cho trình chỉnh sửa mặt nạ nhiều thông tin cạnh thực tế hơn. Bản sao mạng xã hội bị nén thường có các cạnh khối, hiện tượng loang màu và tóc mềm đi trước khi bạn bắt đầu.

Sử dụng thứ tự này cho các hình ảnh đơn lẻ:

1. Mở ảnh gốc, không phải ảnh chụp màn hình hoặc bản sao ứng dụng trò chuyện.
2. Chạy xóa nền hoặc tạo mặt nạ thủ công.
3. Phóng to vào các cạnh dễ bị tổn thương nhất trước: tóc, kính, tay cầm sản phẩm, dây đeo, nhãn và lỗ hổng.
4. Khôi phục các pixel chủ thể bị thiếu bằng cọ vẽ trước khi tinh chỉnh cạnh bên ngoài.
5. Loại bỏ các phần còn sót lại của nền rõ ràng bên trong các khe hở và giữa các bộ phận nhỏ.
6. Kiểm tra phần cắt trên nền trắng, tối và màu thương hiệu.
7. Xuất một master PNG nếu có khả năng chỉnh sửa thêm.
8. Xuất bản sao phân phối WebP cho trang web khi mục tiêu là phân phối qua trình duyệt.

Chỉ sử dụng xử lý hàng loạt sau khi một hình ảnh đại diện đã vượt qua. Nếu mười bức ảnh sản phẩm được chụp dưới cùng ánh sáng trên cùng một bàn, việc xử lý hàng loạt có thể tiết kiệm thời gian. Nếu thư mục trộn lẫn chai bóng, vải, tóc và bao bì trong suốt, hãy kiểm tra từng loại trước khi tin tưởng vào quy trình hàng loạt.

Đối với chi tiết mặt nạ dựa trên mô hình, bài viết thực hành tốt nhất xóa nền là bước tiếp theo tốt hơn việc lặp lại cùng một thao tác xuất. Bài viết này tập trung vào việc làm cho kết quả trong suốt có thể xuất bản được.

Bạn nên xuất hình ảnh trong suốt dưới dạng PNG, WebP hay JPEG?

Sử dụng PNG khi bạn cần một master chỉnh sửa đáng tin cậy hoặc khi công cụ khác trong quy trình làm việc yêu cầu PNG. Sử dụng WebP khi hình ảnh trong suốt được đưa lên một trang web hiện đại và kích thước tệp là vấn đề. Tránh JPEG đối với các tài sản trong suốt vì nó không thể giữ kênh alpha.

Tài liệu WebP của Google giải thích rằng WebP hỗ trợ độ trong suốt ở cả chế độ lossless và lossy, đó là lý do tại sao nó hoạt động tốt cho các phần cắt web và tài sản giao diện. Thông số kỹ thuật PNG của W3C vẫn là tài liệu tham khảo chính thức về hành vi của PNG, bao gồm cả độ trong suốt kênh alpha.

Nếu bạn đã có một PNG trong suốt và chỉ cần một bản sao web nhỏ hơn, hãy sử dụng hướng dẫn chuyển đổi PNG sang WebP. Nếu bạn bị cám dỗ chuyển kết quả trong suốt thành JPEG, hãy đọc chuyển PNG sang JPG trước để việc mất độ trong suốt là có chủ ý.

Làm thế nào để biết độ trong suốt có sạch không?

Kiểm tra hình ảnh trong suốt trên các nền làm nổi bật các lỗi khác nhau. Checkerboard tiết lộ các lỗ hổng bị thiếu. Màu trắng tiết lộ sương xám và bóng đổ còn sót lại. Một nền tối hoặc bão hòa sẽ tiết lộ hào quang sáng xung quanh tóc, cạnh sản phẩm và đường cong logo được giảm nhiễu.

Không đánh giá phần cắt chỉ bên trong trình chỉnh sửa. Thả nó vào khu vực trang thực tế, mẫu quảng cáo, bản xem trước marketplace hoặc nền slide. Một phần cắt trông chấp nhận được trên checkerboard vẫn có thể hiển thị một đường viền nhạt trên hình ảnh hero tối màu.

Thiết lập nào phù hợp cho ảnh sản phẩm, logo và chân dung?

Các thiết lập chính xác phụ thuộc vào cạnh. Ảnh sản phẩm cần hình dạng thực và bóng đổ tiếp xúc đáng tin cậy. Logo cần các đường cong sắc nét và không có hộp matte. Chân dung cần các cạnh tóc mềm mại hơn và xem xét kỹ lưỡng xung quanh tai, vai và quần áo.

Sử dụng những điểm bắt đầu này:

• Ảnh sản phẩm: bảo toàn chủ thể, xóa nền, sau đó thêm bóng đổ riêng nếu bố cục cuối cùng cần chiều sâu.
• Chai bóng: kiểm tra phản xạ và bao bì trong suốt; các công cụ tự động thường nhầm lẫn chúng với nền.
• Logo: tìm SVG hoặc nguồn thiết kế trước; raster transparency là phương án dự phòng.
• Chân dung: cho phép cạnh tóc bán trong suốt, nhưng loại bỏ sự thay đổi khuôn mặt sáp hoặc sợi bị thiếu.
• Lớp phủ ảnh chụp màn hình: cắt chặt và giữ các cạnh sắc nét; độ trong suốt mờ làm giao diện trông bị hỏng.
• Icon nhỏ: xuất từ vector khi có thể, sau đó tạo kích thước PNG hoặc WebP từ nguồn đó.

Đối với việc xuất bản web, cũng xác nhận kích thước pixel. Một phần cắt sản phẩm 4000 px trong suốt có thể làm chậm trang ngay cả khi nén WebP trông ổn. Hướng dẫn kiểm tra kích thước và chiều kích ảnh giải thích cách xác minh kích thước trước khi tải lên, và phân tích sâu về nén ảnh đề cập đến quá trình nén sau khi độ trong suốt được phê duyệt.

Những sai lầm nào làm hỏng hình ảnh trong suốt?

Hầu hết các lỗi độ trong suốt xảy ra sau khi việc xóa nền trông "hoàn thành." Định dạng xuất, màu matte và ngữ cảnh trang cuối cùng vẫn quan trọng.

Tránh những sai lầm này:

• Xuất phần cắt trong suốt dưới dạng JPEG.
• Làm phẳng tệp trong trình chỉnh sửa trước khi lưu bản sao phân phối.
• Để lại hào quang trắng từ nền gốc.
• Cắt quá chặt và loại bỏ bóng đổ hoặc tóc mềm mại.
• Coi các ô checkerboard là một phần của hình ảnh thực tế.
• Tải lên PNG khổng lồ khi WebP kích thước phù hợp là đủ.
• Nén lại liên tục cùng một tài sản trong suốt.
• Sử dụng logo trong suốt khi SVG gốc có sẵn.
• Quên kiểm tra phần cắt trên nền trang thực tế.
• Giả định mọi CMS đều bảo toàn alpha trong quá trình tối ưu hóa.

Điểm về CMS đáng để kiểm tra. Một số quy trình tải lên chuyển đổi mọi thứ thành JPEG theo mặc định. Nếu điều đó xảy ra, PNG hoặc WebP cục bộ của bạn có thể đúng trong khi trang được xuất bản vẫn hiển thị một hình chữ nhật màu trắng.

Danh sách kiểm tra xuất bản ảnh trong suốt

Sử dụng danh sách kiểm tra này trước khi bạn gửi tài sản cho khách hàng, tải nó lên cửa hàng hoặc xuất bản nó trong hệ thống thiết kế.

Một quy trình làm việc công cụ tạo độ trong suốt hình ảnh tốt sẽ kết thúc bằng việc đặt tệp vào ngữ cảnh. Tạo mặt nạ, kiểm tra cạnh, chọn WebP hoặc PNG một cách có chủ ý, sau đó xác minh tài sản đã xuất bản thay vì tin tưởng vào bản xem trước của trình chỉnh sửa.