ทำไมรูปที่อัปโหลดขึ้นไปถึงดูสีซีดจาง

คุณแต่งภาพสินค้าจนเสร็จ สีแดงตรงกับเสื้อไหมพรมตัวจริงเป๊ะ คุณอัปโหลดมันขึ้นร้านของคุณ — แล้วสีแดงนั้นกลับออกมาเป็นสีอิฐ สีเขียวกลายเป็นเขียวขี้ม้า พอเปิดไฟล์ต้นฉบับบนจอเดียวกัน: ยังสวยเหมือนเดิมทุกอย่าง

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

ทำไมตัวเลขชุดเดียวกันถึงให้สีสองสีที่ต่างกัน

พิกเซลหนึ่งพิกเซลคือตัวเลขสามค่า และ 200, 40, 40 จะเป็นสีแดงเฉพาะเจาะจงสีหนึ่งก็ต่อเมื่อคุณรู้ว่าปริภูมิสีไหนเป็นตัววัดมัน Display P3 ดันแม่สีแดงออกไปไกลกว่า sRGB (x 0.68 เทียบกับ 0.64) ตัวเลขสามค่าชุดเดียวกันจึงอธิบายสีแดงที่เข้มลึกกว่า ส่วน Adobe RGB (1998) คงแม่สีแดงและน้ำเงินของ sRGB ไว้เป๊ะ ๆ แล้วไปยืดแม่สีเขียวแทน ระยะที่มันเอื้อมเพิ่มได้จึงอยู่ในโซนเขียวและไซแอน ไม่ว่าทางไหน ตัวเลขเหล่านั้นก็มีความหมายต่างออกไปสำหรับเบราว์เซอร์ที่ตั้งสมมติฐานว่าเป็น sRGB

โปรไฟล์คือโน้ตที่บอกว่าใช้ไม้บรรทัดอันไหนวัด และเว็บก็ตั้งค่าเริ่มต้นแบบตายตัวเมื่อโน้ตแผ่นนั้นหายไป CSS Color Module Level 4 ระบุไว้ชัดเจนว่า เพื่อความเข้ากันได้ สีที่กำหนดไว้ใน HTML และรูปภาพที่ไม่มีป้ายกำกับ ต้องถูกปฏิบัติเสมือนว่าอยู่ในปริภูมิสี sRGB เว้นแต่จะระบุไว้เป็นอย่างอื่น ไฟล์ไร้ป้ายกำกับที่คุณอัปโหลดขึ้นไปไม่เคยระบุเป็นอย่างอื่น มันจึงเป็น sRGB

ดังนั้นถ้าไฟล์ของคุณถูกส่งออกมาในโหมด Adobe RGB หรือ Display P3 แล้วโปรไฟล์หลุดหายไป — ไปป์ไลน์ที่เข้ารหัสภาพใหม่ ตัวแปลงไฟล์ที่ตัดเมทาดาทาทิ้ง — ตัวเลขขอบเขตสีกว้างเหล่านั้นจะถูกอ่านว่าเป็น sRGB พอถูกบีบให้เข้ากับสมมติฐานที่แคบกว่า มันก็ออกมาอิ่มสีน้อยลง — นั่นแหละคือลุคซีดจางที่คุณเจอ สีไหนจะเจ็บบ้างขึ้นอยู่กับต้นทาง: ไฟล์ Adobe RGB ที่ถูกอ่านผิดเป็น sRGB จะเสียความจัดจ้านในโซนเขียวและไซแอน ส่วนไฟล์ Display P3 จะเสียสีแดงอิ่ม ๆ ไปด้วยอีกทาง สีกลางแทบไม่ขยับเลย: ภาพแพ็กช็อตสีเทาไม่เป็นอะไรสักนิด แต่ชุดว่ายน้ำสีปะการังนี่พังยับ

ยืนยันว่าปัญหาอยู่ที่ไฟล์ ไม่ใช่ที่จอของคุณ

วางไฟล์ต้นฉบับกับไฟล์ที่อัปโหลดไว้เทียบกันในหน้าต่างเบราว์เซอร์เดียวกัน

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

