ทำไมรูปของคุณถึงตะแคงข้างหลังอัปโหลด

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

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

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

กล้องบันทึกภาพตามที่เซนเซอร์มองเห็น

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

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

โปรแกรมบางตัวเคารพแฟล็กนี้ บางตัวเมินมันทิ้ง

เบราว์เซอร์ยุคใหม่อ่านมันแน่นอน คุณสมบัติ CSS image-orientation มีค่าเริ่มต้นเป็น from-image และ MDN ก็เขียนไว้ตรง ๆ ว่า "ข้อมูล EXIF ที่อยู่ในภาพจะถูกใช้เพื่อหมุนภาพอย่างเหมาะสม" ซึ่งใช้งานได้ข้ามเบราว์เซอร์มาตั้งแต่เดือนเมษายน 2020

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

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

การกดหมุนในแกลเลอรีอาจแค่เขียนแฟล็กใหม่เท่านั้น

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

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

แอปจะเดินไปทางไหนนั้น ดูจากตัวปุ่มไม่ออกเลย และแอปตัวเดียวกันก็เคยเปลี่ยนพฤติกรรมระหว่างเวอร์ชันมาแล้ว อย่าเดาอะไรทั้งนั้น ให้ไปตรวจที่ไฟล์ผลลัพธ์

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

วิธีดูว่าไฟล์ของคุณอยู่ในสถานะไหน

เรื่องนี้ตัดสินด้วยการเพ่งให้หนักขึ้นไม่ได้ ตัดสินได้ด้วยการไปตรวจอะไรบางอย่างที่ไม่ใช่ภาพพรีวิวเท่านั้น

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

จัดการเรื่องทิศทางให้จบ ก่อนที่อย่างอื่นจะได้แตะไฟล์

remover.bg รับไฟล์ PNG, JPEG และ WebP ขนาดไม่เกิน 25 MB แล้วส่งไฟล์ใหม่ที่พื้นหลังหายไปแล้วกลับมาให้ มันคือเครื่องมือลบพื้นหลัง ไม่ใช่โปรแกรมแก้ไขรูปภาพ การหมุนรูปจึงเป็นหน้าที่ของโปรแกรมแก้ไขรูปในมือถือหรือโปรแกรมออกแบบของคุณ ก่อน ที่คุณจะอัปโหลด

ลำดับนี้สำคัญ เพราะคุณกำลังสร้างไฟล์ใหม่ขึ้นมา ทั้ง PNG และคอนเทนเนอร์ของ WebP ต่างก็มีที่ทางให้ใส่ Exif ได้ — สเปก WebP ของ Google อนุญาตให้เก็บเมทาดาทาไว้ "ใน 'EXIF' หรือ 'XMP ' Chunks" — แต่โปรแกรมที่คุณใช้หมุนรูปจะเขียนอะไรลงไปในไฟล์ที่ส่งออกหรือไม่ เป็นการตัดสินใจของโปรแกรมนั้น ไม่ใช่ของคุณ ถ้าฝังการหมุนติดเข้าไปในพิกเซลเสียเลย ก็ไม่เหลือแฟล็กอะไรให้หายอีก บันทึกของเราเรื่องการส่งออก WebP โดยไม่ต้องแปลงไฟล์ก่อน ครอบคลุมรูปแบบไฟล์นั้นไว้แล้ว

ลำดับการทำงานที่ใช้ได้จริง:

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

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

นิสัยที่คุ้มค่าจะสร้างไว้

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