รูปสินค้าเบลอหลังอัปโหลด: พิกเซลหายไปตรงไหน

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

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

รูปสินค้าเบลอหลังอัปโหลด: แปดขั้นตอนตามลำดับ

#	ขั้นตอน	เกิดอะไรกับไฟล์ของคุณ	สิ่งที่เสียไป	คุมได้ไหม
1	การถ่าย	การสั่น โฟกัสพลาด การเลี้ยวเบนของแสงที่รูรับแสงแคบมาก	รายละเอียดจริง กู้คืนภายหลังไม่ได้	ได้
2	ย่อขนาดตอนส่งออก	ย่อลงสู่ขนาดพิกเซลเป้าหมายโดยไม่ชาร์ปตอนส่งออก	ไมโครคอนทราสต์ที่ขอบ หัวลูกศร และตัวหนังสือเล็ก	ได้
3	การเข้ารหัส JPEG ของคุณ	ค่าคุณภาพบวกกับ chroma subsampling ตัดรายละเอียดสีทิ้ง	เส้นสีบาง ๆ ตัวเลขบอกขนาดสีแดงและน้ำเงิน	ได้
4	แพลตฟอร์มรับไฟล์	มาร์เก็ตเพลสถอดรหัส JPEG ของคุณแล้วเข้ารหัสใหม่ด้วยค่าของตัวเอง	การเสียคุณภาพจากการเข้ารหัสซ้ำ ขอบเรืองรอบเส้นคม	ไม่ได้
5	เพดานพิกเซล	แพลตฟอร์มเก็บที่ด้านยาวสูงสุดของตัวเอง	ทุกอย่างที่เกินเพดาน หายถาวร	ได้เฉพาะผ่านการเลือกขนาดส่งออกให้ถูก
6	ขนาดที่แตกออกมา	หน้าเว็บเรียกสำเนาขนาดภาพย่อ ไม่ใช่ไฟล์ต้นฉบับของคุณ	รายละเอียดตามสัดส่วนการย่อ	ได้บางส่วน ผ่านการเลือกช่องแสดงผล
7	อัตราส่วนพิกเซลของอุปกรณ์	จอมือถือ 3x ต้องการพิกเซลภาพสามพิกเซลต่อหนึ่งพิกเซล CSS	ความคมที่รับรู้ได้หายไปสองในสามบนจอความละเอียดสูง	ได้บางส่วน
8	การส่งมอบ	ตัวแทนภาพระหว่างโหลด การตั้งค่าธีม ภาพสำรองตอนเน็ตช้า	เบลอชั่วคราวหรือค้างตอนแสดงผลครั้งแรก	ได้บางส่วน

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

ขั้นที่ 3: chroma subsampling คือเหตุผลที่ลูกศรบอกขนาดสีแดงตายก่อนเพื่อน

Chroma subsampling คือทางลัดของการเข้ารหัส JPEG ที่เก็บความสว่างไว้เต็มความละเอียด แต่เก็บสีไว้เพียงเศษส่วน ในโหมด 4:2:0 ที่ใช้กันทั่วไปคือหนึ่งค่าสีต่อทุกบล็อกพิกเซลขนาด 2x2 รายละเอียดความสว่างรอด ส่วนรายละเอียดสีถูกหั่นเหลือหนึ่งในสี่ตั้งแต่ก่อนไฟล์จะออกจากเครื่องคุณ

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

ทางแก้ไม่ใช่การดันแถบคุณภาพให้สูงขึ้น ทางแก้คือทำให้เส้นบอกขนาดชนะด้วยความสว่างแทนที่จะชนะด้วยสี:

เส้นเข้มบนพื้นอ่อน หรือเส้นอ่อนบนพื้นเข้ม ใช้คอนทราสต์ของความสว่าง ไม่ใช่ของเฉดสี
ใส่ขอบบางหรือเงาตัดให้เส้น เพื่อให้ขอบรอดจากการเฉลี่ยสีแบบ 2x2
รักษาความหนาของตัวหนังสือบอกขนาดไว้อย่างน้อย 2 พิกเซลที่ขนาดซึ่งส่งมอบจริง ไม่ใช่ที่ขนาดไฟล์ต้นฉบับ
เลี่ยงตัวหนังสือสีแดงหรือน้ำเงินสดวางบนสินค้าโทนกลาง สองเฉดนี้พังก่อนใคร

ขั้นที่ 4: การเข้ารหัสซ้ำที่ไม่มีใครเห็น

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

คุณปิดมันไม่ได้ แต่คุณหยุดป้อนวัตถุดิบที่เสียหายให้มันได้:

เก็บไฟล์ต้นฉบับแบบไม่สูญเสีย (PNG, TIFF หรือไฟล์เลเยอร์ต้นทาง) อย่าแก้ไฟล์ JPEG ที่ส่งออกแล้วเซฟทับเด็ดขาด
ส่งออกครั้งเดียวจากไฟล์ต้นฉบับ ที่ขนาดพิกเซลสุดท้าย ทุกครั้งที่เซฟเป็น JPEG ระหว่างทางคือหนึ่งเจเนอเรชันที่คุณต้องจ่าย
อย่าบีบอัดล่วงหน้าเพื่อให้ได้ขนาดไฟล์ตามเป้า ในเมื่อเพดานของแพลตฟอร์มจัดการเรื่องนี้อยู่แล้ว

