รูปภาพและภาพถ่าย · โปรแกรมแปลงรูปภาพและคอมเพรสเซอร์
การสุ่มตัวอย่างโครมา: เหตุใด JPEG จึงเบลอข้อความสีแดงและเส้นสีบาง ๆ
· มันทำงานอย่างไร
รูปแบบภาพ เจเพ็ก คุณภาพของภาพ
JPEG และการสูญเสีย WebP เก็บสีไว้ที่ความละเอียดต่ำกว่าความสว่าง ซึ่งมองไม่เห็นในภาพถ่ายและชัดเจนบนข้อความสีแดง โพสต์นี้จะอธิบาย 4:2:0 การสุ่มตัวอย่างย่อย เหตุใดตัวเข้ารหัสจึงทำเช่นนี้ และวิธีการเลือกรูปแบบเมื่อขอบสีมีความสำคัญ
ป้ายสีแดงที่ออกมาคลุมเครือในขณะที่ข้อความสีดำยังคงคมชัด - อาการที่ชี้ตรงไปที่การสุ่มตัวอย่างโครมา
ป้ายสีแดงอาจดูนุ่มนวลกว่าข้อความสีเข้มที่อยู่ติดกัน แม้ว่าทั้งคู่จะเริ่มเป็นเวกเตอร์ที่คมชัดในภาพหน้าจอก็ตาม อาการนั้นคุ้มค่าที่จะตรวจสอบ แต่ไม่ได้ระบุโหมดการสุ่มตัวอย่างโครมาที่แน่นอนโดยตัวมันเอง ToolAcre ถอดรหัสแหล่งที่มา วาดพิกเซลลงบนผืนผ้าใบ และถามเบราว์เซอร์สำหรับ JPEG หรือ WebP ไบต์ ผลลัพธ์ที่ได้คือหลักฐาน ในขณะที่การตัดสินใจส่วนตัวของโปรแกรมเปลี่ยนไฟล์ไม่ใช่
เริ่มต้นด้วยรูปภาพควบคุมที่มีลายเส้นแคบๆ สีแดง น้ำเงิน เทา และดำบนพื้นหลังเดียว รักษาขนาดไว้ไม่เปลี่ยนแปลง ส่งออกแต่ละเป้าหมายหนึ่งครั้ง และตรวจสอบการดาวน์โหลดที่ขนาดพิกเซลดั้งเดิม หากเฉพาะเอาต์พุตที่สูญเสียไปทำให้ขอบเขตอิ่มตัว การเลือกรูปแบบจะเกี่ยวข้องด้วย หากเอาท์พุตทุกรายการอ่อนลง ให้ตรวจสอบก่อนว่ามีการปรับขนาดเกิดขึ้นหรือไม่ เนื่องจากแผนจะจัดประเภทมิติที่เปลี่ยนแปลงเป็นการสุ่มตัวอย่างใหม่
Luma และ Chroma: การแบ่งพิกเซลออกเป็นความสว่างและสี — การแปลง YCbCr และเหตุใดตัวเข้ารหัสจึงแยกทั้งสองออกจากกัน
โครงร่างอธิบายการแปลงลูมาและโครมา แต่ไม่มีโค้ดการแปลงปรากฏในที่เก็บนี้ แอปพลิเคชันจัดเตรียมการถอดรหัส RGBA พิกเซลให้กับตัวเข้ารหัสของเบราว์เซอร์ และไม่เคยได้รับความสว่างหรือระนาบสีแยกกัน ดังนั้นจึงสามารถบันทึกความแตกต่างในทางปฏิบัติได้—เอาต์พุตที่สูญเสียอาจละทิ้งรายละเอียดที่มองเห็นได้—โดยไม่ต้องแสร้งทำเป็นว่าจะแสดงการคำนวณสัมประสิทธิ์ของเบราว์เซอร์หรือการแสดงสีภายใน
ขอบเขตดังกล่าวจะเปลี่ยนวิธีการเขียนรายงานข้อบกพร่อง บันทึกประเภทแหล่งที่มา MIME, เป้าหมายประเภท MIME, คุณภาพ, ขนาดต้นฉบับและผลลัพธ์, เบราว์เซอร์ และการครอบตัดที่แสดงขอบที่ได้รับผลกระทบ อย่าระบุว่าช่องใดช่องหนึ่งถูกลดลงครึ่งหนึ่ง เว้นแต่การตรวจสอบตัวเข้ารหัสจะพิสูจน์ได้ การสังเกตที่แม่นยำสามารถทำซ้ำได้ คำอธิบายที่ยืมมาเกี่ยวกับการตั้งค่าการใช้งานที่ซ่อนอยู่อาจส่งผู้ดูแลไปสู่การควบคุมที่พวกเขาไม่มี
การสูญเสียรายละเอียดสีสามารถสังเกตได้ แต่พื้นที่เก็บข้อมูลนี้ไม่ได้ใช้หรือเปิดเผยการแปลง YCbCr
ป้ายกำกับ 4:4:4, 4:2:2 และ 4:2:0 ที่คุ้นเคยไม่ใช่การควบคุมในอินเทอร์เฟซนี้ `encodeCanvas` ผ่านเฉพาะประเภท MIME และสำหรับ JPEG หรือ WebP ค่าคุณภาพที่ทำให้เป็นมาตรฐาน ทั้งแผงและแผนการแปลงไม่มีฟิลด์การสุ่มตัวอย่างย่อย ส่วนที่เสนอโหมดเหล่านั้นว่าสามารถเลือกได้จะขัดแย้งกับผลิตภัณฑ์ที่จัดส่ง ดังนั้นบทเรียนที่เป็นประโยชน์คือการไม่มีตัวเลือกนั้น
เมื่อจำเป็นต้องมีความเที่ยงตรงของขอบสี ให้เลือกเส้นทางที่คุณสามารถตรวจสอบผลลัพธ์ได้ แทนที่จะใช้โหมดจากแถบเลื่อน PNG คือตัวเข้ารหัสแบบไม่สูญเสียข้อมูลที่มีอยู่ และคงค่าอัลฟ่าไว้เมื่อขนาดคงที่ เอาต์พุต WebP ของ JPEG และ ToolAcre ได้รับการอธิบายอย่างชัดเจนว่าสูญเสียในทุกคุณภาพ ความแตกต่างที่ได้รับการสนับสนุนจากแหล่งที่มานั้นเพียงพอที่จะเลือกตัวเลือกที่ปลอดภัยกว่าสำหรับไดอะแกรมโดยไม่ต้องเผยแพร่เมทริกซ์การสนับสนุนที่ไม่รองรับ
ตัวเข้ารหัสของเบราว์เซอร์เปิดเผยไม่มีตัวเลือก 4:4:4, 4:2:2 หรือ 4:2:0 ตัวเลือก
ภาพถ่ายกระจายรายละเอียดไปตามพื้นผิว แสง และขอบเขตที่ไม่ปกติ ดังนั้นการเปลี่ยนแปลงขอบสีเล็กๆ น้อยๆ จึงอาจมองเห็นได้ชัดเจนน้อยกว่าการเปลี่ยนแปลงตามกฎอินเทอร์เฟซหนึ่งพิกเซล นี่เป็นฮิวริสติกการตรวจสอบ ไม่ใช่การอ้างว่าการมองเห็นของมนุษย์เป็นไปตามอัตราส่วนที่เข้ารหัสใน ToolAcre แอปพลิเคชันไม่ได้คำนวณความคล้ายคลึงกันในการรับรู้ จัดประเภทเนื้อหา หรือรับรองว่าความเสียหายจะไม่ปรากฏแก่ผู้ชม
ใช้วัสดุที่เป็นตัวแทน แนวตั้งเพียงอย่างเดียวถือเป็นการทดสอบที่ไม่ดีสำหรับระบบการออกแบบที่เต็มไปด้วยประเภทสี และแผนภูมิสังเคราะห์เพียงอย่างเดียวก็อาจเป็นพร็อกซีที่ไม่ดีสำหรับไลบรารีรูปภาพ ตัวแปลงจะรายงานขนาดไบต์ที่วัดได้และเสนอการแสดงตัวอย่างก่อนและหลังสำหรับผลลัพธ์แรก แต่การยอมรับควรรวมถึงการเปิดไฟล์ในเค้าโครงจริงด้วย การปรับขนาดตัวอย่างสามารถปกปิดความเสียหายของขอบเขตที่อยู่ระหว่างการตรวจสอบได้อย่างแน่นอน
ภาพถ่ายอาจปกปิดการสูญเสียขอบสีได้ดีกว่ากราฟิก ไม่มีการยืนยันแบบจำลองการมองเห็นที่นี่
กราฟิกเน้นความหมายในช่วงการเปลี่ยนภาพอย่างหนัก: ขีดเส้นใต้คำเตือนสีแดง ชุดสีน้ำเงินในแผนภูมิ หรือข้อความสีบนสีขาว เมื่อตัวอย่างที่อยู่ใกล้เคียงถูกผสมหรือปัดเศษระหว่างการเข้ารหัสที่สูญเสียไป ขอบอาจดูเหมือนมีเลือดออกแม้ว่าตำแหน่งของจะไม่เปลี่ยนแปลงก็ตาม การปรับขนาดจะเพิ่มกลไกอื่นเนื่องจาก `drawImage` วาดแหล่งที่มาใหม่โดยปรับให้เรียบสูงก่อนการเข้ารหัส
แยกกลไกเหล่านั้นออกโดยคงขนาดให้คงที่สำหรับการเปรียบเทียบครั้งแรก หาก PNG ยังคงความคมชัดในขณะที่ JPEG และ WebP อ่อนลง ขั้นตอนการเข้ารหัสที่สูญเสียจะเป็นตัวสร้างความแตกต่าง ทำซ้ำครั้งต่อไปโดยจงใจปรับขนาดเพื่อเรียนรู้ว่าการสุ่มตัวอย่างเพิ่มอะไรบ้าง การทดสอบสองขั้นตอนนี้แข็งแกร่งกว่าการเปลี่ยนแปลงคุณภาพ ขนาด และรูปแบบร่วมกัน เนื่องจากมีการตัดสินใจเพียงครั้งเดียวในแต่ละรอบ
สิ่งที่ตัวเข้ารหัสของเบราว์เซอร์ช่วยให้คุณควบคุมได้ - ตัวเลขคุณภาพแต่ไม่มีการสลับการสุ่มตัวอย่างย่อย และเหตุใด WebP ที่สูญเสียจึงเป็น 4:2:0 เสมอ
ToolAcre ให้ตัวเลขคุณภาพแก่เบราว์เซอร์โดยยึดตั้งแต่ 0.01 ถึง 1 สำหรับ JPEG และ WebP ไม่มีสวิตช์สำหรับการสุ่มตัวอย่างสี แปลงตาราง หรือความพยายามในการเข้ารหัส การกล่าวอ้างของสมุดงานว่า WebP ที่สูญเสียไปนั้นเป็นโหมดการสุ่มตัวอย่างย่อยที่มีชื่อเสมอซึ่งอยู่นอกการใช้งานที่ได้รับการตรวจสอบ ดังนั้นบทความนี้จงใจไม่ทำซ้ำว่าเป็นการรับประกันผลิตภัณฑ์
การตอบสนองในทางปฏิบัติต่อตัวเลือกตัวเข้ารหัสที่ซ่อนอยู่นั้นไม่ใช่การค้นหาช่องทำเครื่องหมายที่ไม่มีเอกสาร เปรียบเทียบผลลัพธ์จริง เก็บแหล่งที่มา และเลือก PNG เมื่อขอบสีที่แน่นอนมีความสำคัญมากกว่าไฟล์ขนาดเล็ก หากไปป์ไลน์การผลิตต้องการโหมดการสุ่มตัวอย่างที่ระบุ ให้ใช้ตัวเข้ารหัสที่มีเอกสาร API เปิดเผย ความสะดวกสบายของผืนผ้าใบ API ไม่สามารถปฏิบัติตามสัญญาที่ไม่เคยยอมรับได้
เครื่องมือผ่านคุณภาพเท่านั้น นโยบายการสุ่มตัวอย่างย่อยของตัวเข้ารหัสยังคงซ่อนอยู่
สร้างแผนภูมิทดสอบ 1200-by-800 โดยมีเส้นทแยงมุมสีแดงและสีน้ำเงินบางๆ ป้ายสีเข้ม การไล่ระดับสีที่เป็นกลางอย่างราบรื่น และมุมโปร่งใสหนึ่งมุม ส่งออกโดยไม่ปรับขนาดเป็น PNG, JPEG และ WebP พื้นที่เก็บข้อมูลไม่สามารถคาดเดาจำนวนไบต์ทั้งหมดหรือส่วนต่างๆ ที่แน่นอนได้ ดังนั้นให้จดบันทึกผลลัพธ์ที่วัดได้ซึ่งแสดงโดยแผงควบคุม แทนที่จะใส่เปอร์เซ็นต์ที่สัญญาไว้ลงในแผนการทดสอบ
ที่ 100 เปอร์เซ็นต์ ให้เปรียบเทียบเส้นสีกับส่วนควบคุมสีเข้ม และตรวจสอบว่ามุมโปร่งใสยังคงอยู่หรือไม่ PNG ควรคงอัลฟ่าไว้ผ่านตัวเข้ารหัสแบบไม่สูญเสียที่รองรับ JPEG ได้รับแมตต์ที่เลือกเนื่องจากไม่สามารถเก็บอัลฟ่าได้ WebP คงอัลฟ่าไว้แต่ยังคงทำเครื่องหมายว่าสูญเสีย ผลลัพธ์ที่มองเห็นได้ทั้งสามประการนี้ทดสอบคุณสมบัติที่แยกจากกัน และหลีกเลี่ยงการถือว่า "เล็กลง" เป็นคำพ้องความหมายสำหรับ "ดีกว่า"
ประเด็นสำคัญ: เลือกรูปแบบตามเนื้อหา — วิธีที่ Image Converter & Compressor ช่วยให้คุณส่งออกรูปภาพเดียวกันกับ PNG เมื่อขอบสีต้องคงความคมชัด
การเลือกรูปแบบไม่สามารถรับประกันได้ว่าแอพพลิเคชันดาวน์สตรีมทุกโปรแกรมจะแสดงผลสี ซูมภาพ หรือปรับขนาดเพื่อแสดงผลอย่างไร ToolAcre ยังไม่เปิดเผยข้อมูลเมตาการสุ่มตัวอย่างย่อยจากเอาต์พุตหรือจัดให้มีการวัดผลต่างพิกเซล การละเว้นเหล่านั้นหมายความว่าการตรวจสอบขั้นสุดท้ายอยู่ในหน้าเป้าหมาย เอกสาร หรือแอปพลิเคชัน แทนที่จะอยู่ในแผงการแปลงเพียงอย่างเดียว
สำหรับข้อความที่มีสีอิ่มตัวและกฎที่มีสีแคบ ให้เริ่มต้นด้วยตัวเลือกที่ไม่มีการสูญเสีย และปรับการแทนที่ที่สูญเสียด้วยการตรวจสอบโดยตรง Image Converter & Compressor ทำให้การเปรียบเทียบนั้นสามารถทำซ้ำได้บนอุปกรณ์เครื่องเดียว: แหล่งที่มาเดียวกัน ขนาดคงที่ รูปแบบเอาต์พุตสามรูปแบบ และไบต์ที่วัดได้ ผลลัพธ์ที่ไม่ใช่หมายเลขตัวเลื่อนที่ใช้ร่วมกันหรือโหมดการสุ่มตัวอย่างย่อยที่สันนิษฐานไว้ ควรตัดสินใจว่าจะส่งอะไร