Softonic

ตัวสร้างรูปภาพ Markdown

ขั้นตอน 1 / 3
ถัดไป

ไวยากรณ์รูปภาพของ Markdown, ![alt](src "title"), เขียนผิดได้ง่าย เช่น พลาดวงเล็บ ลืมข้อความ alt หรือสับสนกับไวยากรณ์ลิงก์ แล้วเอกสารของคุณจะแสดงตัวยึดตำแหน่งที่เสียหาย ตัวสร้างนี้รับ URL รูปภาพ ข้อความ alt title ที่เลือกได้ และปลายทางลิงก์ที่เลือกได้ แล้วสร้าง Markdown ทั้งแบบ inline และ reference-style เพื่อให้คุณวางแบบที่เหมาะกับเอกสารของคุณได้

วิธีสร้างไวยากรณ์รูปภาพ Markdown

  1. 1

    วาง URL รูปภาพ

    URL แบบสมบูรณ์ (https://...) หรือเส้นทางสัมพัทธ์ (/images/hero.png)

  2. 2

    เขียนข้อความ alt

    สิ่งที่รูปภาพแสดง โดยสรุปในหนึ่งประโยค จำเป็นเพื่อการเข้าถึง

  3. 3

    เพิ่ม title (ไม่บังคับ)

    แสดงเมื่อวางเมาส์เหนือรูปในตัวเรนเดอร์ส่วนใหญ่

  4. 4

    ห่อด้วยลิงก์ (ไม่บังคับ)

    ระบุ URL เพื่อทำให้รูปภาพคลิกได้

  5. 5

    คัดลอกสนิปเพต

    รับเอาต์พุตแบบ inline `![alt](src)` หรือ reference-style `![alt][ref]`

สี่รูปแบบไวยากรณ์

Inline ไม่มี title:

![ภาพหลักของสินค้า](/images/hero.png)

Inline พร้อม title:

![ภาพหลัก](/images/hero.png "ภาพหลักถ่ายเมื่อเดือนตุลาคม 2026")

รูปภาพที่คลิกได้ (รูปภาพห่อในลิงก์):

[![ภาพหลัก](/images/hero.png)](https://example.com/buy)

Reference-style (เก็บ URL ยาวให้พ้นจากย่อหน้า):

![ภาพหลัก][hero]

[hero]: /images/hero.png "ภาพหลักถ่ายเมื่อเดือนตุลาคม 2026"

ข้อความ alt สำคัญ

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

ข้อความ alt ที่ดีและไม่ดี

เจตนา alt ที่ดี alt ที่ไม่ดี
ภาพถ่ายสินค้า “แก้วเซรามิกสีแดงบนโต๊ะไม้ หูจับอยู่ด้านซ้าย” “รูปภาพแก้ว”
ภาพหน้าจอ “หน้าเข้าสู่ระบบพร้อมช่องอีเมล รหัสผ่าน และปุ่ม SSO” “screenshot.png”
ตกแต่ง "" (alt ว่างสำหรับการตกแต่งล้วน) “รูปภาพตกแต่ง”
อินโฟกราฟิก “แผนภูมิแท่ง: รายได้เพิ่มจาก 1 ล้านบาทในปี 2023 เป็น 3 ล้านบาทในปี 2026” “แผนภูมิแท่ง”

ข้อควรระวัง

  • อย่าขึ้นต้น alt ด้วย “รูปภาพของ”, โปรแกรมอ่านหน้าจอประกาศว่าเป็นรูปภาพอยู่แล้ว
  • เส้นทางสมบูรณ์เทียบกับสัมพัทธ์ เส้นทางสัมพัทธ์จะใช้ไม่ได้เมื่อเอกสารถูกเรนเดอร์นอกโฟลเดอร์ของมัน (เช่น บนหน้าตัวอย่างของ GitHub) เมื่อไม่แน่ใจให้ใช้เส้นทางสมบูรณ์
  • ช่องว่างใน URL ต้องเข้ารหัส URL: ใช้ %20 แทนช่องว่าง มิฉะนั้นรูปภาพจะไม่โหลด

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

ไม่ได้ใน Markdown ธรรมดา ตัวเรนเดอร์ส่วนใหญ่ (GFM, Docusaurus, MkDocs) จะถอยไปใช้ HTML ดิบสำหรับการกำหนดขนาด, <img src="..." width="400" alt="..."> บางสำเนียงรองรับ ![alt](url =400x) แต่ไม่เป็นสากล

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

เมื่อรูปภาพปรากฏหลายครั้ง หรือเมื่อ URL ยาวและทำให้ย่อหน้ารก reference-style ช่วยให้เนื้อความอ่านง่ายและทำให้การเปลี่ยน URL แก้ไขเพียงจุดเดียว

ใช่, การซ้อนรูปภาพไว้ในลิงก์ ([![alt](img)](url)) เป็น CommonMark มาตรฐาน เอาต์พุตที่เรนเดอร์คือไฮเปอร์ลิงก์ที่ห่อ <img>

เครื่องมือที่เกี่ยวข้อง

ตารางอ้างอิง ASCII

ตาราง ASCII ครบตั้งแต่ 0 ถึง 127 พร้อมค่าเลขฐานสิบ ฐานสิบหก ฐานแปด ฐานสอง และรูปแบบการอ้างอิงอักขระแบบตัวเลขของ HTML รวม NUL, LF และ DEL

อ้างอิงตัวอักษร HTML

รายการที่สามารถค้นหาได้ขององค์ประกอบ HTML พร้อมรหัสชื่อและรหัสตัวเลข รวมถึงฟังก์ชันสำเนาด้วยคลิกเดียวสำหรับตัวอักษรพิเศษและสัญลักษณ์ต่างๆ

ตารางอ้างอิงแป้นพิมพ์ลัด

ค้นหาแป้นพิมพ์ลัดเริ่มต้นตามเอกสารของ VS Code, Chrome และ Bash ที่ใช้ GNU Readline บน macOS, Windows และ Linux

ตัวตรวจสอบอีเมล

ตรวจสอบที่อยู่อีเมล: ตรวจไวยากรณ์ RFC 5322 ค้นหา MX เรกคอร์ดแบบเรียลไทม์ พร้อมรายละเอียดส่วนท้องถิ่น โดเมน และความยาว ไม่มีการส่งอีเมลใด ๆ

เครื่องมือสร้าง EditorConfig

สร้างไฟล์ .editorconfig จากกฎการเยื้อง การจบบรรทัด และชุดอักขระของคุณ แล้วเพิ่มเซกชันที่ถูกต้องให้ทุกภาษาในรีโพซิทอรี ทั้ง Python, Go, YAML, Makefile และอื่น ๆ

ตัวลดรูปพีชคณิตบูลีน

ประเมินนิพจน์บูลีนสำหรับทุกชุดอินพุตและดูตารางค่าความจริงที่สมบูรณ์ รองรับตัวแปรสูงสุดห้าตัวและตัวดำเนินการ &, |, !, ^

เครื่องมือนี้มีให้บริการในภาษาอื่น