Tính tỷ lệ khung hình: rút gọn kích thước, đổi size giữ tỷ lệ và các cỡ chuẩn
Công cụ đọc chiều rộng và chiều cao rồi rút gọn thành tỷ lệ tối giản kèm giá trị thập phân, đồng thời tính kích thước mới khi bạn muốn phóng to hay thu nhỏ mà giữ nguyên khung hình. Có sẵn mười tỷ lệ hay dùng, khung xem trước hình dạng và dòng khai báo CSS để dán thẳng vào mã nguồn.
Tính năng nổi bật
- Rút gọn cặp chiều rộng và chiều cao thành tỷ lệ tối giản bằng ước chung lớn nhất
- Hiển thị song song giá trị thập phân với bốn chữ số sau dấu phẩy
- Ô đổi kích thước có khóa tỷ lệ, sửa một cạnh là cạnh còn lại tự tính theo
- Mười nút tỷ lệ dựng sẵn kèm ghi chú nơi thường dùng, từ 16:9 tới 9:16 và 4:5
- Khung xem trước dựng đúng hình dạng khung hình theo con số bạn nhập
- Sinh sẵn dòng khai báo CSS dạng aspect-ratio để sao chép vào biểu định kiểu
- Nút sao chép riêng cho tỷ lệ, cho giá trị thập phân và cho dòng CSS
- Bảng tra nhanh các cỡ thông dụng của video, mạng xã hội, ảnh chia sẻ và ảnh in
Sai tỷ lệ là lỗi tốn thời gian nhất trong khâu hình ảnh
Khi ảnh hoặc video không đúng tỷ lệ mà nơi hiển thị yêu cầu, chỉ có hai kết cục và cả hai đều tệ. Một là nội dung bị kéo giãn, khiến khuôn mặt béo ra hoặc gầy đi và chữ trong ảnh trông lệch nét. Hai là nội dung bị cắt để lấp đầy khung, và phần bị cắt luôn rơi vào rìa, chỗ hay đặt logo hoặc chữ. Cả hai lỗi này thường chỉ lộ ra sau khi đã đăng, khi ảnh xuất hiện trong bảng tin hay trong một khung nhỏ ở trang chủ. Sửa thì phải quay lại tệp gốc, xuất lại, tải lên lại và đôi khi phải xóa cả bài đã đăng vì nhiều nền tảng giữ bản ảnh đã lưu tạm. Tính đúng tỷ lệ ngay từ khâu chuẩn bị nhanh hơn nhiều so với việc chữa cháy. Công cụ này giúp phần số học, còn việc chọn tỷ lệ nào thì phụ thuộc nơi hình sẽ xuất hiện.
Lợi ích khi sử dụng
- Biết ngay một cặp kích thước có đúng khung hình chuẩn hay chỉ gần đúng
- Đổi kích thước mà không phải nhẩm phép chia, tránh lệch một hai pixel làm ảnh bị viền
- Có sẵn dòng CSS để giữ chỗ cho ảnh, giảm hiện tượng trang nhảy khi ảnh tải xong
- Bảng cỡ thông dụng ngay trên trang nên không phải mở thêm tài liệu tra cứu
- Chạy hoàn toàn trong trình duyệt, dùng nhanh ngay giữa lúc đang dựng bố cục
Ba việc làm được với công cụ này
- 1Nhập chiều rộng và chiều cao hiện có vào hai ô trên cùng để đọc tỷ lệ tối giản cùng giá trị thập phân.
- 2Bấm một trong các nút tỷ lệ dựng sẵn nếu bạn muốn đi ngược lại, tức là từ tỷ lệ mong muốn suy ra kích thước theo chuẩn chiều rộng 1920 pixel.
- 3Giữ biểu tượng khóa ở trạng thái đóng rồi nhập chiều rộng mới, chiều cao sẽ tự tính để khung hình không đổi.
- 4Sao chép dòng CSS nếu bạn cần giữ chỗ cho ảnh trên trang web, hoặc sao chép cặp số nếu bạn sắp xuất tệp.
- 5Đối chiếu với bảng cỡ thông dụng phía dưới trước khi xuất, vì mỗi nền tảng có kích thước riêng dù cùng một tỷ lệ.
Cách rút gọn tỷ lệ và vì sao nhiều màn hình không phải 16:9 chính xác
Rút gọn tỷ lệ là bài toán tìm ước chung lớn nhất của hai số rồi chia cả hai cho nó. Với 1920 và 1080, ước chung lớn nhất là 120, chia ra được 16 và 9. Với 3840 và 2160 cũng ra đúng 16:9 vì đó là bản nhân đôi. Nhưng thử với 1366 và 768, cặp độ phân giải rất phổ biến trên máy tính xách tay giá rẻ: ước chung lớn nhất chỉ là 2, cho ra 683:384, và giá trị thập phân là 1,7786 chứ không phải 1,7778 của 16:9. Nghĩa là màn hình đó gần 16:9 nhưng không phải 16:9. Hệ quả thực tế là khi phát một video 16:9 toàn màn hình trên máy đó, hệ điều hành phải thêm một dải đen mỏng hoặc cắt vài dòng ảnh. Tình huống tương tự xảy ra với 1024×600 hay 1600×900 pha trộn trong cùng một dự án. Vì vậy khi làm việc với nhiều thiết bị, hãy lấy giá trị thập phân làm căn cứ so sánh thay vì tin vào cặp số rút gọn, bởi hai tỷ lệ chênh nhau chưa tới một phần nghìn vẫn có thể tạo ra viền đen nhìn thấy được.
Kích thước nào cho từng nơi đăng
Cùng một tỷ lệ nhưng mỗi nền tảng lại có kích thước khuyến nghị riêng, và bảng tra trong công cụ liệt kê những cỡ hay dùng nhất. Với ảnh xem trước khi chia sẻ liên kết, Facebook dùng 1200×630 pixel tức tỷ lệ khoảng 1,91:1, LinkedIn dùng 1200×627 gần như tương đương, còn thẻ ảnh lớn của mạng X thường lấy 1200×600 tức đúng 2:1. Với Instagram, ảnh vuông là 1080×1080, ảnh dọc dùng nhiều nhất là 1080×1350 tức tỷ lệ 4:5, còn khung dạng câu chuyện và video ngắn là 1080×1920 tức 9:16. Video ngang theo chuẩn phát sóng vẫn là 16:9 với ba mốc quen thuộc 1280×720, 1920×1080 và 3840×2160. Với ảnh in theo khổ 3:2, các cỡ trong bảng tương ứng độ phân giải 300 điểm trên mỗi inch, ví dụ ảnh 6 nhân 4 inch cần tệp 1800×1200 pixel. Nguyên tắc chung là luôn xuất ở đúng hoặc lớn hơn cỡ khuyến nghị, vì nền tảng thu nhỏ ảnh thì đẹp còn phóng to ảnh thì vỡ.
Chuyển video ngang sang dọc mất bao nhiêu phần hình
Đây là phép tính nên làm trước khi quay chứ không phải sau khi dựng. Một khung hình 1920×1080 theo tỷ lệ 16:9, nếu cắt sang 9:16 mà vẫn giữ nguyên chiều cao 1080, thì chiều rộng còn lại chỉ là 1080 nhân 9 chia 16, tức 607,5 pixel. So với 1920 ban đầu, bạn giữ được chưa tới ba mươi hai phần trăm bề ngang và mất hơn sáu mươi tám phần trăm. Đó là lý do các video quay ngang khi cắt sang dọc thường mất người nói ở mép khung hoặc mất chữ chạy dưới chân màn hình. Chiều ngược lại cũng vậy: một khung 1080×1920 cắt sang 16:9 giữ nguyên chiều rộng thì chỉ còn cao 607,5 pixel, tức mất gần bảy mươi phần trăm chiều cao. Cách xử lý thực tế có ba hướng: quay ở tỷ lệ trung gian rồi cắt hai đầu, đặt chủ thể vào vùng an toàn ở giữa khung ngay từ lúc quay, hoặc chấp nhận thêm dải màu ở hai bên thay vì cắt. Hướng nào cũng phải quyết trước khi bấm máy.
Khai báo tỷ lệ trong CSS để trang không nhảy khi ảnh tải
Khi trình duyệt chưa tải xong ảnh, nó không biết ảnh cao bao nhiêu nên dành cho ảnh chiều cao bằng không. Đến lúc ảnh về, phần nội dung bên dưới bị đẩy xuống và người đang đọc mất chỗ, có khi đang định bấm một nút thì nút chạy đi mất. Hiện tượng này được đo bằng chỉ số dịch chuyển bố cục tích lũy và là một trong những yếu tố ảnh hưởng đến trải nghiệm trang. Cách chữa là báo trước tỷ lệ cho trình duyệt, hoặc bằng thuộc tính CSS aspect-ratio với giá trị dạng 16 gạch chéo 9 như dòng công cụ sinh sẵn, hoặc bằng cách ghi đủ cả hai thuộc tính chiều rộng và chiều cao trên thẻ ảnh rồi để CSS đặt chiều rộng theo phần trăm và chiều cao ở chế độ tự động. Trình duyệt sẽ tự tính khoảng trống cần giữ và bố cục đứng yên ngay từ lần vẽ đầu tiên. Với ảnh nền hay video nhúng, thuộc tính aspect-ratio đặt trên khung bao là cách gọn nhất.
Bốn cái bẫy khi làm tròn và giới hạn của các nút dựng sẵn
Thứ nhất, kết quả đổi kích thước luôn được làm tròn về số nguyên, nên tỷ lệ mới có sai lệch nhỏ. Đặt chiều rộng mới là 1000 cho một khung 16:9, chiều cao ra 563 thay vì 562,5, và tỷ lệ thực thành 1,7762 chứ không phải 1,7778. Sai số này vô hại với ảnh trên web nhưng đáng lưu ý khi ghép nhiều lớp video. Thứ hai, phần lớn bộ mã hóa video yêu cầu chiều rộng và chiều cao là số chẵn, một số cấu hình còn muốn chia hết cho bốn, nên hãy làm tròn tay về số chẵn gần nhất trước khi xuất. Thứ ba, các nút dựng sẵn đều lấy chiều rộng cố định 1920 rồi suy ra chiều cao, nên với những tỷ lệ không chia chẵn bạn sẽ nhận kết quả lệch: nút 21:9 cho ra 1920×823 và công cụ rút gọn thành 1920:823 chứ không hiện 21:9, còn nút 1,91:1 cho ra 1920×1005 và rút gọn thành 128:67. Thứ tư, tỷ lệ điện ảnh mà nhiều người quen gọi là 21:9 thực chất thường là 2,39:1, nên hãy nhập trực tiếp cặp số của định dạng đích thay vì tin vào nhãn.
Câu hỏi thường gặp (FAQ)
Tỷ lệ khung hình là gì và tính thế nào?
Là quan hệ giữa chiều rộng và chiều cao của một khung hình, viết dưới dạng hai số ngăn bởi dấu hai chấm. Cách tính là tìm ước chung lớn nhất của hai kích thước rồi chia cả hai cho nó. Ví dụ 1920 và 1080 có ước chung lớn nhất là 120, chia ra được 16:9.
Ảnh chia sẻ liên kết lên Facebook nên để kích thước nào?
1200×630 pixel, tương ứng tỷ lệ khoảng 1,91:1. LinkedIn dùng 1200×627 gần như giống hệt nên một tệp dùng được cho cả hai. Thẻ ảnh lớn của mạng X thì hợp với 1200×600 tức tỷ lệ 2:1. Nếu chỉ làm một tệp dùng chung, hãy chừa lề an toàn ở hai cạnh trên dưới để phần bị cắt không ăn vào chữ.
Vì sao màn hình 1366×768 không phải 16:9?
Vì rút gọn ra 683:384 với giá trị thập phân 1,7786, còn 16:9 là 1,7778. Chênh lệch rất nhỏ nhưng đủ để khi phát video 16:9 toàn màn hình, hệ thống phải thêm một dải đen mỏng hoặc cắt bớt vài dòng ảnh. Đây là chuyện thường gặp trên máy tính xách tay phổ thông đời cũ.
Cắt video ngang sang dọc thì mất bao nhiêu phần hình?
Từ khung 1920×1080 sang tỷ lệ 9:16 mà giữ nguyên chiều cao, bề ngang còn lại chỉ 607,5 pixel, tức bạn giữ được chưa tới ba mươi hai phần trăm và mất hơn sáu mươi tám phần trăm bề ngang. Vì vậy hãy quyết định định dạng đích trước khi quay và đặt chủ thể vào vùng giữa khung.
Nút tỷ lệ 21:9 cho ra 1920×823, có phải công cụ sai không?
Không sai, chỉ là cách làm tròn. Các nút dựng sẵn đều cố định chiều rộng 1920 rồi suy ra chiều cao, mà 1920 nhân 9 chia 21 không ra số nguyên nên kết quả là 823 và tỷ lệ rút gọn không còn là 21:9. Nếu cần đúng tỷ lệ đó, hãy nhập trực tiếp một cặp chia chẵn như 2560×1080.
Thuộc tính aspect-ratio trong CSS dùng để làm gì?
Để báo trước cho trình duyệt hình dạng của một phần tử, nhờ đó nó giữ sẵn khoảng trống trước khi ảnh hoặc video tải xong. Không có khai báo này, nội dung bên dưới sẽ bị đẩy xuống khi ảnh về, gây hiện tượng trang nhảy vốn ảnh hưởng tới trải nghiệm người đọc và tới điểm đánh giá trang.
Đổi kích thước có làm ảnh mờ không?
Công cụ chỉ tính con số, việc mờ hay không phụ thuộc bạn xử lý ảnh thế nào. Thu nhỏ thì gần như luôn giữ được độ sắc nét. Phóng to thì luôn mất nét vì phần mềm phải tự sinh thêm điểm ảnh không có trong bản gốc. Nguyên tắc là xuất từ tệp gốc lớn nhất bạn có, đừng phóng to từ bản đã thu nhỏ.
Vì sao chiều cao tính ra lệch nửa pixel so với tôi nhẩm tay?
Vì kết quả được làm tròn về số nguyên gần nhất, không có nửa pixel trên màn hình. Đặt chiều rộng 1000 cho khung 16:9 sẽ ra 563 thay vì 562,5. Sai lệch này không ảnh hưởng gì với ảnh web nhưng nên chú ý khi xuất video, vì nhiều bộ mã hóa yêu cầu cả hai cạnh là số chẵn.
Ảnh in cỡ 10 nhân 15 centimet cần tệp bao nhiêu pixel?
Khổ đó tương đương 4 nhân 6 inch theo tỷ lệ 3:2. Ở mật độ 300 điểm trên mỗi inch, tệp cần khoảng 1800×1200 pixel. Nếu chỉ có ảnh 1200×800 thì bản in vẫn chấp nhận được ở mật độ 200 điểm, nhưng xuống dưới 150 điểm thì chi tiết bắt đầu nhòe khi nhìn gần.
Ảnh vuông và ảnh dọc 4:5 trên Instagram nên chọn cái nào?
Ảnh dọc 1080×1350 chiếm nhiều diện tích màn hình hơn khi người xem lướt bảng tin nên thường được chú ý lâu hơn. Ảnh vuông 1080×1080 lại an toàn hơn khi cùng một tệp còn dùng cho nơi khác. Nếu chỉ làm một bản, hãy dựng ở khung dọc và chừa lề an toàn để cắt vuông vẫn không mất nội dung chính.
Tỷ lệ 2,39:1 và 21:9 có phải một không?
Không. 21:9 quy đổi ra khoảng 2,33:1, còn định dạng điện ảnh rộng phổ biến là 2,39:1. Nhiều màn hình được quảng cáo là 21:9 thực chất có tỷ lệ 64:27 hoặc 43:18. Khi làm hậu kỳ, hãy nhập đúng cặp kích thước của định dạng đích thay vì dựa vào tên gọi thương mại.
Có xuất được kết quả ra tệp không?
Không, công cụ chỉ hiển thị và cho sao chép từng giá trị: cặp tỷ lệ, giá trị thập phân hoặc dòng khai báo CSS. Với công việc lặp lại nhiều lần, cách tiện là chép các cặp kích thước thường dùng vào một ghi chú riêng, hoặc lưu sẵn khuôn mẫu trong phần mềm thiết kế bạn đang dùng.
Từ khóa liên quan
- tính tỷ lệ khung hình
- aspect ratio calculator
- tỷ lệ 16:9 là bao nhiêu
- đổi kích thước ảnh giữ tỷ lệ
- kích thước ảnh chuẩn facebook
- kích thước ảnh og image
- kích thước ảnh instagram 2026
- kích thước video tiktok 9:16
- tỷ lệ 4:5 instagram
- kích thước ảnh bìa fanpage
- video 1920x1080 là tỷ lệ gì
- chuyển video ngang sang dọc
- css aspect ratio
- chống dịch chuyển bố cục cls
- kích thước ảnh in 10x15
- độ phân giải 4k là bao nhiêu
- tỷ lệ 21:9 màn hình siêu rộng
- tính chiều cao theo chiều rộng
- resize ảnh không méo
- công cụ tính tỷ lệ ảnh miễn phí
