Kênh alpha là giá trị thứ tư được lưu trữ trong pixel kiểm soát mức độ trong suốt của pixel, nằm cạnh các giá trị màu đỏ, xanh lục và xanh lam xác định màu của nó. Alpha trải dài trên phạm vi từ hoàn toàn vô hình đến hoàn toàn rắn chắc, với mọi mức độ trong suốt một phần ở giữa. Đó là lý do duy nhất khiến logo PNG có thể nổi rõ ràng trên bất kỳ nền nào trong khi JPG thì không thể, bởi vì JPG hoàn toàn không có kênh alpha. Độ trong suốt không phải là đánh lừa thị giác hay đặc tính của toàn bộ hình ảnh; nó là dữ liệu được gắn vào từng pixel riêng lẻ. Hướng dẫn này giải thích kênh alpha là gì, cách nó lưu trữ hàng trăm mức độ trong suốt, phép toán tổng hợp trộn các lớp trong suốt lại với nhau, định dạng nào hỗ trợ kênh đó và điều gì xảy ra với kênh đó khi bạn chuyển đổi hình ảnh từ định dạng này sang định dạng khác.

Kênh alpha thực sự là gì

Mỗi hình ảnh kỹ thuật số là một mạng lưới các pixel và mỗi pixel lưu trữ các số mô tả nó. Trong một ảnh màu tiêu chuẩn, mỗi pixel chứa ba số màu đỏ, lục và lam. Kênh alpha thêm số thứ tư để trả lời một câu hỏi khác: không phải pixel này có màu gì mà là bạn nên xem bao nhiêu trong số đó. Một pixel có thể có màu đỏ tươi và hoàn toàn đặc, màu đỏ tươi và nhìn xuyên qua một nửa hoặc màu đỏ tươi và hoàn toàn vô hình. Màu sắc vẫn giữ nguyên trong cả ba trường hợp; chỉ có alpha thay đổi. Sự tách biệt màu sắc khỏi độ mờ đục này là điều làm cho độ trong suốt linh hoạt trở nên khả thi.

Thuật ngữ này xuất phát từ tác phẩm tổng hợp alpha do Thomas Porter và Tom Duff xuất bản năm 1984, trong đó chính thức hóa cách kết hợp hình ảnh với độ trong suốt. Mô hình của họ vẫn là nền tảng của mọi chương trình đồ họa, trình duyệt web và công cụ trò chơi hiện đại. Vì vậy, kênh alpha không phải là một tiện ích gần đây được gắn vào các định dạng hình ảnh; đó là một ý tưởng đã tồn tại hàng thập kỷ, lặng lẽ cung cấp năng lượng cho hầu hết mọi thứ bạn nhìn thấy trên màn hình.

RGBA: giá trị thứ tư trong mỗi pixel trong suốt

Khi một pixel mang độ trong suốt, nó được mô tả bằng bốn giá trị thay vì ba, được viết là RGBA: đỏ, lục, lam và alpha. Bạn thấy ký hiệu này ở mọi nơi trong thiết kế và làm việc trên web. Trong CSS, màu như rgba(255, 0, 0, 0.5) có nghĩa là màu đỏ thuần với độ mờ 50%. Trong trình chỉnh sửa hình ảnh, ý tưởng tương tự xuất hiện dưới dạng thanh trượt độ mờ trên một lớp. A luôn là giá trị độ mờ, được xếp chồng lên trên màu thay vì trộn vào nó.

Giữ alpha tách biệt khỏi các vấn đề màu sắc. Nếu độ trong suốt được đưa vào các giá trị màu, màu đỏ bán trong suốt sẽ phải được lưu dưới dạng màu hồng nhạt hơn và bạn không bao giờ có thể khôi phục màu đỏ ban đầu hoặc đặt nó rõ ràng trên nền tối. Bằng cách lưu trữ độ mờ làm kênh riêng, định dạng này sẽ giữ nguyên màu sắc thực và cho phép phần mềm quyết định cách hòa trộn nó với bất kỳ thứ gì nằm phía sau nó. Tính linh hoạt đó chính là lý do tại sao các nhà thiết kế xuất nội dung bằng kênh alpha thay vì trộn trước chúng vào nền.

Cách alpha lưu trữ mức độ minh bạch

