Tỷ lệ khung hình là tỷ lệ giữa chiều rộng và chiều cao. Khái niệm rất quan trọng trong thiết kế nội dung kỹ thuật số.
1. Tỷ Lệ Khung Hình Chính và Cách Sử Dụng
**16:9 (Màn Hình Rộng)**: Phổ biến nhất, tiêu chuẩn trên YouTube, TV, màn hình PC. Full HD (1920x1080), 4K (3840x2160), v.v. có tỷ lệ này. **4:3 (Cổ Điển)**: Được sử dụng trong TV cũ, iPad, slide thuyết trình. **21:9 (Rạp Chiếu Phim)**: Phổ biến trong màn hình rạp chiếu phim, màn hình siêu rộng. Lý tưởng để hiển thị cảnh quan rộng. **1:1 (Vuông)**: Được sử dụng trong bài đăng Instagram, hình đại diện. **9:16 (Dọc)**: Tiêu chuẩn cho điện thoại thông minh, Instagram Stories, TikTok.
2. Phương Pháp Tính Toán Tỷ Lệ Khung Hình
Tỷ lệ khung hình = chiều rộng ÷ chiều cao. Ví dụ, trong trường hợp 1920x1080 pixel: 1920 ÷ 1080 = 1.777... ≈ 16 ÷ 9 = 1.777... tức là tỷ lệ 16:9. Nếu biết tỷ lệ, chiều rộng = chiều cao × (tỷ lệ chiều rộng ÷ tỷ lệ chiều cao), chiều cao = chiều rộng ÷ (tỷ lệ chiều rộng ÷ tỷ lệ chiều cao) tính bằng công thức.
3. Độ Phân Giải và Tỷ Lệ Khung Hình
**Full HD (1920x1080)**: 16:9, độ phân giải video phổ biến nhất. **4K UHD (3840x2160)**: 16:9, đúng 4 lần số pixel của Full HD. **QHD/WQHD (2560x1440)**: 16:9, phổ biến trong màn hình chơi game. **Siêu Rộng (3440x1440)**: 21:9, màn hình điện ảnh. **iPad (2048x1536)**: 4:3, tiêu chuẩn máy tính bảng. Có thể có nhiều độ phân giải khác nhau trong cùng một tỷ lệ khung hình.
4. Nền Tảng Video và Tỷ Lệ Khung Hình Được Khuyến Nghị
**YouTube**: 16:9 (1920x1080, 3840x2160) tốt nhất. Cho Shorts là 9:16 (1080x1920). **Instagram Feed**: 1:1 (1080x1080) hoặc 4:5 (1080x1350). **Instagram Stories/Reels**: 9:16 (1080x1920). **TikTok**: 9:16 (1080x1920). **Facebook**: 16:9 (1200x675) hoặc 1:1 (1200x1200). **Twitter**: 16:9 (1200x675) hoặc 2:1 (1200x600). Sử dụng tỷ lệ khung hình chính xác theo từng nền tảng cải thiện chất lượng hiển thị.
5. Tầm Quan Trọng Của Việc Duy Trì Tỷ Lệ Khung Hình Trong Thiết Kế
Thay đổi kích thước mà không khớp tỷ lệ khung hình sẽ làm hình ảnh hoặc video **bị méo** (distortion). Xảy ra **cắt** không cần thiết và các phần quan trọng có thể bị cắt. Khi tải lên nền tảng sẽ tạo **letterbox hoặc pillarbox** (dải đen), trông xấu. Sử dụng tỷ lệ khung hình chính xác tạo ra thiết kế chuyên nghiệp.
6. Tỷ Lệ Khung Hình Trong CSS và Thiết Kế Responsive
Trong CSS có thể dễ dàng duy trì tỷ lệ khung hình bằng thuộc tính `aspect-ratio`. Ví dụ, `aspect-ratio: 16 / 9;` cho phép làm cho container video và hình ảnh responsive. Trong phương pháp cũ đã sử dụng `padding-top: 56.25%;` (9 ÷ 16 × 100 = 56.25%). Trong trình duyệt hiện đại, việc sử dụng `aspect-ratio` dễ dàng và dễ đọc.
7. Tỷ Lệ Khung Hình Trong Phương Tiện In Ấn
**4x6 inch (2:3)**: Kích thước in ảnh phổ biến. Gần với tỷ lệ 3:2 của DSLR. **5x7 inch (5:7)**: Phổ biến trong khung chân dung. **8x10 inch (4:5)**: Kích thước khung cổ điển. **11x14 inch (11:14)**: Được sử dụng trong bản in lớn. Tỷ lệ khung hình của hình ảnh kỹ thuật số (16:9, 4:3) và tỷ lệ khung hình của bản in có thể khác nhau, vì vậy hãy cắt trước khi in.
8. Mẹo Tính Toán và Chuyển Đổi
**Tính chiều cao từ chiều rộng**: chiều cao = chiều rộng ÷ (tỷ lệ chiều rộng ÷ tỷ lệ chiều cao). Ví dụ, 16:9 và chiều rộng 1920px, chiều cao = 1920 ÷ (16 ÷ 9) = 1080px. **Tính chiều rộng từ chiều cao**: chiều rộng = chiều cao × (tỷ lệ chiều rộng ÷ tỷ lệ chiều cao). Ví dụ, 4:3 và chiều cao 768px, chiều rộng = 768 × (4 ÷ 3) = 1024px. **Tỷ lệ thập phân**: 16:9 = 1.78:1, 21:9 = 2.33:1, v.v. cũng có thể biểu thị dưới dạng thập phân. Tỷ lệ thập phân như 2.39:1 phổ biến trong ngành công nghiệp điện ảnh.