จากนั้นลากไฟล์ต้นฉบับเข้าไปวางในแท็บเบราว์เซอร์ — เบราว์เซอร์เคารพโปรไฟล์ที่ฝังมากับไฟล์ ถ้าไฟล์ในเครื่องถูกต้องแต่ไฟล์ที่อัปโหลดไม่ถูก แปลว่าเส้นทางอัปโหลดทิ้งป้ายกำกับนั้นไป

หาให้เจอว่าไฟล์พกโปรไฟล์อะไรมา

• macOS: เปิดไฟล์ใน Preview แล้วคลิกปุ่ม Info บนแถบเครื่องมือ (หรือกด Command-I) จากนั้นดูที่แท็บ More info ซึ่งจะแสดงโปรไฟล์สีของภาพไว้
• Photoshop: คลิกลูกศรบนแถบสถานะของเอกสาร แล้วเลือก Document Profile
• Lightroom: ช่อง Colour Space ในหน้าต่างส่งออกคือสิ่งที่คุณส่งออกไปจริง ๆ
• อะไรก็ได้ ทุกแพลตฟอร์ม: ExifTool พิมพ์ค่านั้นออกมาให้ — exiftool -ProfileDescription photo.jpg

สำหรับงานเว็บ อะไรก็ตามที่ไม่ใช่ sRGB คือผู้ต้องสงสัยของคุณ iPhone รุ่นหลัง ๆ ถ่ายภาพด้วยสีขอบเขตกว้างและติดป้ายกำกับให้ไฟล์ตามนั้น — Apple ระบุไว้ในสเปกกล้องว่ารองรับ "การถ่ายภาพนิ่งและ Live Photos ด้วยสีขอบเขตกว้าง" โทรศัพท์ Android บางรุ่นก็มีตัวเลือกถ่ายแบบขอบเขตสีกว้างเหมือนกัน ให้เช็กที่ตัวไฟล์

แปลงเป็น sRGB — อย่าตัดป้ายทิ้งหรือกำหนดทับ

สามคำสั่งที่ชื่อฟังดูคล้ายกันทำสิ่งที่ต่างกันมาก

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

Convert คือตัวที่คุณต้องการ: Edit › Convert to Profile ของ Photoshop หรือตั้งค่า Colour Space ในหน้าส่งออกของ Lightroom ให้เป็น sRGB เตรียมใจไว้ว่าสีที่อิ่มที่สุดของคุณจะขยับไปเล็กน้อย

กรณีกลับด้าน: ภาพหน้าจอที่ดูสีจัดเกินไป

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

ทำไมเรื่องนี้ถึงสำคัญตอนคุณเปลี่ยนพื้นหลัง

โปรไฟล์ที่ไม่ตรงกันเลิกเป็นเรื่องเล็กน้อยทันทีเมื่อมาถึงตรงนี้ วางภาพไดคัทลงบนสีประจำแบรนด์ของคุณใน remover.bg แล้วเอาภาพนั้นไปวางบนหน้าเว็บข้าง ๆ บล็อกสีเดียวกันที่กำหนดด้วยค่า hex ใน CSS: สีจาก CSS จะเรนเดอร์เป็น sRGB

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

สีขาวล้วนรอดจากการแปลงมาได้โดยไม่เปลี่ยนอะไร โปรไฟล์ที่ไม่ตรงกันเพียงอย่างเดียวจึงไม่ทำให้การตรวจพื้นหลังขาวของมาร์เก็ตเพลสไม่ผ่าน — สีของตัวสินค้าต่างหากที่เจ็บ และรูปแบบไฟล์ก็ไม่ได้ช่วยชีวิตใคร: ทั้ง PNG, JPEG และ WebP ต่างพกโปรไฟล์ไปด้วยได้ทั้งนั้น และทั้งหมดก็ถูกอ่านผิดเมื่อป้ายกำกับหายไป รวมถึงภาพไดคัทพื้นหลังโปร่งใสด้วย

ก่อนอัปโหลดครั้งถัดไป

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