Aspect ratio

Aspect ratio là gì?

Aspect ratio (tỷ lệ khung hình) là tỷ số giữa chiều rộng và chiều cao của một hình ảnh, được viết dưới dạng a:b, ví dụ: 16:9, 4:3, 1:1 hoặc 21:9. Đây không phải là kích thước tuyệt đối (đơn vị pixel), mà là mối quan hệ toán học giữa hai cạnh — nghĩa là hình ảnh 1600×900 px, 800×450 px hay 320×180 px đều có cùng aspect ratio 16:9.

Trong bối cảnh web và SEO hình ảnh, aspect ratio giúp trình duyệt hiểu cách hiển thị ảnh đúng tỷ lệ gốc khi tải — tránh biến dạng (stretching), cắt xén bất ngờ hoặc khoảng trống thừa do thiếu thông tin bố cục.

Tại sao quan trọng trong SEO?

Aspect ratio ảnh hưởng gián tiếp nhưng rõ rệt đến trải nghiệm người dùng và hiệu suất kỹ thuật — hai yếu tố nền tảng của Image SEO:

• Cải thiện Core Web Vitals: Khi ảnh có aspect ratio rõ ràng (qua thuộc tính width và height hoặc CSS aspect-ratio), trình duyệt có thể dành sẵn không gian hiển thị trước khi ảnh tải xong → giảm hiện tượng layout shift (CLS – Cumulative Layout Shift), một chỉ số xếp hạng quan trọng.
• Hỗ trợ responsive design: Tỷ lệ khung hình ổn định giúp ảnh co dãn mượt trên mọi thiết bị mà không bị méo hoặc tràn khỏi container.
• Tăng độ tin cậy với công cụ tìm kiếm: Google khuyến nghị khai báo kích thước ảnh để tối ưu hóa việc render. Thiếu thông tin này khiến trình duyệt phải đo lại layout sau khi ảnh tải → làm chậm thời gian tương tác (INP) và tăng nguy cơ xếp hạng thấp hơn.
• Ảnh hưởng đến rich results: Một số định dạng hiển thị mở rộng (như AMP, Google Images carousel) yêu cầu ảnh tuân thủ tỷ lệ nhất định để xuất hiện trong kết quả đặc biệt.

Cách hoạt động

Browser sử dụng aspect ratio để tính toán diện tích hiển thị ban đầu của thẻ <img>. Khi bạn khai báo rõ width="800" height="450" (tương đương 16:9), trình duyệt sẽ dành vùng 800×450 px ngay từ đầu — dù ảnh chưa tải xong. Nếu không khai báo, trình duyệt phải chờ ảnh tải xong mới biết kích thước thật → gây nhảy nội dung.

Từ Chrome 88+, thuộc tính CSS aspect-ratio: 16 / 9 cho phép kiểm soát linh hoạt hơn — đặc biệt khi dùng với width: 100% hoặc max-width, mà không cần khai báo kích thước tuyệt đối trong HTML.

Hướng dẫn thực hiện

1. Xác định aspect ratio chuẩn cho từng mục đích:
   • Bài viết blog: 16:9 hoặc 4:3 (ưu tiên 16:9 cho thumbnail)
   • Ảnh sản phẩm: 1:1 (vuông) hoặc 4:5 (dọc) — phù hợp với đa số nền tảng thương mại điện tử
   • Ảnh banner: 16:9 hoặc 21:9 (nếu full màn hình)
   • Ảnh avatar/ảnh đại diện: luôn dùng 1:1
2. Khai báo kích thước trong HTML:

   <img src="anh.jpg" width="1200" height="675" alt="Mô tả ảnh">

   Lưu ý: Giá trị width và height nên khớp chính xác với tỷ lệ gốc của file ảnh — không ép kích thước sai lệch.

3. Dùng CSS aspect-ratio cho linh hoạt:

   img.product-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

   Phù hợp khi ảnh cần co dãn theo container nhưng giữ nguyên tỷ lệ — kết hợp với object-fit để kiểm soát cách cắt/hiện.

