คุณลาก PNG แบบ "โปร่งใส" ไปวางบนสไลด์สีเข้ม แล้วมีสี่เหลี่ยมสีขาวติดมาด้วย ทั้งที่ไฟล์ปกติดีในโปรแกรมแก้ไข เกิดอะไรขึ้น? คำตอบอยู่ในแชนเนลที่สี่ซึ่งแทบไม่เคยมีใครได้เห็น ทุกพิกเซลในภาพมีค่าสีแดง เขียว และน้ำเงิน และในบางฟอร์แมตยังมีตัวเลขตัวที่สี่ที่เรียกว่า อัลฟาแชนเนล (alpha channel) ซึ่งบอกว่าพิกเซลนั้นควรแสดงออกมามากแค่ไหน
คู่มือนี้จะอธิบายว่าตัวเลขนั้นเก็บอะไร ฟอร์แมตใดเก็บมันไว้เต็มรูปแบบ (PNG และ WebP) ฟอร์แมตใดลดทอนมันเหลือแค่สวิตช์เปิด-ปิด (GIF) ฟอร์แมตใดทิ้งมันไปเลย (JPG) และทำไม SVG ถึงมีกฎต่างออกไป ระหว่างทางเราจะอ่านค่าอัลฟาแชนเนลของภาพตัดพื้นหลังจริงเจ็ดภาพทีละพิกเซล ตัวเลขทั้งหมดด้านล่างจึงมาจากไฟล์จริง ไม่ใช่ทฤษฎี
PNG ไฟล์เดียว สี่ฉากหลัง รองเท้าผ้าใบนี้เป็นภาพทดสอบที่สร้างด้วย AI แล้วตัดพื้นหลังด้วยตัวตัดพื้นหลังของ Atlas Cloud ไฟล์ถูกวางบนฉากหลังแต่ละแบบโดยไม่แก้ไขใด ๆ
ประเด็นสำคัญ
- อัลฟาแชนเนลคือแชนเนลที่สี่ซึ่งเก็บค่าความทึบแสงของทุกพิกเซล ตั้งแต่ 0 (โปร่งใสสนิท) ถึง 255 (ทึบแสงสนิท) ในภาพ 8 บิต
- PNG และ WebP เก็บอัลฟาแชนเนลแบบเต็มรูปแบบ GIF ทำได้เพียงตั้งค่าสีหนึ่งในพาเลตต์ให้เป็นโปร่งใส ส่วน JPG ไม่เก็บความโปร่งใสเลย
- ตัวตัดพื้นหลัง AI ฟรี ของ Atlas Cloud คืนค่าเป็น PNG โปร่งใสที่ขนาดพิกเซลเท่ากับไฟล์ที่คุณอัปโหลด โดยประมวลผลภายในเบราว์เซอร์ของคุณ
- ในภาพตัดพื้นหลังเจ็ดภาพที่วัดค่า มีเพียง 0.7% ถึง 2.2% ของพิกเซลที่เป็นโปร่งใสบางส่วน แถบบาง ๆ นั้นคือขอบแบบแอนติแอลิเอสที่ทำให้เส้นผมและเส้นรอบนอกดูเป็นธรรมชาติ
- PNG ที่แสดงฉากหลังสีขาวหรือดำในโปรแกรมดูภาพมักไม่ได้สูญเสียอัลฟาแชนเนลไป ลองเปิดดูบนพื้นสีเข้มหรือพื้นลายตารางหมากรุกก่อนที่จะส่งออกใหม่
อัลฟาแชนเนลเก็บอะไรไว้ในทุกพิกเซล
ถ้าถามว่าอัลฟาแชนเนลคืออะไร คุณมักได้คำอุปมาอุปไมยกลับมา แต่ต่อไปนี้คือตัวเลขจริง ข้อกำหนด PNG ของ W3C นิยามไว้ในประโยคเดียวว่า "ค่าตัวอย่างอัลฟากำหนดระดับความทึบแสงของพิกเซล โดยศูนย์หมายถึงโปร่งใสสนิท และค่าสูงสุดหมายถึงทึบแสงสนิท" ในภาพ 8 บิต ค่าสูงสุดคือ 255 ซึ่งให้ 256 ระดับระหว่างโปร่งใสกับทึบแสง
PNG ยังรองรับอัลฟา 16 บิตด้วย ข้อกำหนดอนุญาตให้ใช้ความลึกบิต 8 หรือ 16 สำหรับประเภทสีที่พกอัลฟาทั้งสองแบบ คือโทนเทากับอัลฟา และทรูคัลเลอร์กับอัลฟา โดยอัลฟาแชนเนล 16 บิตมี 65,536 ระดับ แต่นอกวงการคอมโพสิตติงแล้ว สิ่งที่คุณจะเจอคือ 8 บิต
ดังนั้นพิกเซล RGBA จึงเป็นตัวเลขสี่ตัว สามตัวบอกสี หนึ่งตัวบอกความครอบคลุม เปลี่ยนแค่ตัวที่สี่ สีก็ยังอยู่ที่เดิมแต่พิกเซลค่อย ๆ จางลง นั่นคือเทคนิคทั้งหมดที่อยู่เบื้องหลังขอบผมที่นุ่มนวล เงาตกกระทบ และกระจกที่ยอมให้ฉากหลังส่องทะลุผ่าน
คำว่า "โปร่งใส" ปิดบังความแตกต่างสำคัญไว้ บางฟอร์แมตเก็บค่าอัลฟาเต็มรูปแบบต่อพิกเซล พิกเซลจึงมองเห็นได้ 37% ก็ได้ ส่วนฟอร์แมตอื่นเก็บเพียงธงบอกใช่หรือไม่ใช่ พิกเซลนี้วาด อันนั้นข้ามไป ทั้งสองแบบถูกเรียกว่าความโปร่งใสเหมือนกัน แต่มีเพียงแบบแรกเท่านั้นที่ทำให้ขอบจางลงได้ จำความต่างนี้ไว้ เพราะมันคือเหตุผลที่สติกเกอร์ GIF ดูหยักเป็นขั้นบันได ขณะที่ภาพตัดพื้นหลัง PNG ไม่เป็น
ยังมีอีกคำหนึ่งที่คุณจะเจอในเครื่องมือวิดีโอและเกม คืออัลฟาแบบพรีมัลติพลายด์ (premultiplied alpha) ในไฟล์แบบตรง (หรือไม่พรีมัลติพลายด์) ค่าสีถูกเก็บไว้เต็มความเข้ม แล้วอัลฟาเป็นตัวย่อสเกลตอนแสดงผล ส่วนไฟล์แบบพรีมัลติพลายด์ ค่าสีถูกคูณด้วยอัลฟาไปแล้ว พิกเซลสีแดงที่มองเห็นครึ่งเดียวจึงถูกเก็บเป็นสีแดงครึ่งความเข้ม PNG ใช้แบบตรง โดยข้อกำหนดระบุว่าค่าสี "ไม่ถูกพรีมัลติพลายด์ด้วยค่าอัลฟา"
แนวคิดนี้มีร่องรอยทางเอกสาร บันทึกความจำของ Alvy Ray Smith ปี 1995 เกี่ยวกับประวัติของอัลฟา ให้เครดิตตัวเองและ Ed Catmull ว่าเป็นผู้คิดแนวคิดนี้ในทศวรรษ 1970 ที่สถาบันเทคโนโลยีนิวยอร์ก และให้เครดิตบทความของ Porter และ Duff ปี 1984 ว่าเป็นผู้ลากเส้นแบ่งระหว่างสองธรรมเนียมปฏิบัติ สำหรับงานเว็บและงานพิมพ์ทั่วไป คุณไม่ต้องสนใจความต่างนี้ เพราะโปรแกรมแก้ไขของคุณจัดการให้อยู่แล้ว
วิธีบันทึก PNG ที่มีพื้นหลังโปร่งใส
ปัญหาว่า "ไฟล์ที่ส่งออกไม่โปร่งใส" หลายครั้งถูกตัดสินก่อนที่หน้าต่างบันทึกจะเปิดขึ้นด้วยซ้ำ มีสามกฎที่ครอบคลุมเรื่องนี้ เลเยอร์พื้นหลังต้องถูกซ่อนหรือลบออก เพื่อให้ผืนงานแสดงลายตารางหมากรุกในโปรแกรมแก้ไข ฟอร์แมตต้องเป็นแบบที่มีอัลฟาแชนเนล ซึ่งในทางปฏิบัติหมายถึง PNG หรือ WebP
และตัวเลือก PNG ควรเป็นแบบ 8 บิตต่อแชนเนล หรือที่มักติดป้ายว่า PNG-24 หรือ 32 บิต ไม่ใช่แบบพาเลตต์ที่ผู้ส่งออกบางตัวลดทอนเหลือความโปร่งใสแบบเปิด-ปิด ข้อกำหนด PNG อนุญาตให้ภาพแบบอินเด็กซ์พก "ตารางอัลฟาที่จับคู่ค่าตัวอย่างอัลฟากับแต่ละรายการในพาเลตต์" ได้ก็จริง แต่คุณจะไว้ใจว่าเครื่องมือทุกตัวใช้มันไม่ได้
เส้นทางเมนูด้านล่างมาจากเอกสารของผู้ผลิตแต่ละราย
| ซอฟต์แวร์ | ตำแหน่งคำสั่งส่งออก PNG โปร่งใส |
|---|---|
| ตัวตัดพื้นหลัง Atlas Cloud | คลิก Download อัลฟาแชนเนลพร้อมอยู่แล้ว จึงไม่มีค่าฟอร์แมตให้ตั้งผิด |
| Photoshop | File > Export > Export As เลือก PNG เป็นฟอร์แมต และอนุญาตความโปร่งใสในการตั้งค่าฟอร์แมต |
| GIMP 3.0 | File > Export As ตั้งชื่อไฟล์เป็น .png ตัวเลือก "Save color values from transparent pixels" ใช้ได้กับภาพเลเยอร์เดียวเท่านั้น |
| Figma | เลือกเฟรม เพิ่มการส่งออก PNG ในแถบด้านขวา หากเฟรมมีสีเติม ให้ปิดเครื่องหมาย Show in exports ในส่วน Fill |
| PowerPoint | Picture Format > Remove Background จากนั้นคลิกขวาที่ภาพ Save as Picture และเลือก PNG ในรายการ Save as type |
ไม่ว่าคุณจะใช้เครื่องมือใด ให้ดูผลลัพธ์บนพื้นลายตารางหมากรุกก่อนดาวน์โหลด แผงผลลัพธ์ของ Atlas Cloud แสดงแบบนั้นพอดี คุณจึงเห็นอัลฟาแชนเนลทำงานก่อนที่ไฟล์จะไปถึงดิสก์ของคุณด้วยซ้ำ
เปลี่ยนภาพใด ๆ เป็น PNG โปร่งใสได้ในคลิกเดียว
วิธีที่เร็วที่สุดในการได้ไฟล์ที่มีอัลฟาแชนเนลจริงคือปล่อยให้โมเดลแบ่งส่วนภาพสร้างมันขึ้นมา Atlas Cloud รันเครื่องมือตัดพื้นหลังไว้ในแท็บเบราว์เซอร์ ซึ่งเป็นหนึ่งในชุดเครื่องมือ AI ฟรีบนเว็บไซต์ที่ไม่ต้องมีบัญชี คุณเพียงลากรูปภาพเข้าไป คลิก Run Free แล้วดาวน์โหลดผลลัพธ์
โมเดลทำงานในเครื่องผ่าน WebGPU โดยมี WASM เป็นตัวสำรองบนเครื่องที่ไม่รองรับ และเราตัดพื้นหลังสำเร็จแม้ปิดการเชื่อมต่อเครือข่าย ไม่มีลายน้ำและไม่ต้องสมัครสมาชิก
subject ไม่ได้จำกัดอยู่แค่ภาพบุคคล ในการทดสอบ ภาพหมู่ สุนัขขนยาว รองเท้าผ้าใบสีขาว ลายเซ็นเขียนมือ โลโก้แบบลายเส้น และเสื้อเชิ้ตสีขาวที่ถ่ายกับผนังสีขาว ต่างก็ได้ผลลัพธ์เป็นภาพตัดพื้นหลังที่ใช้งานได้ โดยโลโก้ยังมีช่องว่างภายในเปิดโล่ง หากภาพตัดพื้นหลังที่คุณต้องการนำไปพิมพ์ขนาดใหญ่ ให้ใช้คู่กับการเปรียบเทียบตัวอัปสเกลภาพ AI ฟรีที่เราเคยทดสอบไว้ เนื่องจากอัลฟาแชนเนลจะขยายตามภาพ
เจาะลึกภาพตัดพื้นหลังจริง: พิกเซลนุ่ม ๆ อยู่ตรงไหน
เราเปิดผลลัพธ์เหล่านั้นเจ็ดภาพใน Python แล้วนับทุกพิกเซลตามค่าอัลฟา รูปแบบที่พบเหมือนกันทั้งเจ็ดภาพ พิกเซลโปร่งใสสนิทมีอยู่ระหว่าง 60.6% ถึง 98.4% ขึ้นอยู่กับว่าวัตถุในภาพกินพื้นที่เฟรมมากแค่ไหน
พิกเซลโปร่งใสบางส่วน ซึ่งมีค่าอัลฟาระหว่าง 8 ถึง 250 คิดเป็น 0.7% ถึง 2.2% ของภาพ นั่นคือแถบกว้าง 1 ถึง 3 พิกเซลที่พาดรอบเส้นรอบนอก และเป็นแถบที่ทำงานแอนติแอลิเอสทั้งหมด
ผ้าคลุมบาง ๆ สอนอะไรบางอย่างที่นิยามเพียงอย่างเดียวไม่บอก อัลฟาแชนเนลเก็บความโปร่งแสงได้ก็จริง แต่ผ้าคลุมกลับได้พิกเซลโปร่งใสบางส่วนเพียง 0.73% ซึ่งเป็นเส้นรอบนอกบาง ๆ เหมือนรองเท้าผ้าใบ ตัวเนื้อผ้าถูกเขียนเป็นทึบแสง โดยมีสีเขียวของพืชด้านหลังฝังอยู่ในค่าสี รูปร่างยังอยู่ครบ แต่ความโปร่งแสงหายไป การที่ไฟล์มีอัลฟาแชนเนลไม่ได้บอกอะไรเลยว่าโมเดลเลือกใช้ช่วงกลางของระดับหรือเปล่า
ข้อสังเกตทางเทคนิคเล็ก ๆ สำหรับคนช่างสงสัย: ในไฟล์ทั้งเจ็ด พิกเซลวัตถุทึบแสงมีค่าอัลฟาที่ 254 ไม่ใช่ 255 ซึ่งเป็นความต่างที่จอภาพใดก็แสดงไม่ออก ในไฟล์ PNG ขนาดเต็มที่เราตรวจสอบ พิกเซลโปร่งใสสนิททุกตัวมีค่าสีเดียวกันคือดำล้วน ไฟล์จึงไม่เก็บฉากหลังแอบแฝงที่จะรั่วกลับมาเป็นขอบสีได้
ฟอร์แมตรูปภาพใดรองรับความโปร่งใส
ห้าฟอร์แมตครอบคลุมไฟล์เกือบทุกแบบที่คุณจะได้รับมา พวกมันเก็บความโปร่งใสสี่วิธีต่างกัน และความต่างนี้ตัดสินว่าขอบจะจางได้ไหม ไฟล์จะทำแอนิเมชันได้ไหม และไฟล์จะใหญ่แค่ไหน
| ฟอร์แมต | วิธีเก็บความโปร่งใส | ระดับ | ขอบนุ่ม | แอนิเมชัน |
|---|---|---|---|---|
| PNG | อัลฟา 8 หรือ 16 บิตต่อพิกเซล หรือชังก์ tRNS สำหรับความโปร่งใสแบบอินเด็กซ์และสีเดียว | 256 หรือ 65,536 | ได้ | ได้ (APNG ซึ่งปัจจุบันเป็นส่วนหนึ่งของข้อกำหนด PNG) |
| WebP | อัลฟา 8 บิตต่อพิกเซล ทั้งโหมดสูญเสียและไม่สูญเสีย | 256 | ได้ | ได้ |
| GIF | ตั้งดัชนีพาเลตต์หนึ่งรายการเป็นโปร่งใส | 2 (เปิดหรือปิด) | ไม่ได้ | ได้ |
| SVG | รูปทรงเวกเตอร์ที่ไม่มีฉากหลัง ตั้งค่าความทึบแสงเป็นรายองค์ประกอบ | ต่อเนื่อง | ได้ | ได้ |
| JPG | ไม่มี | 1 | ไม่ได้ | ไม่ได้ |
JPG รองรับความโปร่งใสไหม?
ไม่รองรับ คู่มือฟอร์แมตภาพของ MDN ระบุไว้ตรง ๆ ว่า "JPEG ไม่รองรับอัลฟาแชนเนล" ฟอร์แมตนี้เก็บสามแชนเนลสีและไม่มีอะไรอื่น ดังนั้นเมื่อคุณบันทึกภาพแบบเลเยอร์เป็น JPG โปรแกรมแก้ไขต้องแบนภาพลงบนสีใดสีหนึ่งก่อน ซึ่งมักเป็นสีขาว สีขาวนั้นก็กลายเป็นพิกเซลธรรมดาและติดไปกับวัตถุทุกที่ที่ไฟล์ไป
นี่ก็เป็นเหตุผลว่าทำไมการดาวน์โหลด "JPG โปร่งใส" จึงไม่ใช่สิ่งที่มันอ้าง ไม่ว่าไฟล์นั้นจะเป็น PNG ที่ตั้งนามสกุลผิด หรือลายตารางหมากรุกที่คุณเห็นถูกวาดลงในพิกเซลไปแล้ว การเปลี่ยนชื่อ .jpg เป็น .png เปลี่ยนแค่ป้ายบนกล่อง ไม่ใช่สิ่งที่อยู่ข้างใน ถ้าต้องการความโปร่งใส ต้องเปิดไฟล์ JPG ตัดพื้นหลังออก แล้วบันทึกผลลัพธ์เป็นฟอร์แมตที่เก็บอัลฟาแชนเนลได้
GIF โปร่งใส: สีเดียว ขอบแข็ง
ความโปร่งใสของ GIF มาจากการแก้ไขฟอร์แมตครั้งที่ 89a และอายุของมันก็ปรากฏชัด ข้อกำหนด GIF89a เพิ่ม Graphic Control Extension พร้อม Transparency Index ซึ่งอธิบายว่า "Transparency Index นั้นเมื่อพบเจอ พิกเซลที่ตรงกันของอุปกรณ์แสดงผลจะไม่ถูกแก้ไข และการประมวลผลจะไปยังพิกเซลถัดไป" รายการหนึ่งในตารางสีถูกประกาศให้มองทะลุได้ ส่วนพิกเซลอื่นทุกตัวถูกวาดเต็มความเข้ม
ทำให้ความโปร่งใสของ GIF เป็นเรื่อง 1 บิต พิกเซลจะถูกข้ามหรือถูกวาด และด้วยพาเลตต์ที่มีไม่เกิน 256 สี จึงไม่มีที่ว่างสำหรับขอบที่มองเห็นครึ่งเดียว ลองวางภาพตัดพื้นหลัง GIF บนพื้นหลังที่ต่างจากพื้นเดิมที่ทำขึ้นมา ขอบจะขึ้นบันไดเหมือนstairs และมักมีขอบซีด ๆ ตรงจุดที่พิกเซลแอนติแอลิเอสถูกปรับเป็นทึบแสง
เราแปลงภาพตัดพื้นหลังรองเท้าผ้าใบเป็น GIF ด้วยเกณฑ์อัลฟา 128 ซึ่งเป็นค่าเริ่มต้นปกติ แล้วขยายพื้นที่เชือกผูกบริเวณเดียวกันสามเท่า ฝั่ง 8 บิตจางลงในสองสามพิกเซล ฝั่ง GIF เป็นมุมฉากทั้งหมด ถ้าคุณจำเป็นต้องใช้ GIF โปร่งใสสำหรับลูกค้าที่รับอย่างอื่นไม่ได้ ให้สร้างมันบนสีพื้นหลังที่จะวางจริง เพื่อให้ขอบกลมกลืนแทนที่จะเรืองแสง
ความโปร่งใสของ WebP ในไฟล์แบบสูญเสียและไม่สูญเสีย
WebP คือฟอร์แมตที่ให้การบีบอัดแบบสูญเสียมีอัลฟาแชนเนลได้ในที่สุด เอกสารการบีบอัดของ Google อธิบายว่า "มีโหมด WebP อีกแบบที่อนุญาตให้เข้ารหัสแชนเนล RGB แบบสูญเสีย และเข้ารหัสอัลฟาแชนเนลแบบไม่สูญเสีย" และเอกสารอ้างอิง cwebp ตั้งค่าคุณภาพอัลฟาเริ่มต้นไว้ที่ 100 หมายความว่าเพลนอัลฟาถูกเก็บแบบไม่สูญเสีย เว้นแต่คุณจะสั่งเป็นอย่างอื่น
หน้าเพจภาพรวมของ Google ระบุว่า WebP แบบไม่สูญเสียเล็กกว่า PNG 26% บอกว่าความโปร่งใสเพิ่มขนาดราว 22% และบอกว่า WebP แบบสูญเสียที่มีความโปร่งใสโดยทั่วไปเล็กกว่า PNG 3 เท่า
ตัวเลขของเราก็อยู่ในละแวกนั้น เราเอาภาพตัดพื้นหลังขนาด 2048 x 1152 มาจากเครื่องมือตัดพื้นหลังโดยตรง ซึ่งเป็น PNG ขนาด 1,211 KB แล้วบันทึกใหม่ด้วย Pillow ที่การตั้งค่าเริ่มต้น
WebP แบบไม่สูญเสียได้ 660 KB เล็กลง 46% และค่าอัลฟาทุกค่าตรงกับ PNG เป๊ะ ส่วน WebP แบบสูญเสียคุณภาพ 80 ได้ 124 KB และเพลนอัลฟายังเหมือนต้นฉบับทุกไบต์ สิ่งเดียวที่เปลี่ยนคือข้อมูลสี สำหรับการส่งภาพตัดพื้นหลังทางเว็บ นี่มักเป็นไฟล์ที่คุณต้องการ ส่วนไฟล์ต้นฉบับที่คุณตั้งใจจะแก้ไขต่อ ให้ใช้ PNG หรือ WebP แบบไม่สูญเสีย
พื้นหลังโปร่งใสของ SVG: ไม่มีฉากหลังให้ตัดออก
SVG ไม่มีพื้นหลังให้ทำให้โปร่งใส เพราะมันไม่เคยมีพื้นหลังตั้งแต่แรก ไฟล์ SVG คือรายการคำสั่งวาดภาพ วาดวงกลมนี้ตรงนี้ เติมด้วยสีนี้ ไม่มีอะไรในรายการนั้นระบายผืนงาน เว้นแต่คุณจะเพิ่มสี่เหลี่ยมที่คลุมมันไว้ เมื่อ SVG ดูเหมือนมีพื้นหลังสีขาว สิ่งที่คุณเห็นคือหน้าเว็บหรือโปรแกรมดูที่อยู่ข้างหลังมันต่างหาก
ความโปร่งใสภายใน SVG ตั้งค่าเป็นรายองค์ประกอบ เอกสารอ้างอิงของ MDN อธิบายว่าค่า fill แบบ none คือการไม่ระบายสีเลย ภายในรูปทรงจึงยังโปร่งใส แอตทริบิวต์ fill-opacity ทำให้เฉพาะสีที่ระบายในรูปทรงจางลง ส่วน opacity ทำให้ทั้งองค์ประกอบจางลง รวมถึงเส้นขอบด้วย
มีสองเรื่องที่ทำให้คนสับสนบ่อย ภาพถ่ายแรสเตอร์ที่ฝังใน SVG ผ่านองค์ประกอบ image จะคงอัลฟาแชนเนลที่ภาพถ่ายนั้นมีอยู่ JPG ที่อยู่ภายใน SVG จึงยังพกกล่องสีขาวของมันมาด้วย และการนำภาพถ่ายผ่านตัวแปลงแรสเตอร์เป็น SVG ไม่ได้ตัดพื้นหลังออก แต่ลากพื้นหลังไปเป็นรูปทรงต่าง ๆ พร้อมกับอย่างอื่นทั้งหมด
ทำไม PNG ของฉันถึงไม่โปร่งใส?
ลองตรวจตามลำดับนี้ ไฟล์ที่ผ่านข้อแรกไม่ต้องแก้อะไรเลย
โปรแกรมดูภาพเป็นคนวาดฉากหลังขึ้นมาเอง โปรแกรมดูภาพต้องเอาอะไรบางอย่างไปวางหลังพิกเซลโปร่งใส และหลายตัวเลือกสีขาวหรือดำ ไฟล์ไม่ได้เปลี่ยน มีแต่การแสดงผลที่เปลี่ยน ลองเปิด PNG เดียวกันในแอปออกแบบ แท็บเบราว์เซอร์ที่มีหน้าสีเข้ม หรือสไลด์ที่เติมสีเข้ม ถ้ากล่องสีขาวหายไป ก็หยุดตรงนี้ได้เลย
ไฟล์ไม่มีอัลฟาแชนเนล JPG ที่เปลี่ยนชื่อเป็น .png ภาพแคปหน้าจอของภาพโปร่งใส หรือไฟล์ที่ผ่านแอปส่งข้อความหรือ CMS ที่เข้ารหัสใหม่ ล้วนดูทึบแสงเพราะมันเป็นอย่างนั้นจริง ๆ ให้ตรวจโหมดของภาพ ใน Photoshop แผง Channels ควรมีรายการ Alpha channel อยู่ในนั้น บน Windows Properties > Details จะแสดงความลึกบิต 32 สำหรับ PNG แบบ RGBA ไม่ใช่ 24 ใน Python Image.open("file.png").mode จะคืนค่า RGBA ถ้าอัลฟาหายไป ให้กลับไปที่ไฟล์ต้นฉบับแบบเลเยอร์แล้วส่งออกใหม่
ขอบแข็งหรือมีขอบสีเหลือ เส้นรอบนอกที่เป็นขั้นบันไดบ่งชี้ว่าความโปร่งใสเป็นแบบ 1 บิต ส่วนขอบสีซีดหรือขอบสีบ่งชี้ว่าพิกเซลขอบยังพกสีพื้นหลังเดิมอยู่ การทดสอบกับผนังสีแดงของเราแสดงให้เห็นว่ามันเกิดขึ้นได้อย่างไร เมื่อเสื้อเชิ้ตสีขาวอยู่กับผนังสีแดงสด พิกเซลขอบกึ่งโปร่งใส 69% เอนไปทางสีแดง และบนพื้นหลังใหม่แถบนั้นอ่านได้ว่าเป็นขอบสีเหลือ วิธีแก้คือส่งออกใหม่ด้วยอัลฟา 8 บิตและไม่ตั้งสีรองพื้น และสำหรับภาพตัดพื้นหลัง ให้ถ่ายบนฉากหลังกลาง ๆ ตั้งแต่ต้น หรือย่อมาสก์เข้ามาหนึ่งพิกเซล
ลายตารางหมากรุกถูกฝังอยู่ในภาพ ลองย่อขยายภาพ ถ้าสี่เหลี่ยมสีเทา-ขาวโตและหดตามภาพ นั่นคือพิกเซลจริง ภาพตัวอย่างจากเว็บสต็อกมักส่งมาแบบนี้ ให้ดาวน์โหลดไฟล์จริง หรือตัดพื้นหลังออกใหม่อีกครั้ง
คำถามที่พบบ่อย
อัลฟาแชนเนลเหมือนกับเลเยอร์มาสก์ไหม?
ทั้งสองเป็นญาติกัน ความช่วยเหลือของ Photoshop ระบุว่าอัลฟาแชนเนลคือส่วนที่เลือกซึ่งเก็บเป็นมาสก์โทนเทาที่แก้ไขได้ในแผง Channels และเลเยอร์มาสก์ก็ทำงานแบบเดียวกันภายในโปรแกรมแก้ไข ความต่างอยู่ที่อะไรอยู่รอดหลังการส่งออก เลเยอร์มาสก์เป็นเครื่องมือแก้ไขที่อยู่ในไฟล์ PSD ส่วนอัลฟาแชนเนลที่เขียนลงใน PNG หรือ WebP คือผลลัพธ์ที่แบนแล้วของทุกมาสก์ และเป็นความโปร่งใสที่แอปอื่นอ่านจริง
อัลฟาแชนเนล 8 บิตมีระดับความโปร่งใสกี่ระดับ?
256 ระดับ ตั้งแต่ 0 (โปร่งใสสนิท) ถึง 255 (ทึบแสงสนิท) อัลฟาแชนเนล 16 บิต ซึ่ง PNG รองรับด้วย มี 65,536 ระดับ ส่วน GIF มีสองระดับ คือวาดหรือข้าม
เติมอัลฟาแชนเนลให้ JPG ได้ไหม?
ไม่ได้ ตราบใดที่มันยังเป็น JPG เพราะฟอร์แมตนี้ไม่มีที่เก็บ ให้เปิดไฟล์ แยกวัตถุออกจากพื้นหลัง แล้วบันทึกผลลัพธ์เป็น PNG หรือ WebP เครื่องมือตัดพื้นหลังบนเบราว์เซอร์บน Atlas Cloud ทำการแปลงให้ในขั้นตอนเดียว JPG เข้า PNG โปร่งใสออก ใช้ฟรีและไม่ต้องเข้าสู่ระบบ
ความโปร่งใสของ WebP ใช้ได้กับทุกเบราว์เซอร์ไหม?
เบราว์เซอร์หลักเวอร์ชันปัจจุบันแสดงผล WebP ที่มีอัลฟาได้ และตารางความเข้ากันได้ของ MDN สำหรับฟอร์แมตนี้คือที่ที่ควรใช้ยืนยันการรองรับสำหรับเวอร์ชันเก่าที่คุณยังต้องรองรับอยู่ หากผู้ใช้รุ่นเก่ายังสำคัญ ให้เสิร์ฟ PNG เป็นตัวสำรองผ่านองค์ประกอบ picture
ทำไม PNG โปร่งใสของฉันถึงมีขอบเรืองแสงสีขาว?
พิกเซลริมขอบโปร่งใสบางส่วน และค่าสีของมันยังพกพื้นหลังที่มันถูกตัดออกมา กับต้นฉบับสีขาว แถบนั้นจะดูเหมือนขอบเรืองแสงสีขาวทันทีที่คุณวางภาพตัดพื้นหลังบนอะไรที่มืด ให้ส่งออกใหม่ด้วยอัลฟา 8 บิตและตั้งค่า matte เป็น none หรือย่อส่วนที่เลือกเข้ามาหนึ่งพิกเซลก่อนบันทึก
สรุป
ความโปร่งใสคือตัวเลข ทุกพิกเซลใน PNG หรือ WebP แบบ RGBA พกค่าอัลฟาตั้งแต่ 0 ถึง 255 และเมื่อเข้าใจจุดนี้ ฟอร์แมตอื่น ๆ ก็เรียงตัวเข้าที่เอง GIF มีธงเปิด-ปิดเพียงค่าเดียว JPG ไม่มีอะไรเลย และ SVG ก็ไม่มีฉากหลังให้ตัดออกตั้งแต่แรก ภาพตัดพื้นหลังเจ็ดภาพที่เราวัดได้นั้น ขอบแอนติแอลิเอสทั้งหมดอยู่ในแถบ 0.7% ถึง 2.2% ของภาพ ซึ่งเป็นส่วนที่ฟอร์แมต 1 บิตทิ้งไปพอดี
ถ้าคุณเข้ามาถามว่าอัลฟาแชนเนลคืออะไรเพราะไฟล์ไม่ยอมโปร่งใส ให้ตรวจโปรแกรมดูภาพก่อน แล้วจึงตรวจโหมดของไฟล์ แล้วจึงตรวจขอบ และถ้าคุณต้องการอัลฟาแชนเนลที่สะอาดโดยไม่ต้องเปิดโปรแกรมแก้ไข ตัวตัดพื้นหลังบนเบราว์เซอร์จะมอบให้คุณใน PNG ไฟล์เดียว ที่ขนาดพิกเซลเท่ากับตอนเริ่มต้น
