# Công cụ chèn hình ảnh

## **1. Mục tiêu**

Giúp bạn trực quan hóa nội dung Landing Page bằng các yếu tố đồ họa, ảnh sản phẩm hoặc biểu tượng minh họa. Công cụ này đóng vai trò quan trọng trong việc tạo ấn tượng thị giác, giúp trang web sinh động và chuyên nghiệp hơn.

## **2. Khi nào dùng?**

* Khi cần chèn ảnh đại diện sản phẩm, ảnh chân dung đội ngũ hoặc ảnh minh họa cho các tính năng.
* Khi muốn tạo các biểu tượng (icon) hoặc banner quảng cáo cho các chương trình khuyến mãi.
* Dùng để thay thế các khung hình mẫu trong các bộ cấu trúc (Structure) có sẵn.

## **3. Các bước thực hiện**

* Kích hoạt: Chọn biểu tượng hình ảnh trên thanh công cụ thiết kế.

<figure><img src="/files/YNwIpRsOJoGtpor5bvTp" alt=""><figcaption></figcaption></figure>

* Xác định vị trí: Nhấn giữ và vẽ một khung trên vùng Canvas để định hình vị trí và kích thước ảnh bạn muốn hiển thị.
* Tải nội dung: Ngay sau khi vẽ khung, hệ thống sẽ tự động mở cửa sổ quản lý tệp tin. Tại đây, bạn có thể:
  * Chọn ảnh có sẵn trong thư viện dự án.
  * Tải ảnh mới trực tiếp từ máy tính cá nhân.
* Hoàn tất: Sau khi chọn, hình ảnh sẽ tự động được chèn vào đúng vị trí khung bạn đã vẽ.

## **4. Lưu ý quan trọng**

* Xử lý tỷ lệ ảnh: Nếu ảnh gốc có tỷ lệ khác với khung bạn vừa vẽ, hãy sử dụng tính năng "Cắt ảnh" hoặc "Tự động lấp đầy" (Object Fit: Cover) trong bảng cài đặt bên phải để ảnh không bị méo hoặc bị khoảng trắng.
* Dung lượng tệp: Nên sử dụng các tệp ảnh đã được tối ưu dung lượng (dưới 500KB) để đảm bảo tốc độ tải trang nhanh nhất.
* Định dạng WebP: Ưu tiên bật tính năng *Auto convert images to WebP* trong phần Global Settings để hệ thống tự động tối ưu hóa ảnh cho bạn.
* Văn bản thay thế (Alt Text): Đừng quên điền mô tả ảnh trong phần thuộc tính để hỗ trợ SEO và giúp người khiếm thị hiểu được nội dung hình ảnh của bạn.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mhiring.vn/mcms/tac-vu-chung/tac-vu-co-ban/cong-cu-chen-hinh-anh.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.