alpha channel คืออะไร: ความโปร่งใสของรูปภาพทำงานอย่างไร

ทุกพิกเซลในรูปภาพทั่วไปถูกอธิบายด้วยตัวเลขสามตัว: มีสีแดง เขียว และน้ำเงินมากแค่ไหน แค่นี้พอจะบอกว่าพิกเซลเป็นสีอะไร แต่ไม่ได้บอกว่ามองทะลุได้หรือไม่ alpha channel คือตัวเลขตัวที่สี่ของแต่ละพิกเซลที่ทำหน้าที่นั้น: มันเก็บค่าความทึบ ตั้งแต่โปร่งใสทั้งหมดไปจนถึงทึบทั้งหมด

เมื่อคนพูดถึง "PNG พื้นหลังโปร่งใส" หมายถึงรูปที่มี alpha channel และพิกเซลพื้นหลังมีค่า alpha เป็นศูนย์ คู่มือนี้อธิบายว่าตัวเลขนี้ทำงานอย่างไร สองวิธีที่ซอฟต์แวร์ใช้เก็บค่า ทำไมขอบถึงผิดเพี้ยน และวิธีตรวจว่าไฟล์มีอะไรอยู่จริง

RGBA: สี่ช่องสีต่อพิกเซล

MDN นิยาม alpha channel ไว้อย่างเรียบง่าย: สีประกอบด้วยช่องสี (แดง เขียว และน้ำเงิน) และเพื่ออธิบายสีที่ "มองเห็นพื้นหลังผ่านได้ในระดับหนึ่ง" จึงเพิ่มช่องที่สี่เข้าไป รูปที่มีครบทั้งสี่ช่องเรียกว่า RGBA

ค่านี้เขียนได้หลายแบบ และทุกแบบมีความหมายเดียวกัน:

ข้อกำหนด PNG อธิบายไว้อย่างแม่นยำ: ค่า alpha เป็นศูนย์คือโปร่งใสทั้งหมด ค่าสูงสุดของความลึกบิตคือทึบทั้งหมด และค่าระหว่างกลางคือพิกเซลโปร่งใสบางส่วน "ที่สามารถซ้อนกับภาพพื้นหลังได้"

ค่าระหว่างกลางเหล่านี้คือส่วนสำคัญ ภาพไดคัทที่ดีไม่ใช่แค่ "ตัวแบบทึบ พื้นหลังโปร่งใส" พิกเซลตามขอบ โดยเฉพาะผม ขนสัตว์ ผ้า แก้ว และภาพเบลอจากการเคลื่อนไหว จะโปร่งใสบางส่วน และนั่นคือสิ่งที่ทำให้ตัวแบบดูเป็นธรรมชาติบนพื้นหลังใหม่ แทนที่จะดูเหมือนตัดด้วยกรรไกร

พิกเซลโปร่งใสถูกวาดอย่างไร

เมื่อแอปวางรูปของคุณทับสิ่งอื่น มันจะผสมแต่ละพิกเซลกับสิ่งที่อยู่ข้างหลัง ข้อกำหนด Compositing and Blending ของ W3C ให้สูตรพื้นฐานไว้ดังนี้:

result = Cs x as + Cb x ab x (1 - as)

Cs, as = color and alpha of your image (the source)
Cb, ab = color and alpha of what is behind it (the backdrop)

ในกรณีทั่วไปที่พื้นหลังทึบ สูตรนี้จะกลายเป็นค่าเฉลี่ยถ่วงน้ำหนัก พิกเซลที่มี alpha 0.3 ให้สีของตัวเอง 30% และให้พื้นหลังผ่านมา 70%

straight alpha กับ premultiplied alpha

มีสองวิธีในการเก็บสีของพิกเซลที่โปร่งใสบางส่วน และการใช้สลับกันเป็นต้นเหตุคลาสสิกของขอบที่มืดหรือสว่างเกินไป

Straight alpha (หรือเรียกว่า unassociated หรือ non-premultiplied) เก็บสีเหมือนพิกเซลนั้นทึบทั้งหมด และเก็บค่าความทึบแยกไว้ พิกเซลสีแดงล้วนที่โปร่งใสครึ่งหนึ่งจะเก็บเป็น red 255, green 0, blue 0, alpha 128

Premultiplied alpha (หรือเรียกว่า associated) เก็บสีที่คูณกับ alpha ไว้แล้ว พิกเซลเดียวกันจะเก็บเป็น red 128, green 0, blue 0, alpha 128 ตามที่ข้อกำหนด PNG ระบุ รูปแบบนี้ "ถูกซ้อนกับพื้นหลังสีดำไว้แล้ว"

ไฟล์จะใช้แบบไหนขึ้นอยู่กับรูปแบบไฟล์และซอฟต์แวร์:

• PNG ใช้ straight alpha เสมอ ข้อกำหนดระบุไว้ชัดเจน และบอกว่าวิธีนี้ทำให้โปรแกรมแต่งรูปเปลี่ยนความโปร่งใสของรูปได้ง่าย
• ไปป์ไลน์กราฟิก เกมเอนจิน และเครื่องมือซ้อนวิดีโอมักทำงานด้วย premultiplied alpha ภายใน เพราะคณิตศาสตร์การผสมง่ายกว่าและการกรองภาพให้ผลดีกว่า