Kênh alpha không chỉ lưu trữ bật hoặc tắt. Trong hình ảnh 8 bit tiêu chuẩn, alpha giữ 256 cấp độ khác nhau, từ 0 đến 255. Giá trị 0 có nghĩa là pixel hoàn toàn trong suốt và vô hình, 255 có nghĩa là pixel hoàn toàn rắn và mờ và mọi số ở giữa sẽ tạo ra độ trong suốt một phần. Giá trị 128 làm cho pixel có thể nhìn xuyên qua gần một nửa, cho phép nền hiển thị xuyên suốt ở cường độ 50%.

256 cấp độ này làm cho độ trong suốt trông mượt mà hơn là khắc nghiệt. Bóng đổ mờ dần vì các pixel của nó mang giá trị alpha giảm dần về phía rìa. Hiệu ứng kính hoặc khói hoạt động vì các pixel khác nhau có khả năng nhìn xuyên qua ở mức độ khác nhau. Các định dạng cao cấp hơn được đẩy mạnh hơn nữa: cung cấp các kênh alpha 16 bit 65.536 cấp độ để tổng hợp chuyên nghiệp, mặc dù 8-bit là tiêu chuẩn cho hình ảnh trên web và đáp ứng mọi thứ mà mắt cần.

Tổng hợp Alpha: phép toán hòa trộn các lớp

Khi một pixel trong suốt nằm trên nền, phần mềm phải tìm ra màu cuối cùng mà bạn nhìn thấy. Nó thực hiện điều này với một công thức pha trộn đơn giản. Kết quả nhìn thấy được bằng màu nền trước nhân với alpha của nó, cộng với màu nền nhân với một trừ alpha đó. Nói một cách dễ hiểu, một pixel có độ mờ 70% sẽ đóng góp 70% màu sắc của chính nó và cho phép 30% nền xuyên qua.

Chạy phép tính đó trên từng pixel và bạn sẽ có được một kết hợp rõ ràng: logo được trộn vào ảnh, chú thích mờ dần trên video, menu được vẽ trên trang web. Điều này đang xảy ra liên tục. Mỗi khi trình duyệt vẽ một phần tử bán trong suốt hoặc trò chơi tạo ra một làn khói, nó sẽ thực hiện tổng hợp alpha hàng triệu lần mỗi giây. Kênh alpha cung cấp giá trị độ mờ mà công thức cần cho mỗi pixel.

Khử răng cưa: tại sao alpha làm cho các cạnh mịn màng

Một trong những công việc quan trọng nhất của kênh alpha là tạo ra các cạnh sạch sẽ, khử răng cưa. Hãy xem xét cạnh cong của logo hình tròn. Nếu không có độ trong suốt, đường cong sẽ phải được xây dựng từ các pixel vuông cứng, tạo cho nó một cái nhìn lởm chởm như bậc thang. Với kênh alpha, các pixel dọc theo cạnh được đặt thành trong suốt một phần, hòa trộn hình dạng dần dần với bất kỳ thứ gì phía sau nó.

Đây là lý do tại sao một logo PNG được thiết kế đẹp trông sắc nét trên trang trắng, trang tối hoặc ảnh. Các pixel ở cạnh không được sơn màu trắng hoặc bất kỳ màu đơn nào; chúng trong suốt một phần nên chúng hòa trộn chính xác với mọi nền. Làm phẳng biểu tượng đó thành màu trắng và các pixel ở cạnh đó sẽ trở thành màu trắng một phần. Đặt phiên bản phẳng trên nền tối và bạn sẽ thấy một quầng sáng nhợt nhạt xấu xí, bởi vì sự pha trộn mượt mà đã bị khóa sai màu. Kênh alpha là thứ giữ cho cạnh có thể thích ứng.

Alpha thẳng và alpha nhân trước

Có hai cách để lưu trữ màu và alpha cùng nhau và việc biết sự khác biệt sẽ ngăn ngừa một loại lỗi khó chịu. trong alpha thẳng, các giá trị màu không bị ảnh hưởng và alpha được giữ hoàn toàn riêng biệt, đó là cách PNG lưu trữ độ trong suốt. trong alpha nhân trước, các giá trị màu sẽ được nhân với alpha trước thời hạn, do đó, màu đỏ trong suốt 50 phần trăm đã được lưu dưới dạng màu đỏ đậm hơn.