4. Thiết lập srcset và sizes đồng bộ: Đảm bảo các phiên bản ảnh trong srcset đều có cùng aspect ratio — nếu khác nhau, trình duyệt có thể chọn sai ảnh gây méo.
5. Kiểm tra bằng công cụ: Dùng Lighthouse (trong DevTools) → tab “SEO” và “Performance” để phát hiện ảnh thiếu width/height hoặc gây CLS cao.

Lỗi thường gặp

Lỗi	Hệ quả	Cách khắc phục
Không khai báo width và height	Tăng CLS, ảnh nhảy khi tải, giảm điểm Core Web Vitals	Thêm thuộc tính vào thẻ <img>; nếu dùng CMS, cấu hình tự động sinh kích thước từ metadata ảnh
Dùng width/height sai tỷ lệ so với ảnh gốc	Ảnh bị kéo giãn hoặc bóp méo khi hiển thị	Luôn kiểm tra lại tỷ lệ: chia chiều rộng cho chiều cao → rút gọn phân số (ví dụ: 1200/900 = 4/3)
Dùng CSS width: 100%; mà không có aspect-ratio hoặc padding-top thay thế	Container co lại, ảnh bị đè hoặc mất chiều cao	Áp dụng aspect-ratio (nếu hỗ trợ trình duyệt), hoặc dùng kỹ thuật padding-top % cho IE/legacy
Ảnh trong <picture> có aspect ratio khác nhau giữa các <source>	Trình duyệt chọn ảnh không phù hợp → layout shift mạnh	Đảm bảo tất cả ảnh trong <picture> có cùng tỷ lệ — kiểm tra bằng script hoặc quy trình xử lý ảnh tự động

Ví dụ thực tế

Một trang tin tức Việt Nam đăng bài về du lịch Đà Lạt. Ảnh tiêu đề có kích thước gốc 2400×1350 px (tỷ lệ 16:9). Khi triển khai:

• HTML: <img src="dalat-banner.jpg" width="2400" height="1350" alt="Cảnh hồ Xuân Hương Đà Lạt">
• CSS bổ sung: img { max-width: 100%; height: auto; }
• Kết quả: Ảnh hiển thị đúng tỷ lệ trên desktop, tablet và mobile; không gây layout shift; đạt điểm CLS < 0.1 trong Lighthouse.

Ngược lại, cùng ảnh đó nhưng thiếu height → trên mạng chậm, ảnh tải muộn khiến tiêu đề dịch chuyển xuống dưới, người đọc cuộn mất tập trung → tăng tỷ lệ thoát (bounce rate), giảm thời gian ở trang.

Câu hỏi thường gặp

Aspect ratio có ảnh hưởng trực tiếp đến thứ hạng Google không?

Không — Google không xếp hạng dựa trên aspect ratio như một tín hiệu độc lập. Nhưng nó ảnh hưởng mạnh đến Core Web Vitals (đặc biệt CLS và INP), vốn là yếu tố xếp hạng xác nhận. Vì vậy, đây là yếu tố gián tiếp nhưng thiết yếu.

Có nên dùng aspect ratio khác nhau cho ảnh trên mobile và desktop?

Tùy trường hợp. Một số trang dùng ảnh dọc (4:5) trên mobile và ngang (16:9) trên desktop — nhưng phải đảm bảo: (1) Cùng một thẻ <img> không đổi tỷ lệ đột ngột; (2) Dùng <picture> + <source media> để kiểm soát chính xác; (3) Kiểm tra layout shift ở mọi breakpoint.

Có thể tự động sinh aspect ratio từ file ảnh không?

Có thể thay đổi tùy hệ thống. Các nền tảng như WordPress (với plugin như Smush hoặc ShortPixel), Shopify (qua Liquid), hoặc framework như Next.js (với next/image) đều hỗ trợ tự động đọc kích thước ảnh và thêm width/height. Với website custom, cần xử lý qua script backend hoặc build-time tool (ví dụ: Sharp + Node.js).