ปัญหาเริ่มเมื่อโปรแกรมหนึ่งเขียนค่าแบบ premultiplied แต่อีกโปรแกรมอ่านเป็น straight สีตามขอบจะมืดเกินไป กลายเป็นเส้นขอบสีดำบางๆ ถ้ากลับกัน ขอบจะสว่างเกินไป ถ้าคุณเห็นขอบมืดแบบเดียวกันในภาพไดคัททุกภาพจากเครื่องมือหนึ่ง ให้สงสัยเรื่อง premultiplication ไม่ตรงกันเป็นอย่างแรก

ทำไมภาพไดคัทถึงมีขอบเรือง (halo)

halo คือขอบที่มองเห็นได้รอบตัวแบบซึ่งไม่ใช่ส่วนหนึ่งของตัวแบบ มีสาเหตุที่พบบ่อยสี่อย่าง และแต่ละอย่างมีวิธีแก้ของตัวเอง

1. พื้นหลังเดิมติดอยู่ในพิกเซลขอบ

กล้องไม่เคยจับขอบเขตที่สะอาดได้ เส้นผมหนึ่งเส้นตัดกับพุ่มไม้สีเขียวทำให้เกิดพิกเซลที่เป็นผมส่วนหนึ่งและพุ่มไม้ส่วนหนึ่ง ถ้าภาพไดคัทเก็บสีเดิมของพิกเซลเหล่านั้นไว้และแค่ทำให้โปร่งใสบางส่วน สีเขียวก็ยังผสมอยู่ เมื่อวางบนพื้นขาว ตัวแบบจะมีแสงเรืองสีเขียวจางๆ

วิธีแก้คือ color decontamination: ประมาณสีจริงของส่วนหน้าสำหรับแต่ละพิกเซลขอบ แล้วเขียนค่านั้นแทน Photoshop เรียกฟีเจอร์นี้ว่า Decontaminate Colors ในพื้นที่ทำงาน Select and Mask และไลบรารีโอเพนซอร์ส rembg มีตัวเลือก decontaminate ที่ทำแบบเดียวกัน มันเปลี่ยนสีของขอบ แต่ไม่เปลี่ยนรูปทรงของมาสก์

2. มาสก์แข็งเกินไป

ถ้ามาสก์มีแค่พิกเซลทึบทั้งหมดและโปร่งใสทั้งหมด ขอบจะดูหยัก และการลบรอยหยัก (antialiasing) ในรูปต้นฉบับจะทิ้งเส้นสีพื้นหลังหนาหนึ่งพิกเซลไว้รอบตัวแบบ ตัวแบบที่นุ่มอย่างผมต้องใช้มาสก์นุ่มที่มีค่าระหว่างกลางจริงๆ

3. สีที่ซ่อนอยู่ในพิกเซลโปร่งใส

พิกเซลที่มี alpha เป็นศูนย์ยังมีค่าแดง เขียว และน้ำเงินอยู่ในไฟล์แบบ straight alpha คุณมองไม่เห็น แต่การปรับขนาดหรือเบลอรูปจะผสมพิกเซลข้างเคียงกัน และถ้าสีที่ซ่อนอยู่เป็นขาวหรือดำ มันจะซึมเข้ามาที่ขอบที่มองเห็นได้ ไลบรารีรูปภาพที่ดีเลี่ยงปัญหานี้ด้วยการ premultiply ก่อนปรับขนาดแล้วแปลงกลับทีหลัง

4. รูปถูกเติมทับลงบนสี

GIF และ PNG แบบพาเลตต์มักรองรับแค่ความโปร่งใสแบบเปิดหรือปิด เครื่องมือจึงลบรอยหยักของขอบโดยผสมกับสีพื้น (matte) ซึ่งส่วนใหญ่เป็นสีขาว ก่อนบันทึก รูปแบบนี้ดูดีบนพื้นขาว แต่มีขอบขาวบนพื้นที่เข้มกว่า ถ้าภาพไดคัทของคุณจะวางบนพื้นหลังสีเข้ม ให้ส่งออกแบบ alpha เต็มรูปแบบแทน

มาสก์ แมตต์ และ alpha: คำศัพท์

คำเหล่านี้ทับซ้อนกันและมักใช้กันแบบหลวมๆ ความหมายที่ใช้กันโดยทั่วไปมีดังนี้:

• Alpha channel: ค่าความทึบที่เก็บอยู่ในไฟล์ภาพ หนึ่งค่าต่อพิกเซล
• มาสก์ (mask): ภาพโทนเทาที่ควบคุมว่าส่วนไหนของอีกภาพหนึ่งจะมองเห็นได้ ในเลเยอร์มาสก์ของ Photoshop สีขาวคือแสดง สีดำคือซ่อน และสีเทาคือมองเห็นบางส่วน มาสก์แก้ไขได้โดยไม่แตะพิกเซลต้นฉบับ มืออาชีพจึงลบพื้นหลังด้วยมาสก์แทนการใช้ยางลบ
• แมตต์ (matte): คำในวงการภาพยนตร์และการซ้อนภาพสำหรับแนวคิดเดียวกัน คือภาพโทนเทาที่กำหนดว่าจะเก็บส่วนไหนไว้ "Matting" คือโจทย์การคำนวณแมตต์ที่นุ่มและแม่นยำสำหรับขอบยากๆ อย่างเส้นผม
• Trimap: แผนที่คร่าวๆ สามโซน (ส่วนหน้าแน่นอน พื้นหลังแน่นอน และไม่แน่ใจ) ที่อัลกอริทึม matting บางตัวใช้เป็นจุดเริ่มต้น
• มาสก์แบบไบนารีหรือมาสก์แข็ง: มีแค่ขาวกับดำ ไม่มีสีเทา ใช้ได้กับกล่องและโลโก้ แต่ไม่ดีกับเส้นผม
• ภาพไดคัท (cut-out): ผลลัพธ์ที่เสร็จแล้ว คือสีของตัวแบบบวกกับ alpha channel

มาสก์และ alpha channel เก็บข้อมูลเดียวกัน เครื่องมือหลายตัวให้ส่งออกได้ทั้งสองแบบ: PNG พื้นหลังโปร่งใสที่มี alpha ในตัว หรือภาพมาสก์ขาวดำแยกต่างหากที่คุณนำไปใช้เองในโปรแกรมแต่งรูปหรือโปรแกรมตัดต่อวิดีโอ

รูปแบบไฟล์ไหนเก็บ alpha ได้

ดูการเปรียบเทียบรูปแบบเหล่านี้แบบเต็มได้ที่ PNG vs JPEG vs WebP

วิธีตรวจว่ารูปมีพื้นหลังโปร่งใสจริงไหม

ไฟล์ที่ลงท้ายด้วย .png ไม่ได้พิสูจน์ว่ามีความโปร่งใส PNG จำนวนมากทึบทั้งหมด และรูป "พื้นหลังโปร่งใส" บางรูปที่เจอออนไลน์เป็น JPEG ที่มีลายตารางหมากรุกสีเทาขาววาดลงไปในพิกเซล วิธีตรวจที่เชื่อถือได้มีดังนี้

ดูด้วยตา

วางรูปบนพื้นหลังสีเข้มและสีอ่อน เช่น ในสไลด์หรือโปรแกรมออกแบบ ภาพไดคัทจริงจะแสดงสีพื้นหลังรอบตัวแบบในทั้งสองกรณี ถ้ายังเห็นลายตารางหมากรุก แปลว่ามันเป็นส่วนหนึ่งของภาพ ไม่ใช่ความโปร่งใส

ใช้ ImageMagick

# Does the file have an alpha channel at all?
identify -format "%A\n" photo.png

# Is it fully opaque anyway? (true means no visible transparency)
identify -format "%[opaque]\n" photo.png

%A รายงานช่องความโปร่งใส (คำที่แสดงออกมาต่างกันระหว่าง ImageMagick 6 และ 7) และ %[opaque] คำนวณว่าทุกพิกเซลทึบทั้งหมดหรือไม่ สิ่งที่ต้องการคือมี alpha channel และได้ค่า false

ใช้ Python และ Pillow

from PIL import Image

im = Image.open("photo.png")
print(im.mode)                    # RGBA or LA means an alpha channel
print(im.has_transparency_data)   # True if the file carries any transparency info

if "A" in im.getbands():
    lo, hi = im.getchannel("A").getextrema()
    print("alpha range:", lo, hi)  # lo == 255 means nothing is transparent

การตรวจค่าต่ำสุดและสูงสุด (extrema) จะจับกรณีที่พบบ่อย คือไฟล์ RGBA ที่ทุกพิกเซลทึบ

เมื่อแพลตฟอร์มไม่สนใจ alpha

บางที่ตัดหรือไม่สนใจความโปร่งใส Etsy ระบุว่าไม่รองรับ PNG พื้นหลังโปร่งใส และส่วนที่โปร่งใสอาจแสดงเป็นสีดำ ส่วนมาร์เก็ตเพลสอย่าง Amazon และ Walmart ก็ต้องการรูปหลักบนพื้นขาวล้วนอยู่แล้ว ในกรณีเหล่านี้ ให้วางภาพไดคัทบนสีพื้นหลังเองเพื่อควบคุมผลลัพธ์ บนเว็บไซต์ของคุณเอง ในสไลด์ และในโปรแกรมออกแบบ ให้เก็บ alpha ไว้

ได้ alpha channel ที่สะอาดอย่างรวดเร็ว

ถ้าคุณต้องการภาพไดคัทที่ขอบนุ่มแทนมาสก์แข็ง removebackground.dev ลบพื้นหลังแล้วส่งออกเป็นไฟล์ PNG หรือ WebP พื้นหลังโปร่งใสที่มี alpha channel เต็มรูปแบบ และ API ยังส่งคืนมาสก์โทนเทาแยกต่างหากได้ด้วย