Alpha nhân trước phổ biến trong video, tổng hợp phim và hiển thị thời gian thực vì nó làm cho một số thao tác hòa trộn nhất định nhanh hơn và tránh viền tối ở các cạnh. Alpha thẳng phổ biến hơn đối với hình ảnh tĩnh và nội dung web vì nó giữ được màu gốc có thể phục hồi được. Sự cố xảy ra khi phần mềm mong đợi cái này và nhận cái kia, tạo ra các cạnh trông quá tối hoặc sáng một cách kỳ lạ. Đối với công việc hình ảnh hàng ngày với PNG và đồ họa web, bạn đang xử lý alpha thẳng và phần mềm sẽ xử lý việc đó cho bạn.

Định dạng hình ảnh nào hỗ trợ kênh alpha

Không phải mọi định dạng đều có thể lưu trữ độ trong suốt và đây là chi tiết thực tế khiến mọi người bối rối trong quá trình chuyển đổi:

PNG: kênh alpha 8 bit đầy đủ với 256 cấp độ, tiêu chuẩn cho đồ họa web trong suốt.
WebP: một kênh alpha đầy đủ ở cả chế độ không mất dữ liệu và mất dữ liệu, đồng thời tạo ra các tệp nhỏ hơn PNG.
AVIF: một định dạng hiện đại với sự hỗ trợ alpha và khả năng nén mạnh mẽ, ngày càng được hỗ trợ nhiều hơn trong trình duyệt.
GIF: chỉ có độ trong suốt bật hoặc tắt đơn giản, không có mức độ một phần nên các cạnh trông thô.
TIFF và SVG: cả hai đều hỗ trợ tính minh bạch, được sử dụng tương ứng trong công việc in ấn và vector.
JPG và BMP: không có kênh alpha nào cả, vì vậy chúng không thể lưu trữ bất kỳ độ trong suốt nào.

Điều đáng chú ý là PNG và WebP là những lựa chọn đáng tin cậy của bạn khi tính minh bạch phải tồn tại, GIF chỉ hoạt động với các phần cắt có cạnh cứng và JPG không phù hợp với bất kỳ thứ gì có thể nhìn xuyên qua.

Kênh alpha trên web và trong CSS

Trên web, kênh alpha xuất hiện ở hai nơi: bên trong tệp hình ảnh và bên trong các giá trị màu CSS. PNG hoặc WebP trong suốt mang alpha của nó trong chính tệp đó, do đó, nó xếp lớp trên bất kỳ nền trang nào. Sau đó, CSS sẽ thêm lớp điều khiển thứ hai với các màu rgba() và hsla() cũng như thuộc tính độ mờ, cho phép bạn làm mờ các phần tử, lớp phủ màu và tạo hiệu ứng kính mà không cần chỉnh sửa hình ảnh.

Sự kết hợp này là lý do tại sao các giao diện hiện đại trông có vẻ nhiều lớp và mềm mại. Phần chính có thể xếp lớp phủ tối bán trong suốt lên ảnh để làm cho văn bản màu trắng có thể đọc được bằng cách sử dụng CSS alpha, trong khi biểu tượng ở trên cùng sử dụng hình ảnh alpha để hiển thị rõ ràng. Cả hai đều dựa trên cùng một ý tưởng cơ bản: mỗi pixel mang độ mờ riêng và trình duyệt kết hợp mọi thứ lại với nhau trong thời gian thực.

Điều gì xảy ra với alpha khi bạn chuyển đổi sang JPG

Vì JPG không có kênh alpha nên việc chuyển đổi hình ảnh trong suốt sang JPG buộc phải đưa ra quyết định: độ trong suốt phải được thay thế bằng thứ gì đó chắc chắn. Bộ chuyển đổi làm phẳng alpha, lấp đầy mọi pixel trong suốt hoặc bán trong suốt bằng màu nền, thường có màu trắng. Các khu vực nhìn xuyên qua trở nên chắc chắn và các cạnh mượt mà dựa vào alpha một phần sẽ bị khóa với màu tô đó.

