กลับสู่บล็อก
คู่มือ

2026 Markdown ใส่รูปยังไง Cheat Sheet ฉบับสมบูรณ์: GitHub, Notion, HackMD, Obsidian ครบใน 4 แพลตฟอร์ม

เผยแพร่เมื่อ6 min read
แชร์

ขี้เกียจอ่านยาว สรุป 3 ประโยค

  1. Markdown พื้นฐานใช้ syntax ![alt text](image URL) ทุกแพลตฟอร์มรองรับ
  2. การปรับขนาดรูป แต่ละแพลตฟอร์มคนละทาง จุดนี้คือกับดักใหญ่
  3. URL รูปต้องเป็น "direct link ที่เข้าถึงสาธารณะได้" ใช้ Google Drive share link ไม่ได้

เอาล่ะ มาดู cheat sheet เต็ม ๆ กัน

Syntax พื้นฐาน: ใช้ได้ทุกแพลตฟอร์ม

![alt text](https://example.com/image.png)
  • alt text: ข้อความที่แสดงเมื่อรูปโหลดไม่ขึ้น และ screen reader อ่าน
  • image URL: URL ของไฟล์รูปโดยตรง (direct link)

เพิ่ม title (hover แล้วเห็น)

![alt text](https://example.com/image.png "Title เมื่อ hover")

Reference syntax (ใช้รูปเดียวหลายครั้ง)

![alt text][logo]

[logo]: https://example.com/image.png "Title"

การปรับขนาดรูปในแต่ละแพลตฟอร์ม

จุดที่เจ็บที่สุด ทดสอบ 5 แพลตฟอร์มหลัก ทุกเจ้าทำคนละแบบ

แพลตฟอร์ม Syntax ปรับขนาด ตัวอย่าง
GitHub ไม่รองรับใน Markdown ต้องใช้ HTML <img src="url" width="300">
HackMD ต่อท้าย URL ด้วย =wxh ![alt](url =300x200)
Notion ลากปรับใน UI ไม่มี syntax อัปแล้วลากขอบรูป
Obsidian ใส่ ` wหรือ
Typora ใช้ HTML หรือ zoom <img src="url" style="zoom:50%">

GitHub

GitHub Markdown renderer ไม่รองรับ syntax ปรับขนาดรูปใด ๆ ทางเดียวคือใช้ HTML

<img src="https://example.com/image.png" width="400" alt="Description">

GitHub รองรับ <img> attribute: width, height, align แต่ไม่รองรับ style (filter ออกเพื่อ security)

HackMD

HackMD ใช้ custom extension ต่อท้าย URL ด้วย =wxh

![Description](https://example.com/image.png =300x200)

ระบุแค่ width ให้ height auto

![Description](https://example.com/image.png =300x)

Syntax นี้เฉพาะ HackMD แพลตฟอร์มอื่นไม่ทำงาน

Obsidian

Obsidian ปรับขนาดใน alt text

![Description|300](https://example.com/image.png)
![Description|300x200](https://example.com/image.png)

Obsidian รองรับ Wiki-style internal image link

![[image.png|300]]

Notion

Notion รองรับ Markdown import syntax พื้นฐาน แต่การปรับขนาดทำได้แค่ใน UI ด้วยเมาส์ ไม่มี syntax control

ต้องรู้ว่า Notion อัปรูป external ขึ้น CDN ของตัวเอง (prod-files-secure.s3.us-west-2.amazonaws.com) ดังนั้น source ของรูปไม่ส่งผลต่อความเร็วแสดง แต่ก็แปลว่าถ้าอัปเดตรูปต้นฉบับใน hosting Notion จะไม่เปลี่ยนตาม

Blockdit

Blockdit รองรับ Markdown พื้นฐาน syntax ![alt](url) ใช้ได้ ปรับขนาดต้องใช้ UI เหมือน Notion

การรองรับแหล่งรูปในแต่ละแพลตฟอร์ม

ไม่ใช่ทุก URL รูปจะแสดงในทุกแพลตฟอร์ม ผลทดสอบ

แหล่งรูป GitHub HackMD Notion Obsidian Typora
image hosting direct (lpic.cc, ImgBB) ใช้ได้ ใช้ได้ ใช้ได้ ใช้ได้ ใช้ได้
รูปใน GitHub repo ใช้ได้ ใช้ได้ ใช้ได้ ตั้งค่า ใช้ได้
Google Drive share link ไม่แสดง ไม่แสดง auto re-upload ไม่เสถียร ไม่แสดง
Dropbox share link ไม่แสดง ไม่แสดง auto re-upload ไม่เสถียร ไม่แสดง
Base64 inline รองรับ รองรับ ไม่รองรับ รองรับ รองรับ

ประเด็นสำคัญ: Google Drive และ Dropbox share link ไม่ใช่ direct image link แพลตฟอร์ม Markdown ส่วนใหญ่ render ไม่ถูก ถ้าจะฝังรูปใน Markdown ต้องใช้ image hosting ที่ให้ direct link

Hotlinking Policy: รูปคุณจะโดนบล็อกไหม

Hotlinking = การอ้างอิงรูปจากเซิร์ฟเวอร์คนอื่นในเว็บของตัวเอง บางบริการบล็อกเพื่อประหยัด bandwidth

บริการ อนุญาต Hotlink หมายเหตุ
image hosting (lpic.cc, ImgBB) อนุญาต เป็น core feature ของ image hosting
GitHub repo อนุญาต (มีข้อจำกัด) traffic สูงอาจโดน rate limit
Imgur บางส่วน hotlink ได้ แต่ TH IP เข้าถึงช้าบางครั้ง
WordPress.com ไม่ ตรวจ Referer
รูปในเว็บทั่วไป ไม่ ส่วนใหญ่บล็อก

Best Practice สำหรับ Technical Writing

เขียน technical doc หรือบล็อก หลักการจัดการรูป

Alt text ห้ามขี้เกียจ

<!-- ไม่ผ่าน -->
![image](url)
![screenshot](url)

<!-- ผ่าน -->
![หน้าตั้งค่า GitHub Actions workflow](url)
![Terminal แสดง output npm install สำเร็จ](url)

หน้าที่ของ alt text

  1. แสดงเป็น text ถ้ารูปโหลดไม่ขึ้น
  2. screen reader อ่าน (accessibility)
  3. search engine ใช้เข้าใจเนื้อหา (SEO)

ตั้งชื่อไฟล์รูป

<!-- ไม่ผ่าน -->
Screenshot 2026-03-15 at 14.32.05.png
IMG_4521.jpg

<!-- ผ่าน -->
github-actions-workflow-config.png
npm-install-success-output.png

ชื่อที่ดีทำให้ 6 เดือนผ่านไปยังดูออกว่ารูปนี้คืออะไร

เลือกฟอร์แมตให้เหมาะ

  • screenshot, UI: PNG (ตัวอักษรคม)
  • รูปถ่าย complex image: WebP หรือ JPEG (ไฟล์เล็กกว่า)
  • icon, logo, chart: SVG (scale ไม่พัง)
  • แสดงขั้นตอนใช้งานแบบเคลื่อนไหว: GIF หรือ WebP animation (ใต้ 5 MB)

บีบอัดก่อนอัป

ไม่ว่าฟอร์แมตไหน บีบอัดก่อนอัปเสมอ

  1. Squoosh (squoosh.app) — Google สร้าง ทำในเบราว์เซอร์
  2. TinyPNG (tinypng.com) — batch บีบ PNG/JPEG
  3. ImageOptim (macOS) — ลากไฟล์เข้า บีบให้เลย

เทคนิคเขียน Markdown ข้ามแพลตฟอร์ม

ถ้า document ของคุณต้องแสดงในหลายแพลตฟอร์ม ใช้กลยุทธ์นี้

  1. Syntax: ใช้ ![alt](url) มาตรฐาน ไม่ใช้ syntax เฉพาะของแพลตฟอร์ม
  2. ขนาดรูป: ปรับขนาดก่อนอัป (กว้าง 600-800px) ไม่พึ่ง syntax
  3. แหล่งรูป: ใช้ image hosting direct link เช่น lpic.cc ที่อัปได้โดยไม่ต้องสมัคร + ได้ direct link — หลีกเลี่ยง Google Drive และ Dropbox share link
  4. ฟอร์แมต: PNG หรือ WebP เลี่ยง BMP และ TIFF

ต้องแจ้งว่าตอนนี้ lpic.cc ไม่รองรับ custom image size หรือ on-the-fly transform ต้องปรับรูปให้เรียบร้อยก่อนอัป ถ้าต้องการ API batch upload หรือ dynamic processing ให้พิจารณา Cloudinary หรือ Imgur API

เคสใช้จริงของผู้เขียนไทย

บล็อกเกอร์สาย tech บน Blockdit

ถ้าเขียนบล็อก tech บน Blockdit หรือ dev.to ใช้ image hosting ภายนอก + Markdown syntax จะสบาย ย้ายข้ามแพลตฟอร์มได้ทันที

เขียน README ของ open-source project

โครงการ open-source ไทยบน GitHub ส่วนใหญ่แนะนำเก็บรูปใน docs/images/ ของ repo เพื่อให้ README ไม่พึ่ง external service ถ้าอยากใช้ external เลือก CDN ที่อายุยาว (เลี่ยง image hosting ที่อาจปิดบริการ)

Documentation ภายในบริษัท

ถ้าเขียน internal doc ใน Notion แล้วต้อง export เป็น Markdown ไปวางใน GitHub Wiki — ระวัง Notion จะเก็บ image ไว้ที่ S3 ของตัวเอง ต้องอัปซ้ำด้วยมือ

สอนวิชาการใน HackMD (นักศึกษาไทย)

นักศึกษาไทยใช้ HackMD เยอะ โดยเฉพาะสายวิทย์-คอม ใช้ HackMD syntax =300x สำหรับ slide และ note แต่ถ้าส่งออกไป GitHub Wiki syntax นี้พัง เตรียมใจก่อน

สาย content creator ใช้ Obsidian + publish

คนที่ใช้ Obsidian จด note ส่วนตัวแล้ว publish ไปเว็บ — Obsidian Publish handle image paths ให้ แต่ถ้า self-host ด้วย Quartz หรือ Dendron ต้องอัปรูปขึ้น hosting เอง

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

Q1: Markdown จัดรูปให้อยู่กลางได้ไหม

Markdown มาตรฐานไม่รองรับการ align รูป ใน GitHub ใช้ HTML: <p align="center"><img src="url" width="400"></p> HackMD รองรับ {:center} syntax Notion และ Obsidian ปรับผ่าน UI

Q2: Markdown ใช้รูปในเครื่องได้ไหม

ได้ ใช้ relative path: ![alt](./images/photo.png) ใช้ได้ใน local editor (Typora, Obsidian, VS Code) แต่ถ้าจะ publish ออนไลน์ ต้องอัปรูปขึ้น image hosting เพื่อให้ได้ public URL

Q3: ทำไมรูปผมไม่ขึ้นใน GitHub README

3 สาเหตุพบบ่อย (1) URL ของรูปไม่ใช่ direct link ต้อง login ถึงเห็น (2) เซิร์ฟเวอร์ต้นทางบล็อก GitHub hotlinking (3) relative path ผิด ไม่ตรงตำแหน่งใน repo

Q4: HackMD syntax =300x ใช้ในแพลตฟอร์มอื่นได้ไหม

ไม่ได้ =wxh เป็น custom Markdown extension ของ HackMD แพลตฟอร์มอื่นไม่ทำงาน ถ้า document ต้องใช้ข้ามแพลตฟอร์ม ปรับขนาดรูปก่อนอัปหรือใช้ HTML <img> (GitHub รองรับ HackMD ก็รองรับ)

Q5: Direct link กับ share link ต่างกันยังไง

Direct link = URL ชี้ไฟล์รูปโดยตรง จบด้วย .jpg, .png, .webp เปิดใน browser เห็นรูปอย่างเดียว Share link = URL ของหน้าเว็บ เปิดแล้วเห็นหน้าที่ embed รูปด้วย (เช่น Google Drive preview page) Markdown ต้องการ direct link เท่านั้น

Q6: Blockdit รองรับ Markdown image syntax ไหม

รองรับพื้นฐาน ![alt](url) แต่การปรับขนาดต้องใช้ UI ถ้าเขียนข้ามแพลตฟอร์ม (Medium, Blockdit, Dev.to) syntax พื้นฐานครอบได้ ไม่ต้องแก้

Q7: ใช้ image hosting ฟรีสำหรับ document ระยะยาวดีไหม

คิดให้ดี image hosting ฟรีอาจปิดได้ (เช่น Imgur ลบรูป anonymous ปี 2023) สำหรับ document ที่ต้องอยู่ยาว เช่น README ของ project ใหญ่ แนะนำ (1) เก็บใน repo เอง (2) ใช้ cloud storage ของตัวเอง (S3, R2) (3) ถ้าจะใช้ image hosting ฟรี เลือกเจ้าที่มีประวัติยาว + เก็บ backup ต้นฉบับไว้ใน local เสมอ

แหล่งอ้างอิง

#Markdown#GitHub#Notion#HackMD#image syntax#technical writing
M

เขียนโดย

Mia Huang

ผู้เชี่ยวชาญด้านประสิทธิภาพ

คู่มือฉบับย่อและเพิ่มผลผลิต