ภาพ scenario สำหรับ blog และบทความเทคนิค

Engineering blog, Medium / Substack, GitHub README และ technical newsletter เกี่ยวกับ autonomous driving, self-driving และ ADAS มักต้องการภาพ scenario ที่สะอาด: ทางแยกที่อธิบาย, corner case ที่เดินผ่าน, lane configuration ที่โค้ดให้เหตุผลเกี่ยวกับ drawtonomy เหมาะสมสำหรับ ภาพเหล่านั้น พร้อมรูปแบบ output ที่ tune สำหรับเว็บ

สิ่งที่ภาพ blog และบทความต้องการ

ข้อจำกัดต่างจาก paper figure

• Embeddable ภาพต้องใส่ใน Markdown / MDX / Notion / Ghost / Substack โดยไม่ต้องแปลง
• Light / dark mode safe engineering blog หลายแห่ง render ทั้งสองโหมด ภาพควรอ่านได้ในทั้งสอง
• ขนาดไฟล์เล็ก ภาพ raster 4 MB ทำให้ page-load และ SEO แย่ลง SVG หรือ PNG ที่บีบอัดเป็นค่าเริ่มต้นที่ถูกต้อง
• Social-card friendly เมื่อ post ถูกแชร์ใน Twitter / LinkedIn / Hacker News OG image มักเป็นภาพ aspect ratio และความอ่านง่ายในขนาดเล็กสำคัญ
• แก้ไขได้ Blogger อัปเดต post ภาพต้องแก้ไขได้ทีหลังโดยไม่ต้องวาดใหม่

เวิร์กโฟลว์ที่แนะนำ

1. เลือก scenario ฉากเดียว ประเด็นเดียว อย่าพยายามแสดง pipeline ทั้งหมดในภาพเดียว
2. Sketch บน drawtonomy.com ถนน เลน ทางแยก ยานพาหนะ คนเดินเท้า path label ข้อความ
3. Style สำหรับทั้ง light และ dark mode ยึดสีที่รอดบน #fff และ #1a1a1a หลีกเลี่ยง stroke ขาวล้วน (ไม่มองเห็นใน light) และ stroke ดำล้วน (ไม่มองเห็นใน dark) Mid-grey stroke ทำงานได้ดีทั้งสอง
4. ตั้ง canvas crop จัดตำแหน่งภาพให้ส่วนที่เกี่ยวข้องมากที่สุดอยู่ตรงกลาง ถ้าจะใช้ภาพเดียวเป็น OG card ให้ frame ที่ประมาณ 1200 × 630
5. บันทึกเป็น .drawtonomy.svg นี่คือ source ที่แก้ไขได้
6. ส่งออก asset ที่จะใช้จริง จาก scene เดิม .png ที่ 1200 × 630 สำหรับ OG card และ flat SVG สำหรับเนื้อหา post

ขนาดและ resolution

สำหรับ SVG ไม่สำคัญ ภาพ scale ตาม layout สำหรับ PNG ขนาดที่มีประโยชน์

การใช้งาน	ขนาด
Inline blog figure (full-width)	1600 × 900
Inline blog figure (half-width)	800 × 450
OG / social card	1200 × 630
Twitter card	1200 × 600
LinkedIn share image	1200 × 627
GitHub README hero	1200 × 600

ตัวอย่างการ embed

ใน Markdown / MDX:

![Cut-in scenario: ego ที่ 90 km/h ยานพาหนะที่ cut-in ที่ +20 km/h](./cut-in.svg)

ใน HTML พร้อม dark-mode variant:

<picture>
  <source media="(prefers-color-scheme: dark)" srcset="./cut-in-dark.svg">
  <img src="./cut-in.svg" alt="Cut-in scenario: ego ที่ 90 km/h ยานพาหนะที่ cut-in ที่ +20 km/h">
</picture>

เคล็ดลับ style สำหรับ technical post

• หนึ่ง scenario ต่อภาพ ถ้าเดิน reader ผ่านสามกรณี วาดสามภาพ
• Annotation บนภาพ label สั้น เช่น (“TTC = 2.5 s”) ที่ embed ในภาพประหยัดสายตา reader คำอธิบายยาวไปในข้อความรอบ ๆ
• Ego style ที่สม่ำเสมอทั้งซีรีย์ ถ้า post เป็นส่วนหนึ่งของซีรีย์ เลือกสี ego หนึ่งสีและรักษาไว้ทุกภาพ

สิ่งที่นี่ไม่ใช่

• ภาพ photorealistic drawtonomy เป็น top-down 2D อย่างเคร่งครัด
• Animation drawtonomy ส่งออกภาพ static สำหรับ scenario explainer ที่ animated ส่งออกภาพ static และ animate แยก หรือใช้ OpenSCENARIO export กับ esmini

อ่านเพิ่มเติม

• ภาพสำหรับ paper ขับขี่อัตโนมัติ
• Slide สำหรับ design review