รูปภาพและภาพถ่าย · โปรแกรมแก้ไขรูปภาพและภาพวาดของเบราว์เซอร์
กราฟิกแรสเตอร์และเวกเตอร์: เหตุใดภาพวาดบนภาพถ่ายจึงกลายเป็นพิกเซล
· พื้นหลัง
การแก้ไขภาพ ผ้าใบ การประมวลผลเบราว์เซอร์
ภาพแรสเตอร์เป็นตารางพิกเซล กราฟิกแบบเวกเตอร์เป็นคำแนะนำในการวาดรูปทรง โพสต์นี้อธิบายความแตกต่าง เหตุใดภาพถ่ายจึงเป็นได้แต่แรสเตอร์ และเหตุใดสิ่งที่คุณวาดลงบนภาพถ่ายจึงได้รับชะตากรรมเดียวกันในการส่งออก
โลโก้ที่พร่ามัวและภาพถ่ายที่ไม่สามารถ 'สร้างเวกเตอร์' ได้ ทำให้เกิดความสับสนในชีวิตประจำวันสองครั้งพร้อมคำอธิบายเพียงข้อเดียว
โลโก้ที่ไม่ชัดเจนและรูปถ่ายที่มีคำอธิบายประกอบมักถูกตำหนิว่าเป็นปัญหาเดียวกัน แต่เริ่มต้นจากวัสดุที่แตกต่างกัน โลโก้เวกเตอร์คือชุดคำสั่งสำหรับเส้นทาง เส้นขีด และการเติม ภาพถ่ายคือขอบเขตจำกัดของสีตัวอย่าง โปรแกรมแก้ไขเปิดภาพถ่ายเป็นบิตแมปแรสเตอร์ขนาดแคนวาส ดังนั้นโลกการทำงานของมันจึงมีตารางพิกเซลอยู่แล้วก่อนที่จะวาดเส้นหรือสี่เหลี่ยมผืนผ้า
วาดกล่องเหนือรูปภาพ ส่งออก และซูมเข้าที่ขอบ ผลลัพธ์ที่ได้คือภาพแรสเตอร์ที่มีคำอธิบายประกอบครอบคลุมพิกเซลข้างๆ ภาพถ่าย เปรียบเทียบไฟล์นั้นกับ SVG ต้นฉบับด้วยขนาดการแสดงผลที่ใหญ่ขึ้น และความแตกต่างจะมองเห็นได้: การขยายการส่งออกจะสุ่มตัวอย่างตารางใหม่ ในขณะที่การขยาย SVG จะคำนวณเส้นทางใหม่ โปรแกรมแก้ไขนี้ไม่เปลี่ยนวัตถุแรกเป็นวัตถุที่สอง
แรสเตอร์: ตารางของเซลล์สี — PNG, JPEG และ WebP จัดเก็บรูปภาพอย่างไร และเหตุใดการขยายขนาดจึงประดิษฐ์พิกเซล
ภาพแรสเตอร์จะบันทึกสีที่ตำแหน่งในตาราง PNG, JPEG และ WebP การเข้ารหัสและการบีบอัดต่างกัน แต่รูปภาพที่ส่งออกยังคงแปลงเป็นพิกเซลเมื่อแสดง ขอบเขตหนึ่งพิกเซล เส้นโค้งไร้นามแฝง และคำอธิบายภาพเล็กๆ ล้วนเป็นตัวอย่างที่มีขอบเขตจำกัดในภาพสุดท้าย การปรับขนาดไฟล์ขึ้นด้านบนจะขอให้กระบวนการแก้ไขประเมินตัวอย่างเพิ่มเติม ไม่สามารถกู้คืนคำสั่งการวาดต้นฉบับได้
ข้อจำกัดดังกล่าวมีความสำคัญเมื่อคำอธิบายประกอบต้องคงความคมชัดในหลายๆ ขนาด คำอธิบายภาพหน้าจอที่มีไว้สำหรับจอแสดงผลแบบตายตัวเดียวสามารถนำไปใช้ในการส่งออกแรสเตอร์ได้ทุกประการ ในขณะที่เครื่องหมายแบรนด์ที่กำหนดไว้สำหรับป้าย การพิมพ์ และอินเทอร์เฟซต่างๆ โดยปกติควรจะยังคงเป็นเนื้อหาเวกเตอร์ ใช้โปรแกรมแก้ไขสำหรับภาพคอมโพสิต ไม่ใช้แทนอาร์ตเวิร์กต้นฉบับที่ต้องปรับขนาดอย่างอิสระ
เวกเตอร์: รูปร่างที่อธิบายในทางคณิตศาสตร์ — เส้นทาง เส้นขีด และการเติมในรูปแบบ เช่น SVG และเหตุใดจึงขยายขนาดโดยไม่สูญเสีย
เวกเตอร์อธิบายรูปทรงเรขาคณิตแทนที่จะจัดเก็บทุกพิกเซลที่แสดง เส้นทาง SVG สามารถระบุเส้นโค้ง ความกว้างของเส้นขีด การเติม และการแปลง ตัวแสดงผลจะคำนวณพิกเซลให้เหมาะสมกับขนาดปัจจุบัน นั่นคือเหตุผลว่าทำไมเครื่องหมายธรรมดาๆ เดียวกันจึงสามารถรักษาความสะอาดได้เมื่อวางไว้ในหลายมิติ คำอธิบายเป็นพื้นหลังระดับรูปแบบ ไม่ใช่การอ้างว่าตัวแก้ไขนี้ปล่อยหรือรักษาคำแนะนำดังกล่าว
ตัวแก้ไขเบราว์เซอร์ใช้ข้อมูลเรขาคณิตชั่วคราวสำหรับท่าทางเส้นและรูปร่าง ซึ่งช่วยให้การแสดงตัวอย่างเป็นไปตามตัวชี้ก่อนที่จะเผยแพร่ เมื่อท่าทางเสร็จสิ้น ผลลัพธ์จะถูกวาดเป็นเลเยอร์แรสเตอร์ ส่งออกคอมโพสิตเลเยอร์ที่มองเห็นได้และเรียก canvas.toBlob สำหรับ PNG, JPEG หรือ WebP ไม่มีการส่งออก SVG หรือเอกสารโครงการเวกเตอร์ในเส้นทางนี้ ดังนั้นเรขาคณิตจึงไม่คงอยู่ในฐานะวัตถุอิสระ
เหตุใดภาพถ่ายจึงเป็นแรสเตอร์โดยธรรมชาติ เซ็นเซอร์จะจับตัวอย่าง ไม่ใช่รูปร่าง และไม่มีการเปลี่ยนแปลงการแปลงใดๆ
ภาพถ่ายเป็นวัสดุแรสเตอร์เนื่องจากกล้องจะบันทึกตัวอย่างแสงผ่านเซ็นเซอร์และจัดเก็บตัวอย่างเหล่านั้นเป็นข้อมูลภาพ การอธิบายภาพถ่ายว่าเป็นเวกเตอร์ จำเป็นต้องมีการตีความโดยแทนที่พื้นผิว จุดรบกวน การแรเงา และรายละเอียดที่ไม่ปกติด้วยรูปทรงที่ประดิษฐ์ขึ้น การขยายขนาดหรือส่งออกให้แตกต่างออกไปอาจทำให้ตารางเปลี่ยนแปลงได้ แต่การดำเนินการทั้งสองอย่างจะไม่เปลี่ยนแปลงประเภทของข้อมูลที่มีอยู่ในการบันทึกต้นฉบับ
ความแตกต่างนี้ยังอธิบายด้วยว่าเหตุใดภาพถ่ายและโลโก้จึงสามารถอยู่ร่วมกันได้ในการแก้ไขครั้งเดียวโดยไม่กลายเป็นสิ่งเดียวกัน โลโก้อาจเริ่มต้นเป็นเวกเตอร์ที่อื่น แต่หลังจากที่วาดลงบนภาพถ่ายแรสเตอร์ในโปรแกรมแก้ไขนี้ ผลลัพธ์ที่รวมกันจะเป็นตารางพิกเซล เก็บโลโก้ต้นฉบับไว้แยกกันเมื่อมีการใช้ซ้ำในอนาคต และถือว่าการส่งออกเบราว์เซอร์เป็นภาพที่เสร็จสมบูรณ์สำหรับวัตถุประสงค์ปัจจุบัน
การวาดภาพบนแรสเตอร์: สิ่งที่เครื่องมือแก้ไขทำ คำอธิบายประกอบอาจเป็นรูปร่างในขณะที่คุณแก้ไข แต่ภาพที่ส่งออกจะเป็นตารางเดียว
ในระหว่างการใช้ท่าทาง เครื่องมือเส้นและรูปร่างอาจทำงานเหมือนกับคำแนะนำทางเรขาคณิตแบบกะทัดรัด: ตัวแก้ไขทราบจุดเริ่มต้น จุดสิ้นสุด โครงร่าง และการแสดงตัวอย่างปัจจุบัน เมื่อเผยแพร่ คำแนะนำเหล่านั้นจะแสดงผลเป็นเลเยอร์แรสเตอร์ เครื่องหมายพู่กันเป็นการลงสีแรสเตอร์ในขณะที่ถูกสร้างขึ้น และข้อความจะถูกแรสเตอร์ตามตำแหน่ง แทนที่จะคงไว้เป็นวัตถุข้อความที่เคลื่อนย้ายได้ เซสชันจึงมอบความสะดวกสบายโดยไม่ต้องสัญญาว่าจะสามารถแก้ไขได้ในระดับออบเจ็กต์ในภายหลัง
การส่งออกทำให้ขอบเขตชัดเจน เลเยอร์แรสเตอร์ที่มองเห็นจะถูกรวมเข้าด้วยกันเป็นแคนวาสเดียว จากนั้นเข้ารหัสเป็น PNG, JPEG หรือ WebP ผ่านทางเบราว์เซอร์ การเปิดไฟล์นั้นอีกครั้งจะทำให้คุณได้รูปถ่ายและทำเครื่องหมายเป็นพิกเซลธรรมดา ไม่ได้ให้สี่เหลี่ยมผืนผ้าที่เลือกได้ เส้นทางที่ใช้ซ้ำได้ หรือคำอธิบายภาพที่แก้ไขได้แก่ผู้รับ เก็บเซสชันแบบเลเยอร์หรือเนื้อหาต้นฉบับไว้ หากคุณอาจจำเป็นต้องเปลี่ยนคำอธิบายประกอบ แทนที่จะแชร์รูปภาพเพียงอย่างเดียว
การเลือกประเภทที่เหมาะสมสำหรับงาน — เมื่อใดที่ควรขอโลโก้เวกเตอร์ และเมื่อใดที่การส่งออกแรสเตอร์คือสิ่งที่คุณต้องการ
เลือกเนื้อหาเวกเตอร์เมื่อเครื่องหมายต้องเคลื่อนที่: โลโก้ต้องมีหลายขนาด อาจมีการแก้ไขไดอะแกรม หรือต้องวางสัญลักษณ์บนพื้นหลังหลายแบบ เลือกการส่งออกแรสเตอร์เมื่อเป้าหมายคือภาพหน้าจอที่พร้อมแชร์ หลักฐานที่มีคำบรรยายภาพ หรือภาพถ่ายที่มีบันทึกย่อที่มองเห็นได้ การตัดสินใจที่ถูกต้องเป็นผลจากการใช้ครั้งต่อไป ไม่ใช่จากความเชื่อที่ว่ารูปแบบใดรูปแบบหนึ่งจะดีกว่าเสมอ
Browser Image & Drawing Editor เหมาะกับหมวดหมู่ที่สอง โดยสามารถวางเครื่องหมายข้อความแบบพู่กัน เส้น สี่เหลี่ยมผืนผ้า วงรี และแรสเตอร์บนรูปภาพ จากนั้นส่งออกคอมโพสิตเป็นไฟล์แรสเตอร์ ไม่สามารถส่งออก SVG หรือรักษาโมเดลวัตถุเวกเตอร์ได้ หากลูกค้าขอโลโก้เป็นเนื้อหาอิสระ ให้กลับไปยังแหล่งเวกเตอร์ดั้งเดิม แทนที่จะแยกเวอร์ชันที่ใหญ่กว่าออกจากพิกเซลที่แก้ไข
ประเด็นสำคัญ: รู้ว่าคุณถืออันไหน — Browser Image & Drawing Editor แก้ไขภาพแรสเตอร์และส่งออกภาพแรสเตอร์อย่างไร โดยการออกแบบ
แบบจำลองทางจิตที่เชื่อถือได้นั้นเรียบง่าย: ผู้แก้ไขอาจใช้รูปทรงเรขาคณิตเพื่ออธิบายท่าทาง แต่เอกสารและการส่งออกนั้นเป็นภาพแรสเตอร์ ทุกเลเยอร์ภาพถ่ายและเครื่องมือแก้ไขที่เปิดอยู่จะมีตารางพิกเซลที่จำกัด การขยายตารางนั้นจะสุ่มตัวอย่างข้อมูลที่มีอยู่อีกครั้ง และส่งออกคอมโพสิตเลเยอร์ที่มองเห็นไปยังแรสเตอร์อื่น ไม่มีขั้นตอนใดในเวิร์กโฟลว์นี้ที่สร้างเส้นทางเวกเตอร์ที่สามารถนำมาใช้ซ้ำได้จากเส้นที่กลายเป็นพิกเซลแล้ว
ตรวจสอบประเภทไฟล์และผู้รับที่ต้องการก่อนวาด หากผู้รับต้องการดูภาพที่เสร็จแล้ว ให้ส่งออกแรสเตอร์และตรวจสอบขอบตามขนาดที่แสดงจริง หากผู้รับจำเป็นต้องแก้ไขเครื่องหมาย เปลี่ยนสีโลโก้ หรือปรับขนาดอาร์ตเวิร์กซ้ำๆ ให้จัดหาเวกเตอร์หรือแหล่งที่มาแบบเลเยอร์ที่เหมาะสม ความแตกต่างดังกล่าวจะป้องกันไม่ให้เกิดความผิดพลาดในการส่งออกที่ถูกต้องทางเทคนิคว่าเป็นการส่งมอบประเภทอื่น