Cú pháp hình ảnh

Hình ảnh là phần tử trực quan quan trọng trong tài liệu. Markdown cung cấp cú pháp đơn giản để chèn và quản lý hình ảnh.

Cú pháp hình ảnh cơ bản

Hình ảnh nội dòng

Sử dụng định dạng ![Văn bản thay thế](Liên kết hình ảnh):

markdown

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

Hình ảnh có tiêu đề

Thêm thông tin tiêu đề tùy chọn:

markdown

![Markdown Logo](https://www.markdownlang.com/markdown-logo.png "Logo chính thức Markdown")

Khi di chuột qua hình ảnh, văn bản tiêu đề sẽ hiển thị.

Hình ảnh tham chiếu

Tham chiếu cơ bản

markdown

![Văn bản thay thế][Định danh tham chiếu hình ảnh]

[Định danh tham chiếu hình ảnh]: https://www.markdownlang.com/image.jpg "Tiêu đề tùy chọn"

Tham chiếu đơn giản

Khi định danh tham chiếu giống với văn bản thay thế:

markdown

![Markdown Logo][]

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

Loại đường dẫn hình ảnh

URL tuyệt đối

markdown

![Hình ảnh mạng](https://www.markdownlang.com/images/photo.jpg)

Đường dẫn tương đối

markdown

![Hình ảnh cục bộ](./images/photo.jpg)
![Hình ảnh thư mục cha](../images/photo.jpg)
![Hình ảnh cùng cấp](photo.jpg)

Đường dẫn tuyệt đối

markdown

![Hình ảnh thư mục gốc](/images/photo.jpg)

Tính năng hình ảnh nâng cao

Liên kết hình ảnh

Bọc hình ảnh trong liên kết:

markdown

[![Mô tả hình ảnh](image.jpg)](https://www.markdownlang.com)

Hiệu ứng hiển thị: Nhấp vào hình ảnh sẽ chuyển đến liên kết đã chỉ định.

Sử dụng HTML để điều khiển hình ảnh

Chỉ định kích thước

markdown

<img src="image.jpg" alt="Văn bản mô tả" width="300" height="200">

Căn chỉnh hình ảnh

markdown

<!-- Căn giữa -->
<div align="center">
  <img src="image.jpg" alt="Hình ảnh căn giữa" width="400">
</div>

<!-- Căn phải -->
<div align="right">
  <img src="image.jpg" alt="Hình ảnh căn phải" width="300">
</div>

Hình ảnh đáp ứng

markdown

<img src="image.jpg" alt="Hình ảnh đáp ứng" style="max-width: 100%; height: auto;">

Hiển thị kết hợp hình ảnh

Hiển thị cạnh nhau

markdown

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

Lưới hình ảnh

markdown

<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>

Trộn hình ảnh với văn bản

markdown

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

Đây là đoạn văn bản, hình ảnh nổi bên trái. Văn bản sẽ bao quanh hình ảnh, tạo hiệu ứng trộn hình-văn bản. Có thể dùng để tạo giới thiệu cá nhân hoặc mô tả sản phẩm.

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

Thực tiễn tốt cho văn bản thay thế

Văn bản mô tả

markdown

✅ Khuyến nghị: Mô tả nội dung hình ảnh
![Cảnh làm việc người dùng viết mã trên laptop](workspace.jpg)

❌ Không khuyến nghị: Văn bản vô nghĩa
![Hình ảnh](workspace.jpg)
![Nhấp vào đây](workspace.jpg)

Hình ảnh chức năng

markdown

✅ Khuyến nghị: Giải thích chức năng hình ảnh
![Nút tìm kiếm](search-icon.png)
![Liên kết kho GitHub](github-logo.png)

❌ Không khuyến nghị: Lặp lại văn bản xung quanh
Nhấp ![Nhấp](search-icon.png) để tìm kiếm

Hình ảnh trang trí

markdown

✅ Khuyến nghị: Dùng văn bản thay thế rỗng cho hình ảnh trang trí
![](decorative-border.png)

❌ Không khuyến nghị: Mô tả không cần thiết
![Họa tiết viền trang trí](decorative-border.png)

Định dạng hình ảnh phổ biến

Định dạng thân thiện với web

Định dạng	Mục đích	Đặc điểm
JPEG	Ảnh chụp, hình ảnh phức tạp	Kích thước nhỏ, nén có mất mát
PNG	Biểu tượng, nền trong suốt	Nén không mất mát, hỗ trợ trong suốt
WebP	Hình ảnh web hiện đại	Kích thước nhỏ hơn, chất lượng tốt hơn
SVG	Đồ họa vector, biểu tượng	Có thể mở rộng, kích thước nhỏ
GIF	Hoạt ảnh đơn giản	Hỗ trợ hoạt ảnh, màu sắc hạn chế

Gợi ý chọn định dạng

markdown

✅ Cách dùng khuyến nghị:
![Ảnh chụp](photo.jpg)           ← JPEG phù hợp với ảnh chụp
![Biểu tượng](icon.png)            ← PNG phù hợp với biểu tượng
![Đồ họa vector](logo.svg)          ← SVG phù hợp với đồ họa vector
![Hoạt ảnh](animation.gif)       ← GIF phù hợp với hoạt ảnh đơn giản

❌ Không khuyến nghị:
![Biểu tượng](icon.jpg)            ← JPEG không phù hợp với biểu tượng
![Ảnh chụp](photo.png)           ← PNG sẽ có kích thước lớn

Kỹ thuật tối ưu hình ảnh

Tối ưu kích thước tệp

Chọn độ phân giải phù hợp

markdown

<!-- Gợi ý hiển thị web -->
<img src="image.jpg" width="800" alt="Mô tả">  ← Ảnh 2x cho màn hình HD

Sử dụng nén phù hợp

markdown

<!-- Gợi ý chất lượng JPEG: 70-80% -->
![Ảnh đã tối ưu](optimized-photo.jpg)

Tải chậm (lazy loading)

markdown

<img src="image.jpg" alt="Mô tả" loading="lazy">

Sử dụng CDN và dịch vụ lưu trữ ảnh

markdown

<!-- Sử dụng CDN để tăng tốc -->
![Hình ảnh CDN](https://cdn.example.com/images/photo.jpg)

<!-- Dịch vụ lưu trữ ảnh -->
![Hình ảnh từ dịch vụ lưu trữ](https://img.example.com/upload/photo.jpg)

Lỗi thường gặp và giải pháp

1. Lỗi đường dẫn

markdown

❌ Sai:
![Hình ảnh](images/photo.jpg)    ← Đường dẫn không tồn tại

✅ Đúng:
![Hình ảnh](./images/photo.jpg)  ← Xác nhận đường dẫn tệp
![Hình ảnh](/assets/photo.jpg)   ← Sử dụng đường dẫn tương đối đúng

2. Thiếu văn bản thay thế

markdown

❌ Sai:
![](important-chart.jpg)     ← Hình ảnh quan trọng thiếu mô tả

✅ Đúng:
![Biểu đồ so sánh dữ liệu bán hàng năm 2023](important-chart.jpg)

3. Vấn đề kiểm soát kích thước

markdown

❌ Vấn đề: Hình ảnh quá lớn
![Hình ảnh lớn](huge-image.jpg)   ← Có thể làm vỡ bố cục

✅ Giải pháp:
<img src="huge-image.jpg" alt="Hình ảnh lớn" style="max-width: 100%;">

4. Vấn đề liên kết hình ảnh

markdown

❌ Sai:
[![Hình ảnh](image.jpg)(https://www.markdownlang.com)  ← Lỗi cú pháp

✅ Đúng:
[![Hình ảnh](image.jpg)](https://www.markdownlang.com)

Kịch bản ứng dụng thực tế

1. Tài liệu kỹ thuật

markdown

## Các bước cài đặt

1. Tải gói cài đặt

   ![Ảnh chụp màn hình trang tải xuống](download-page.png)

2. Chạy trình cài đặt

   ![Giao diện hướng dẫn cài đặt](installer-wizard.png)

3. Hoàn tất cài đặt

   ![Xác nhận hoàn tất cài đặt](installation-complete.png)

2. Trình bày sản phẩm

markdown

## Tính năng sản phẩm

### Thiết kế giao diện hiện đại

<div align="center">
  <img src="ui-screenshot.png" alt="Ảnh chụp màn hình giao diện sản phẩm" width="600">
  <p><em>Giao diện người dùng đơn giản và trực quan</em></p>
</div>

### Hỗ trợ đa nền tảng

<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. Giới thiệu cá nhân

markdown

## Về tôi

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

Xin chào! Tôi là một lập trình viên full‑stack, tập trung vào công nghệ Web hiện đại. Tôi có hơn 5 năm kinh nghiệm phát triển, quen thuộc với nhiều ngôn ngữ và framework.

### Ngăn xếp kỹ năng

![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. Hướng dẫn

markdown

## Cấu hình trình soạn thảo mã

Làm theo các bước sau để cấu hình môi trường phát triển của bạn:

1. **Mở cài đặt**

   ![Điểm vào cài đặt VS Code](vscode-settings-1.png)

2. **Tìm kiếm mục cấu hình**

   ![Tìm kiếm cấu hình](vscode-settings-2.png)

3. **Sửa đổi giá trị cấu hình**

   ![Sửa đổi cấu hình](vscode-settings-3.png)

> 💡 **Gợi ý**: Sau khi cấu hình xong, khởi động lại trình soạn thảo để đảm bảo cài đặt có hiệu lực.

Truy cập không rào cản

Viết văn bản thay thế có ý nghĩa

markdown

✅ Khuyến nghị: Mô tả chi tiết
![Biểu đồ tám thanh cho thấy doanh thu quý 3 năm 2023 tăng 15% với mũi tên đỏ hướng lên](revenue-chart-q3.png)

❌ Không khuyến nghị: Lặp lại đơn giản
![Biểu đồ](revenue-chart-q3.png)

Sử dụng mô tả có cấu trúc

markdown

![Ảnh tập thể nhân viên: Hàng trước từ trái sang phải Trương Tam, Lý Tứ, Vương Ngũ; hàng sau từ trái sang phải Triệu Lục, Tôn Thất, Chu Bát](team-photo.jpg)

Đầu ra HTML

Hình ảnh Markdown chuyển đổi thành HTML:

markdown

![Văn bản thay thế](image.jpg "Tiêu đề hình ảnh")

Chuyển đổi thành:

html

<img src="image.jpg" alt="Văn bản thay thế" title="Tiêu đề hình ảnh">

Hình ảnh tham chiếu:

markdown

![Văn bản thay thế][ref]

[ref]: image.jpg "Tiêu đề"

Chuyển đổi thành:

html

<img src="image.jpg" alt="Văn bản thay thế" title="Tiêu đề">

Cú pháp liên quan

Cú pháp liên kết - Tạo liên kết
Cú pháp HTML - Nhúng HTML
Khối mã fenced - Tô sáng mã

Luyện tập

Thử tạo nội dung sau:

Một trang trình bày sản phẩm, bao gồm nhiều hình ảnh sản phẩm
Một hướng dẫn kỹ thuật, bao gồm ảnh chụp màn hình bước và giải thích
Một trang giới thiệu nhóm, bao gồm ảnh đại diện thành viên và thông tin
Một biểu đồ so sánh, hiển thị xu hướng thay đổi dữ liệu

Công cụ khuyến nghị

Công cụ chỉnh sửa hình ảnh

Công cụ trực tuyến: Canva、Figma、Photopea
Phần mềm desktop: GIMP、Paint.NET、Adobe Photoshop
Công cụ chụp màn hình: Snipaste、Lightshot、Chụp màn hình hệ thống có sẵn

Công cụ tối ưu hình ảnh

Công cụ nén: TinyPNG、ImageOptim、Squoosh
Chuyển đổi định dạng: CloudConvert、Online-Convert
Xử lý hàng loạt: ImageMagick、XnConvert

Dịch vụ lưu trữ ảnh

Dịch vụ miễn phí: GitHub、Gitee、sm.ms
Dịch vụ trả phí: Qiniu Cloud、Alibaba Cloud OSS、Tencent Cloud COS
Tăng tốc CDN: jsDelivr、Cloudflare、AWS CloudFront

Cú pháp hình ảnh ​