> For the complete documentation index, see [llms.txt](https://hifunnel.gitbook.io/hifunnel-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hifunnel.gitbook.io/hifunnel-help-center/documentation/documentation-vi/website-and-landing-page/page/recommended-image-dimensions-for-page-templates.md).

# Bảng Kích thước Ảnh chuẩn Khuyên dùng cho Website & Landing Page

Bảng tổng hợp tỷ lệ khung hình, dung lượng và kích thước ảnh chuẩn (Hero banner, logo, icon, card, og image) tối ưu cho trang Hifunnel.

Sử dụng kích thước và độ phân giải hình ảnh hợp lý là yếu tố quyết định giúp trang bán hàng của bạn vừa tải cực nhanh vừa duy trì độ sắc nét cao trên tất cả màn hình máy tính, điện thoại di động và màn hình Retina.

Hãy tham khảo bảng tổng hợp kích thước ảnh chuẩn dưới đây khi thiết kế đồ họa và tải file lên Hifunnel Page Builder.

***

## Bảng Tra cứu Kích thước Ảnh Tóm tắt

| Loại hình ảnh                        | Kích thước khuyên dùng (Rộng x Cao) | Tỷ lệ khung hình | Dung lượng tối đa | Định dạng file |
| ------------------------------------ | ----------------------------------- | ---------------- | ----------------- | -------------- |
| **Ảnh nền Hero (Banner chính)**      | 1920 x 1080 px                      | 16:9             | < 500 KB          | JPG / WebP     |
| **Ảnh nền Section**                  | 1920 x 1080 px (hoặc 1920 x 800 px) | Ngang            | < 400 KB          | JPG / WebP     |
| **Ảnh Thẻ tính năng / Card**         | 800 x 600 px (hoặc 600 x 600 px)    | 4:3 hoặc 1:1     | < 200 KB          | JPG / WebP     |
| **Ảnh Thumbnail Khóa học / Product** | 1280 x 720 px                       | 16:9             | < 300 KB          | JPG / WebP     |
| **Logo Header (Đầu trang)**          | 400 x 120 px (Nền trong suốt)       | Tùy chỉnh        | < 100 KB          | PNG / SVG      |
| **Icon Favicon**                     | 512 x 512 px (Vuông)                | 1:1              | < 50 KB           | PNG / ICO      |
| **Ảnh chia sẻ Social (OG Image)**    | 1200 x 630 px                       | 1.91:1           | < 300 KB          | JPG / PNG      |
| **Ảnh chân dung Testimonial**        | 300 x 300 px (Vuông)                | 1:1              | < 100 KB          | JPG / WebP     |

***

## Chi tiết Nguyên tắc Thiết kế từng Loại Ảnh

### 1. Ảnh nền Hero Banner & Section

* **Độ phân giải chuẩn**: 1920 x 1080 px (Full HD).
* **Tối ưu hóa**: Luôn nén dung lượng ảnh qua các công cụ miễn phí (như [TinyPNG](https://tinypng.com/) hoặc [Canva](https://www.canva.com/)) trước khi tải lên. Giữ dung lượng ảnh nền dưới 500 KB để đảm bảo tốc độ tải trang dưới 2 giây.

### 2. Logo Header & Bộ nhận diện

* **Logo Header**: 400 x 120 px (Định dạng PNG tách nền trong suốt).
* **Logo Chân trang (Footer)**: 300 x 100 px.
* **Icon Favicon (Biểu tượng tab trình duyệt)**: 512 x 512 px hình vuông PNG.

### 3. Thẻ tính năng & Cảm nhận khách hàng

* **Hình ảnh trong Card/Bài viết**: 800 x 600 px (Tỷ lệ 4:3) hoặc 600 x 600 px (Tỷ lệ 1:1).
* **Ảnh chân dung khách hàng (Testimonial)**: Cắt hình vuông 300 x 300 px để khi bo tròn hiển thị đẹp mắt.

### 4. Ảnh đại diện Video & Sản phẩm

* **Thumbnail Khóa học & Video**: 1280 x 720 px (Tỷ lệ chuẩn HD 16:9).

***

## Nguyên tắc vàng Tối ưu Tốc độ Tải trang

{% hint style="info" %}
**3 Quy tắc Vàng giúp Trang tải siêu tốc:**

1. **Ưu tiên định dạng WebP hoặc JPG đã nén**: WebP giúp giảm 30% dung lượng so với JPG gốc mà không giảm chất lượng hiển thị.
2. **Nén ảnh trước khi Upload**: Dùng công cụ TinyPNG để nén dung lượng mọi bức ảnh xuống dưới 300 KB.
3. **Không tải ảnh gốc chụp từ máy ảnh**: Tuyệt đối không upload ảnh gốc chưa nén nặng 5MB-10MB trực tiếp lên trang bán hàng.
   {% endhint %}