Đây chính xác là lý do tại sao logo có thể nằm trong hộp màu trắng hoặc đen sau khi chuyển đổi hoặc hiển thị quầng sáng mờ xung quanh các cạnh của nó. Thông tin cần thiết để hòa trộn nó với nền mới đã không còn nữa vì JPG không có nơi nào để lưu trữ nó. Nếu bạn cần độ trong suốt để tồn tại, câu trả lời là giữ PNG hoặc chuyển đổi sang WebP. Khi bạn thực sự muốn có một hình ảnh phẳng, việc chọn màu tô phù hợp rất quan trọng. của chúng tôi bộ chuyển đổi cho phép bạn chọn màu trắng, đen hoặc màu tùy chỉnh để tô hoặc xuất WebP để giữ toàn bộ kênh alpha, điều này hướng dẫn nền trong suốt đi qua.

Các vấn đề minh bạch thường gặp và cách tránh chúng

Hầu hết các cơn đau đầu về minh bạch đều bắt nguồn từ việc kênh alpha bị làm phẳng do sai màu, một bước được gọi là làm mờ. Dưới đây là những thủ phạm thông thường:

Hộp màu trắng hoặc đen: một PNG trong suốt được chuyển đổi sang JPG sẽ lấp đầy nền của nó bằng một màu đồng nhất. Khớp phần điền với đích hoặc giữ độ trong suốt.
Quầng sáng hoặc rìa: logo được phủ màu trắng sau đó đặt trên nền tối sẽ có đường viền nhạt. Tái xuất từ tệp trong suốt ban đầu được làm mờ sang màu chính xác hoặc giữ cho tệp trong suốt.
Viền tối: thường là sự không khớp alpha thẳng và nhân trước. Việc xuất lại với loại alpha chính xác sẽ khắc phục được sự cố.
Mất tính minh bạch sau khi chỉnh sửa: làm phẳng các lớp hoặc lưu dưới dạng JPG sẽ loại bỏ alpha. Giữ một bản gốc lớp hoặc PNG.

Quy tắc ngăn chặn gần như tất cả những điều này: quyết định nền trước khi bạn làm phẳng và giữ tệp gốc vẫn có kênh alpha để bạn có thể xuất lại một cách rõ ràng.

Câu hỏi thường gặp

Kênh alpha là gì?

Kênh alpha là giá trị mỗi pixel kiểm soát độ trong suốt, từ hoàn toàn vô hình đến hoàn toàn rắn chắc, được lưu trữ cùng với màu đỏ, xanh lá cây và xanh lam để thiết lập màu của pixel.

RGBA có nghĩa là gì?

RGBA là viết tắt của đỏ, lục, lam và alpha. Giá trị alpha đặt độ mờ của pixel lên trên màu của nó, vì vậy rgba(255, 0, 0, 0.5) có màu đỏ ở mức 50%.

Tại sao PNG có độ trong suốt còn JPG thì không?

Bởi vì PNG bao gồm kênh alpha và JPG thì không. Nếu không có nơi lưu trữ độ mờ trên mỗi pixel, JPG không thể giữ được bất kỳ độ trong suốt nào.

Kênh alpha có thể lưu trữ bao nhiêu mức độ trong suốt?

256 cấp độ trong hình ảnh 8 bit tiêu chuẩn, từ 0 cho vô hình đến 255 cho rắn. Alpha 16-bit chuyên nghiệp cung cấp 65.536 cấp độ để tổng hợp tốt.

Điều gì xảy ra với kênh alpha khi tôi chuyển đổi sang JPG?

Nó được làm phẳng. Các vùng trong suốt được tô màu đồng nhất, thường có màu trắng, vì JPG không có cách nào để lưu trữ dữ liệu độ mờ.

Định dạng hình ảnh nào hỗ trợ kênh alpha?

PNG, WebP, AVIF, TIFF và SVG hỗ trợ alpha, với PNG và WebP mang lại độ trong suốt một phần mượt mà. GIF chỉ có độ trong suốt bật hoặc tắt và JPG không có.

Alpha thẳng hay alpha nhân trước tốt hơn?

Cả hai đều không tốt hơn; họ phù hợp với những công việc khác nhau. Alpha thẳng giữ cho màu sắc có thể phục hồi được và phù hợp với hình ảnh tĩnh, trong khi alpha được nhân trước sẽ tăng tốc độ hòa trộn trong video và hiển thị thời gian thực.

Làm cách nào để giữ được độ trong suốt khi giảm kích thước tệp?

Chuyển đổi sang WebP thay vì JPG. WebP giữ lại kênh alpha trong khi cắt giảm kích thước từ 25 đến 35 phần trăm, do đó nền vẫn có thể nhìn xuyên qua và tệp trở nên nhẹ hơn.