ไวยากรณ์รูปภาพ

รูปภาพเป็นองค์ประกอบสำคัญด้านภาพของเอกสาร Markdown มีไวยากรณ์ที่เรียบง่ายในการแทรกและจัดการรูปภาพ

ไวยากรณ์พื้นฐานของรูปภาพ

รูปภาพแบบอินไลน์

ใช้รูปแบบ ![ข้อความทดแทน](ลิงก์รูปภาพ):

![Markdown Logo](https://www.markdownlang.com/markdown-logo.png)

รูปภาพพร้อมชื่อเรื่อง (title)

เพิ่มชื่อเรื่องแบบเลือกได้:

![Markdown Logo](https://www.markdownlang.com/markdown-logo.png "ตรา Markdown อย่างเป็นทางการ")

เมื่อเลื่อนเมาส์เหนือรูป จะเห็นข้อความชื่อเรื่อง

รูปภาพแบบอ้างอิง

แบบอ้างอิงพื้นฐาน

![ข้อความทดแทน][ref-img]

[ref-img]: https://www.markdownlang.com/image.jpg "ชื่อเรื่อง (ไม่บังคับ)"

แบบอ้างอิงอย่างย่อ

เมื่อคีย์อ้างอิงตรงกับข้อความทดแทน:

![Markdown Logo][]

[Markdown Logo]: https://www.markdownlang.com/markdown-logo.png

ประเภทของพาธรูปภาพ

URL แบบสัมบูรณ์

![รูปจากเว็บ](https://www.markdownlang.com/images/photo.jpg)

พาธสัมพัทธ์

![รูปในโฟลเดอร์ปัจจุบัน](./images/photo.jpg)
![รูปในโฟลเดอร์บน](../images/photo.jpg)
![รูปชื่อเดียวกัน](photo.jpg)

พาธสัมบูรณ์จากรากไซต์

![รูปจากรากไซต์](/images/photo.jpg)

ฟีเจอร์ขั้นสูงของรูปภาพ

รูปภาพที่เป็นลิงก์

หุ้มรูปภาพด้วยลิงก์:

[![คำอธิบายรูป](image.jpg)](https://www.markdownlang.com)

ผลลัพธ์: คลิกรูปเพื่อไปยังลิงก์ที่กำหนด

ใช้ HTML ควบคุมรูปภาพ

กำหนดขนาด

<img src="image.jpg" alt="คำอธิบาย" width="300" height="200">

จัดแนวรูปภาพ

<!-- จัดกึ่งกลาง -->
<div align="center">
  <img src="image.jpg" alt="รูปกึ่งกลาง" width="400">
  
</div>

<!-- จัดชิดขวา -->
<div align="right">
  <img src="image.jpg" alt="รูปชิดขวา" width="300">
</div>

รูปภาพตอบสนอง (Responsive)

<img src="image.jpg" alt="รูปตอบสนอง" style="max-width: 100%; height: auto;">

การจัดรูปภาพหลายรูป

วางรูปเรียงข้างกัน

<img src="img1.jpg" width="45%"> <img src="img2.jpg" width="45%">

ตารางรูปภาพ (Grid)

<table>
  <tr>
    <td><img src="img1.jpg" width="200"></td>
    <td><img src="img2.jpg" width="200"></td>
  </tr>
  <tr>
    <td><img src="img3.jpg" width="200"></td>
    <td><img src="img4.jpg" width="200"></td>
  </tr>
</table>

จัดรูปภาพล้อมข้อความ

<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">

นี่คือย่อหน้าข้อความ โดยรูปอยู่ด้านซ้ายและข้อความล้อมรอบ เหมาะสำหรับโปรไฟล์ส่วนตัวหรือคำอธิบายผลิตภัณฑ์

<div style="clear: both;"></div>

แนวปฏิบัติสำหรับข้อความทดแทน (alt)

ข้อความเชิงพรรณนา

✅ แนะนำ: อธิบายเนื้อหาของรูป
![ผู้ใช้กำลังพิมพ์โค้ดบนแล็ปท็อปในสภาพแวดล้อมทำงาน](workspace.jpg)

❌ ไม่แนะนำ: คำทั่วไปที่ไร้ความหมาย
![รูปภาพ](workspace.jpg)
![คลิกที่นี่](workspace.jpg)

รูปภาพเชิงหน้าที่

✅ แนะนำ: อธิบายวัตถุประสงค์ของรูป
![ปุ่มค้นหา](search-icon.png)
![ลิงก์ไปยังคลัง GitHub](github-logo.png)

❌ ไม่แนะนำ: ซ้ำกับข้อความรอบข้าง
คลิก ![คลิก](search-icon.png) เพื่อค้นหา

รูปภาพตกแต่ง

✅ แนะนำ: ใช้ alt ว่างสำหรับรูปตกแต่ง
![](decorative-border.png)

❌ ไม่แนะนำ: คำอธิบายที่ไม่จำเป็น
![ลายกรอบตกแต่ง](decorative-border.png)

รูปแบบไฟล์ที่พบบ่อย

รูปแบบที่เป็นมิตรต่อเว็บ

รูปแบบ	การใช้งาน	คุณลักษณะ
JPEG	รูปถ่าย/ภาพซับซ้อน	ไฟล์เล็ก บีบอัดแบบสูญเสีย
PNG	ไอคอน/พื้นหลังโปร่งใส	บีบอัดแบบไม่สูญเสีย รองรับความโปร่งใส
WebP	รูปภาพเว็บสมัยใหม่	ไฟล์เล็ก คุณภาพดี
SVG	เวกเตอร์/ไอคอน	ย่อ-ขยายได้ ไฟล์เล็ก
GIF	ภาพเคลื่อนไหวง่าย	รองรับแอนิเมชัน สีจำกัด

คำแนะนำการเลือกใช้

✅ แนวทางที่ดี:
![ภาพถ่าย](photo.jpg)           ← JPEG เหมาะกับภาพถ่าย
![ไอคอน](icon.png)              ← PNG เหมาะกับไอคอน
![เวกเตอร์](logo.svg)           ← SVG เหมาะกับเวกเตอร์
![ภาพเคลื่อนไหว](animation.gif) ← GIF เหมาะกับแอนิเมชันเรียบง่าย

❌ ไม่แนะนำ:
![ไอคอน](icon.jpg)              ← JPEG ไม่เหมาะกับไอคอน
![ภาพถ่าย](photo.png)           ← PNG จะมีขนาดไฟล์ใหญ่

เทคนิคเพิ่มประสิทธิภาพรูปภาพ

ลดขนาดไฟล์

1. เลือกระดับความละเอียดที่เหมาะสม

   <!-- แนะนำสำหรับเว็บ -->
   <img src="image.jpg" width="800" alt="คำอธิบาย">  ← ภาพ 2x สำหรับจอความละเอียดสูง

2. ใช้การบีบอัดที่เหมาะสม

   <!-- JPEG คุณภาพ 70-80% โดยประมาณ -->
   ![ภาพถ่ายที่ผ่านการปรับแต่ง](optimized-photo.jpg)

3. โหลดแบบขี้เกียจ (Lazy load)

   <img src="image.jpg" alt="คำอธิบาย" loading="lazy">

ใช้ CDN/ที่ฝากรูป

<!-- CDN ช่วยเร่งความเร็ว -->
![ภาพจาก CDN](https://cdn.example.com/images/photo.jpg)

<!-- บริการฝากรูป -->
![ภาพจากที่ฝากรูป](https://img.example.com/upload/photo.jpg)

ข้อผิดพลาดที่พบบ่อยและแนวทางแก้ไข

1. พาธผิด

❌ ผิด:
![รูป](images/photo.jpg)    ← พาธไม่ถูกต้อง

✅ ถูกต้อง:
![รูป](./images/photo.jpg)  ← ตรวจสอบพาธไฟล์
![รูป](/assets/photo.jpg)   ← ใช้พาธสัมพัทธ์ที่ถูกต้อง

2. ขาดข้อความทดแทนที่สำคัญ

❌ ผิด:
![](important-chart.jpg)     ← รูปสำคัญแต่ไม่มีคำอธิบาย

✅ ถูกต้อง:
![กราฟเปรียบเทียบยอดขายไตรมาส 2023](important-chart.jpg)

3. ควบคุมขนาดไม่เหมาะสม

❌ ปัญหา: รูปใหญ่เกินไป
![รูปใหญ่](huge-image.jpg)   ← อาจทำลายเลย์เอาต์

✅ วิธีแก้:
<img src="huge-image.jpg" alt="รูปใหญ่" style="max-width: 100%;">

4. ไวยากรณ์รูปภาพแบบลิงก์ผิด

❌ ผิด:
[![รูป](image.jpg)(https://www.markdownlang.com)  ← ไวยากรณ์ผิด

✅ ถูกต้อง:
[![รูป](image.jpg)](https://www.markdownlang.com)

สถานการณ์การใช้งานจริง

1. เอกสารเทคนิค

## ขั้นตอนติดตั้ง

1. ดาวน์โหลดแพ็กเกจติดตั้ง

   ![หน้าดาวน์โหลด](download-page.png)

2. เรียกใช้โปรแกรมติดตั้ง

   ![ตัวช่วยติดตั้ง](installer-wizard.png)

3. เสร็จสิ้นการติดตั้ง

   ![ติดตั้งสำเร็จ](installation-complete.png)

2. โชว์เคสผลิตภัณฑ์

## คุณสมบัติของผลิตภัณฑ์

### อินเทอร์เฟซสมัยใหม่

<div align="center">
  <img src="ui-screenshot.png" alt="ภาพหน้าจอ UI" width="600">
  <p><em>ส่วนติดต่อผู้ใช้ที่เรียบง่ายและใช้งานง่าย</em></p>
  
</div>

### รองรับหลายแพลตฟอร์ม

<table>
  <tr>
    <td align="center">
      <img src="windows-logo.png" width="60"><br>
      <strong>Windows</strong>
    </td>
    <td align="center">
      <img src="mac-logo.png" width="60"><br>
      <strong>macOS</strong>
    </td>
    <td align="center">
      <img src="linux-logo.png" width="60"><br>
      <strong>Linux</strong>
    </td>
  </tr>
  
</table>

3. ประวัติส่วนตัว

## เกี่ยวกับฉัน

<img src="avatar.jpg" align="right" width="150" style="margin-left: 20px; border-radius: 50%;">

สวัสดี! ฉันเป็นนักพัฒนาสาย Full Stack ที่เชี่ยวชาญเทคโนโลยีเว็บสมัยใหม่ มีประสบการณ์มากกว่า 5 ปี และคุ้นเคยกับหลายภาษา/เฟรมเวิร์ก

### ทักษะ

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)

<div style="clear: both;"></div>

4. บทเรียนแนะนำ

## ตั้งค่าโปรแกรมแก้ไขโค้ด

ทำตามขั้นตอนต่อไปนี้เพื่อตั้งค่าสภาพแวดล้อมของคุณ:

1. **เปิดการตั้งค่า**

   ![เมนูตั้งค่า VS Code](vscode-settings-1.png)

2. **ค้นหารายการตั้งค่า**

   ![ค้นหาการตั้งค่า](vscode-settings-2.png)

3. **แก้ไขค่า**

   ![ปรับค่าการตั้งค่า](vscode-settings-3.png)

> 💡 **คำแนะนำ**: รีสตาร์ทโปรแกรมแก้ไขหลังการตั้งค่าเพื่อให้มีผล

การเข้าถึง (Accessibility)

เขียนข้อความทดแทนที่มีความหมาย

✅ แนะนำ: คำอธิบายที่ให้ข้อมูล
![กราฟแท่งรายได้ไตรมาส 3 ปี 2023 เพิ่มขึ้น 15% พร้อมลูกศรสีแดงชี้ขึ้น](revenue-chart-q3.png)

❌ ไม่แนะนำ: คำที่ซ้ำซ้อน
![กราฟ](revenue-chart-q3.png)

คำอธิบายแบบโครงสร้าง

![รูปถ่ายทีม: แถวหน้า (ซ้ายไปขวา) Zhang San, Li Si, Wang Wu; แถวหลัง (ซ้ายไปขวา) Zhao Liu, Sun Qi, Zhou Ba](team-photo.jpg)

เอาต์พุต HTML

การแปลงรูปภาพใน Markdown เป็น HTML:

![ข้อความทดแทน](image.jpg "ชื่อรูปภาพ")

แปลงเป็น:

<img src="image.jpg" alt="ข้อความทดแทน" title="ชื่อรูปภาพ">

รูปภาพแบบอ้างอิง:

![ข้อความทดแทน][ref]

[ref]: image.jpg "ชื่อเรื่อง"

แปลงเป็น:

<img src="image.jpg" alt="ข้อความทดแทน" title="ชื่อเรื่อง">

ไวยากรณ์ที่เกี่ยวข้อง

• ไวยากรณ์ลิงก์ - สร้างลิงก์
• HTML ขั้นสูง - ฝัง HTML
• โค้ดแบบรั้ว - เน้นโค้ด

แบบฝึกหัด

ลองสร้างสิ่งต่อไปนี้:

1. หน้าสินค้าพรีเซนต์ที่มีรูปหลายภาพ
2. บทเรียนเชิงเทคนิคพร้อมภาพหน้าจอประกอบ
3. หน้าแนะนำทีมพร้อมรูปสมาชิก
4. รูปเปรียบเทียบที่แสดงแนวโน้มข้อมูล

เครื่องมือแนะนำ

โปรแกรมแก้ไขรูปภาพ

• ออนไลน์: Canva, Figma, Photopea
• เดสก์ท็อป: GIMP, Paint.NET, Adobe Photoshop
• เครื่องมือจับภาพหน้าจอ: Snipaste, Lightshot, เครื่องมือในระบบ

เครื่องมือเพิ่มประสิทธิภาพรูปภาพ

• บีบอัด: TinyPNG, ImageOptim, Squoosh
• แปลงรูปแบบ: CloudConvert, Online-Convert
• ประมวลผลเป็นชุด: ImageMagick, XnConvert

บริการฝากรูป

• ฟรี: GitHub, Gitee, sm.ms
• เสียค่าใช้จ่าย: Qiniu, Alibaba Cloud OSS, Tencent COS
• CDN: jsDelivr, Cloudflare, AWS CloudFront