กฎที่ตามมาจากขั้น 3 และ 4 คือ จำนวนครั้งที่รูปในประกาศขายถูกเข้ารหัสเป็น JPEG สำคัญกว่าค่าคุณภาพของการเข้ารหัสครั้งใดครั้งหนึ่ง

ขั้นที่ 5: พื้นพิกเซลที่ทำให้ซูมยังทำงาน

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

แพลตฟอร์ม	ขั้นต่ำที่รับ	เกณฑ์เปิดซูม	เพดาน
Amazon	500 พิกเซลด้านยาว	ขั้นต่ำ 1,000 พิกเซล; 1,600 พิกเซลขึ้นไปเพื่อประสบการณ์ซูมที่ดีที่สุด	10,000 พิกเซลด้านยาว
eBay	500 พิกเซลด้านยาว	1,600 พิกเซลด้านยาว	12 MB ต่อรูป
Shopify	ไม่ประกาศขั้นต่ำ	ใหญ่กว่า 800 x 800 พิกเซล ซูมจึงจะทำงาน	5,000 x 5,000 พิกเซล ไม่เกิน 20 MB; แนะนำ 2,048 x 2,048 พิกเซลสำหรับรูปจัตุรัส

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

ขั้นที่ 7: ภาษี 2 เท่าบนจอความละเอียดสูง

อัตราส่วนพิกเซลของอุปกรณ์คือจำนวนพิกเซลจริงบนจอที่เบราว์เซอร์ใช้ต่อหนึ่งพิกเซล CSS มือถือรุ่นใหม่รายงานค่า 2 หรือ 3 เป็นเรื่องปกติ รูปขนาด 1,000 พิกเซลที่วางลงในช่องขนาด 500 พิกเซล CSS จะดูคมบนโน้ตบุ๊กรุ่นเก่า แต่ดูนุ่มอย่างเห็นได้ชัดบนมือถือ เพราะมือถือขอไป 1,500 พิกเซลแต่ได้มา 1,000

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

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

สิ่งที่ควรเปลี่ยน เรียงตามผลตอบแทน

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

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

การวินิจฉัยใน 60 วินาที

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

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

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

คำถามที่พบบ่อย

ทำไมรูปสินค้าของฉันเบลอหลังอัปโหลดขึ้น Shopify แต่คมบนเครื่องตัวเอง

เพราะเครื่องคุณแสดงไฟล์ต้นฉบับ ส่วนหน้าร้านแสดงไฟล์ที่แตกออกมา Shopify ย่อรูปอัตโนมัติให้พอดีกับจอที่เล็กลง ผู้ซื้อจึงมักได้สำเนาที่ถูกย่อแล้วแทนที่จะเป็นไฟล์ของคุณ Shopify รับรูปได้ถึง 5,000 x 5,000 พิกเซลและ 20 MB แนะนำ 2,048 x 2,048 พิกเซลสำหรับรูปสินค้าจัตุรัส และต้องใหญ่กว่า 800 x 800 พิกเซลซูมจึงจะทำงาน ถ้าไฟล์ที่คุณอัปโหลดต่ำกว่านั้นมาก ไฟล์ที่แตกออกมาทุกขนาดก็เริ่มต้นด้วยรายละเอียดที่น้อยเกินไป

อัปโหลดไฟล์ใหญ่ขึ้นแล้วรูปจะคมขึ้นไหม

คมขึ้นได้เท่าที่ความละเอียดที่คุณถ่ายติดมาจริงเท่านั้น พิกเซลที่มากขึ้นช่วยได้เมื่อเกณฑ์ซูมหรือขนาดที่แตกออกมาของแพลตฟอร์มทำให้การแสดงผลขาดแคลนรายละเอียด เช่น การขยับจาก 800 พิกเซลไปเป็น 1,600 พิกเซลจะเปิดซูมบน Amazon หรือ eBay ส่วนการอัปสเกลรูป 900 พิกเซลไปเป็น 3,000 พิกเซลได้แค่ขนาดไฟล์ ไม่ได้รายละเอียด และมักแถมความนุ่มจากการประมาณค่าพิกเซลมาให้ด้วย

ทำไมตัวหนังสือบอกขนาดในรูปหลักดูปกติ แต่ในภาพย่อของแกลเลอรีกลับเละ

เพราะภาพย่อคือไฟล์ที่แตกออกมาต่างหาก สร้างขึ้นด้วยการย่อขนาด ตัวหนังสือสูง 14 พิกเซลในไฟล์ต้นฉบับ 1,600 พิกเซล จะเหลือสูงราว 4 พิกเซลในภาพย่อ 450 พิกเซล ซึ่งต่ำกว่าขนาดที่รูปทรงตัวอักษรจะรอดจากการย่อใด ๆ กำหนดขนาดตัวหนังสือบอกขนาดโดยเทียบกับช่องที่เล็กที่สุดที่มันจะไปปรากฏ ไม่ใช่เทียบกับไฟล์ต้นฉบับ

ควรอัปโหลด PNG แทน JPEG สำหรับแบบบอกขนาดไหม

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

ทำไมรูปดูแย่กว่าตอนใช้เน็ตมือถือเมื่อเทียบกับ wi-fi

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