Bảng độ phân giải theo tỷ lệ khung hình｜16:9, 4:3, 1:1, 9:16, 21:9【2026】
Tỷ lệ khung hình nói quan hệ cạnh; độ phân giải nói số pixel. Cùng 16:9 có thể là 1280×720 hoặc 3840×2160. Tra bảng dưới để chốt W×H trước khi design/export. Dọc social dùng 9:16 (1080×1920), không xoay nhầm file 16:9. Khi chỉ biết một cạnh, dùng tính tỷ lệ khung hình.
Brief khách: “Banner 16:9, xuất Full HD”. Designer làm 1920×1080. Dev nhúng CSS aspect-ratio: 16/9 — ổn. Tuần sau marketing xin “bản cho TikTok” — ai đó xoay và stretch file ngang thành 1080×1920. Mặt người méo, chữ vỡ.
Vấn đề không phải “không biết 16:9 là gì”. Vấn đề là thiếu bảng độ phân giải theo tỷ lệ để cả team nói cùng một cặp pixel. Bài này là tra cứu: các tỷ lệ phổ biến → danh sách W×H hay dùng → khi nào chọn size nào. (Công thức + CSS + safe zone short video nằm chi tiết hơn ở tỷ lệ khung hình video & CSS.)
Bài viết này giúp bạn
- Phân biệt tỷ lệ vs độ phân giải trong 30 giây
- Tra bảng 16:9, 4:3, 3:2, 1:1, 9:16, 21:9, 4:5
- Chọn size theo kênh (YouTube, TikTok, slide, ultrawide)
- Tính nhanh một cạnh khi brief chỉ cho cạnh kia
- Tránh 4 lỗi crop/stretch hay gặp ở team VN
Tỷ lệ và độ phân giải — đừng gộp một khái niệm
| Thuật ngữ | Ý nghĩa | Ví dụ |
|---|---|---|
| Tỷ lệ khung hình (aspect ratio) | Quan hệ rộng : cao | 16:9, 4:3, 9:16 |
| Độ phân giải (resolution) | Số pixel cụ thể | 1920×1080, 1080×1920 |
| Nhãn marketing | “1080p”, “4K”, “Retina” | Cần quy về W×H |
Hai file 1280×720 và 1920×1080 cùng 16:9 nhưng độ nét khác. File 1080×1920 là 9:16 — cùng số “1080” trên một cạnh nhưng hướng khung khác hẳn.
Công thức khi biết tỷ lệ W_r : H_r và một cạnh:
cao = rộng × (H_r / W_r)rộng = cao × (W_r / H_r)
Ví dụ: 16:9, rộng 1600 → cao = 1600 × 9/16 = 900. Làm tròn nguyên; video thường ưu tiên số chẵn.
Bảng 16:9 (ngang — YouTube, TV, monitor, hero)
Tỷ lệ rộng nhất trên web và video ngang.
| Tên thường gọi | Độ phân giải (W×H) | Ghi chú dùng |
|---|---|---|
| nHD | 640×360 | Preview rất nhẹ, không ship hero |
| HD ready | 1280×720 | YouTube 720p, webinar nhẹ |
| FWXGA | 1366×768 | Laptop cũ; gần 16:9 |
| Full HD | 1920×1080 | Chuẩn brief “Full HD” |
| QHD / 1440p | 2560×1440 | Monitor gaming, YouTube 1440p |
| 4K UHD | 3840×2160 | YouTube 4K, hero retina lớn |
| 8K UHD | 7680×4320 | Ít dùng web thường |
Gợi ý chọn: Landing hero desktop thường 1920×1080 hoặc 2560×1440 rồi serve srcset nhỏ hơn. Mobile vẫn 16:9 nhưng width ~800–1200 là đủ — đừng ship nguyên 4K cho mọi thiết bị.
Bảng 9:16 (dọc — TikTok, Reels, Shorts, Story)
| Độ phân giải | Ghi chú |
|---|---|
| 720×1280 | Bản nhẹ / draft |
| 1080×1920 | Chuẩn social 2026 |
| 1440×2560 | Xuất cao hơn khi cần crop an toàn |
Lưu ý: 1080×1920 ≠ “xoay” 1920×1080. Composition (vị trí mặt, chữ, CTA) phải thiết kế lại trong khung dọc. UI TikTok che mép dưới/cạnh — để nội dung quan trọng trong safe zone (chi tiết ở bài aspect-ratio).
Bảng 1:1 và 4:5 (feed & avatar)
| Tỷ lệ | Độ phân giải hay dùng | Kênh |
|---|---|---|
| 1:1 | 1080×1080, 1200×1200 | Feed vuông, avatar, thumbnail |
| 1:1 | 512×512, 256×256 | Icon app, favicon nguồn |
| 4:5 | 1080×1350 | Instagram feed dọc (cao hơn 1:1) |
| 4:5 | 1200×1500 | Bản lớn hơn cùng tỷ lệ |
4:5 = rộng×1.25 = cao (1080×1.25 = 1350). Không kéo giãn ảnh 1:1 thành 4:5.
Bảng 4:3 và 3:2 (slide, ảnh, thiết bị cũ)
| Tỷ lệ | W×H ví dụ | Ngữ cảnh |
|---|---|---|
| 4:3 | 1024×768 | XGA — máy chiếu / slide cũ |
| 4:3 | 1600×1200 | UXGA |
| 4:3 | 2048×1536 | iPad (một số thế hệ) |
| 4:3 | 1440×1080 | Video 4:3 trong khung 1080 chiều cao |
| 3:2 | 1440×960 | Ảnh máy compact / một số laptop |
| 3:2 | 2160×1440 | Surface-ish / ảnh lớn hơn |
| 3:2 | 3000×2000 | Ảnh chụp export phổ biến |
Webinar hoặc deck PowerPoint vẫn hay brief 4:3. Landing hiện đại nghiêng 16:9. Hỏi rõ trước khi vẽ.
Bảng 21:9 và ultrawide
| Độ phân giải | Gần tỷ lệ | Dùng cho |
|---|---|---|
| 2560×1080 | ~21:9 | Ultrawide FHD |
| 3440×1440 | ~21:9 | Ultrawide QHD |
| 3840×1080 | 32:9 (siêu rộng) | Monitor dual-feel — không phải 21:9 thuần |
Banner “cinematic” trên web thường crop 16:9 → 21:9 hoặc export đúng 2560×1080. Kiểm tra chữ không nằm sát mép bị cắt trên mobile (mobile thường không giữ 21:9 fullscreen).
Bảng tra nhanh theo mục đích (bookmark)
| Mục đích | Tỷ lệ | W×H đề xuất mặc định |
|---|---|---|
| YouTube ngang / hero | 16:9 | 1920×1080 |
| YouTube 4K master | 16:9 | 3840×2160 |
| TikTok / Reels / Shorts | 9:16 | 1080×1920 |
| Instagram feed vuông | 1:1 | 1080×1080 |
| Instagram feed dọc | 4:5 | 1080×1350 |
| Story fullscreen | 9:16 | 1080×1920 |
| Slide máy chiếu cũ | 4:3 | 1024×768 hoặc 1600×1200 |
| Banner ultrawide | 21:9 | 2560×1080 |
| OG image Facebook/LinkedIn | ~1.91:1 | 1200×630 (gần 16:9) |
| Favicon nguồn | 1:1 | 512×512 |
OG 1200×630 ≈ 1.91:1 — gần 16:9 nhưng không trùng 1280×720. Đừng lấy nhầm thumbnail YouTube làm OG mà không crop.
Case study: brief “làm đủ size social” trong một buổi
Team: freelancer design + dev WordPress (VN).
Yêu cầu khách: 1 key visual dùng cho YouTube, TikTok, và avatar fanpage.
Cách làm đúng:
- Master composition trên canvas đủ lớn (ví dụ 3840×2160) với safe guides cho 16:9 / 9:16 / 1:1.
- Export ba file từ bảng trên: 1920×1080, 1080×1920, 1080×1080 — crop có chủ đích, không stretch.
- Dev set CSS/
sizeskhớp từng chỗ nhúng; không dùng một<img>cho cả ba layout.
Cách làm sai (hay gặp): một file 1920×1080 + CSS object-fit: cover trên khung 9:16 → mặt bị cắt nửa. Cover chỉ che triệu chứng; brief vẫn cần master đúng tỷ lệ.
Tính cạnh còn lại khi bảng chưa có đúng số bạn cần
Brief: “16:9 nhưng rộng 1600px” — không nằm sẵn trong bảng Full HD.
- Mở tính tỷ lệ khung hình
- Chọn 16:9 (hoặc custom)
- Nhập rộng 1600 → nhận cao 900
- Ghi
1600×900vào ticket / tên file (hero-16x9-1600w.webp)
Công thức thủ công: 900 = 1600 × 9 ÷ 16. Với 9:16 và cao 1920: rộng = 1920 × 9 ÷ 16 = 1080.
4 lỗi khiến bảng trên “vô dụng” nếu bỏ qua
- Nhầm nhãn “1080p” với mọi hướng — 1080p thường = 1920×1080 ngang; dọc phải nói rõ 1080×1920.
- Upscale từ 720p lên 4K bằng stretch — file nặng, không nét thêm thật.
- Export lệch 1–2px (1920×1079) → một số encoder/CSS làm letterbox lạ; luôn kiểm tra
W/Hđúng phân số tỷ lệ. - Dùng chung một file cho OG + YouTube + TikTok — ba tỷ lệ khác nhau; cần crop riêng.
Checklist trước khi gửi file cho khách / dev
- Ticket ghi W×H, không chỉ “16:9” hoặc “Full HD”
- Tỷ lệ khớp kênh (ngang / dọc / vuông)
- Số chẵn nếu là video
- Tên file có tỷ lệ + size (
kv-9x16-1080x1920.png) - Không stretch; có crop chủ đích
- Dev biết size để set
width/heighthoặcaspect-ratiotránh CLS
Câu hỏi thường gặp
Có cần thuộc lòng mọi hàng trong bảng không?
Không. Thuộc tỷ lệ theo kênh + 1–2 size mặc định (1920×1080, 1080×1920, 1080×1080). Phần còn lại tra khi brief lạ.
Retina 2x thì nhân đôi mọi số?
Chỉ khi design yêu cầu tài nguyên 2x. Hero CSS 960px rộng có thể dùng ảnh 1920 rộng — đó là 2x của CSS px, vẫn có thể là 16:9.
Tool aspect-ratio có xuất ảnh không?
Không — tool tính tỷ lệ cho số pixel. Export ảnh vẫn làm trong Figma/Photoshop/CapCut; tool giúp không tính nhầm trước khi vẽ.