Image dimensions

Image dimensions là gì?

Image dimensions (kích thước hình ảnh) là số đo thực tế của một file ảnh, tính bằng pixel — gồm chiều rộng và chiều cao. Ví dụ: một ảnh có kích thước 1200x800 nghĩa là nó rộng 1200 pixel và cao 800 pixel. Đây là thông số kỹ thuật cố định của file ảnh, không phụ thuộc vào cách hiển thị trên trình duyệt.

Khi nhúng ảnh vào trang web, bạn nên khai báo rõ kích thước này trong thẻ <img> thông qua hai thuộc tính bắt buộc: width và height. Việc này giúp trình duyệt biết trước không gian cần dành cho ảnh ngay từ lúc tải HTML — từ đó tránh hiện tượng layout shift (dịch chuyển bố cục).

Tại sao quan trọng trong SEO?

Image dimensions ảnh hưởng trực tiếp đến tốc độ tải trang, trải nghiệm người dùng (UX) và điểm Core Web Vitals — đặc biệt là chỉ số Cumulative Layout Shift (CLS). Google coi CLS là một trong ba yếu tố xếp hạng chính của Core Web Vitals từ năm 2021.

Một trang có nhiều ảnh không khai báo width/height sẽ gây ra layout shift khi ảnh lần lượt tải xong, làm nội dung bị đẩy xuống, nút bấm dịch chuyển, hoặc người dùng nhấn nhầm. Điều này làm tăng tỷ lệ thoát (bounce rate) và giảm thời gian ở lại — cả hai đều là tín hiệu tiêu cực với thuật toán tìm kiếm.

Ngoài ra, việc khai báo đúng kích thước còn hỗ trợ công cụ tìm kiếm hiểu ngữ cảnh ảnh tốt hơn khi kết hợp với alt, srcset và cấu trúc responsive — từ đó cải thiện khả năng xuất hiện trong kết quả tìm kiếm hình ảnh (Google Images).

Cách hoạt động

Khi trình duyệt đọc HTML, nó phân tích DOM trước khi tải tài nguyên. Nếu thẻ <img> thiếu width và height, trình duyệt không biết ảnh sẽ chiếm bao nhiêu không gian — nên để trống vùng hiển thị. Khi ảnh tải xong, trình duyệt phải vẽ lại bố cục (reflow), gây layout shift.

Ngược lại, nếu bạn khai báo rõ width="600" height="400", trình duyệt sẽ dành sẵn một khung 600×400 pixel ngay từ đầu — dù ảnh chưa tải xong. Kết quả: bố cục ổn định, không dịch chuyển, UX mượt mà.

Lưu ý: Giá trị width/height trong HTML không thay đổi kích thước thực tế của ảnh — chúng chỉ là hướng dẫn về kích thước hiển thị ban đầu. Để thay đổi kích thước ảnh thực tế, bạn phải chỉnh sửa file ảnh hoặc dùng CSS object-fit + max-width đúng cách.

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

1. Xác định kích thước gốc: Mở ảnh bằng phần mềm chỉnh sửa (Photoshop, GIMP) hoặc dùng lệnh dòng lệnh (identify image.jpg nếu dùng ImageMagick). Ghi lại chiều rộng × chiều cao tính bằng pixel.
2. Thêm thuộc tính vào thẻ img: Viết đầy đủ width và height theo giá trị vừa xác định. Ví dụ:
   <img src="banner.jpg" width="1200" height="400" alt="Banner khuyến mãi tháng 7">
3. Kết hợp với CSS responsive: Dùng max-width: 100%; height: auto; để ảnh co dãn linh hoạt trên thiết bị nhỏ — nhưng vẫn giữ tỷ lệ và không gây layout shift nhờ đã có width/height gốc.
4. Với ảnh nền hoặc ảnh dùng CSS: Không áp dụng width/height HTML. Thay vào đó, đặt kích thước rõ ràng cho phần tử cha hoặc dùng aspect-ratio (CSS Level 4, hỗ trợ từ Chrome 88+, Firefox 89+, Safari 15.4+).
5. Kiểm tra sau triển khai: Dùng Lighthouse (trong DevTools) → kiểm tra chỉ số CLS. Nếu báo “Image elements do not have explicit width and height”, cần rà soát lại toàn bộ thẻ <img>.

Lỗi thường gặp

• Không khai báo width/height cho bất kỳ ảnh nào: Gây layout shift nghiêm trọng, đặc biệt trên trang có nhiều ảnh cùng lúc. Cách khắc phục: Dùng script tự động thêm thuộc tính (ví dụ: JavaScript quét tất cả <img> và lấy kích thước từ naturalWidth/naturalHeight), nhưng tốt nhất nên xử lý ở bước xây dựng HTML.
• Khai báo sai kích thước: Nhập nhầm số hoặc dùng giá trị cố định không khớp ảnh thật (ví dụ: ảnh thực là 800×600 nhưng ghi width="400" height="300"). Cách khắc phục: Kiểm tra lại kích thước gốc bằng công cụ tin cậy; không suy luận từ CSS hay kích thước hiển thị.
• Dùng CSS để ghi đè hoàn toàn width/height HTML: Ví dụ img { width: 100%; height: 200px; } — điều này vô hiệu hóa lợi ích của thuộc tính HTML. Cách khắc phục: Chỉ dùng max-width: 100%; height: auto; hoặc aspect-ratio để duy trì tỷ lệ.
• Bỏ qua ảnh SVG hoặc ảnh nền: SVG vector không cần width/height nếu có viewBox, nhưng nếu nhúng như <img src="logo.svg">, vẫn nên khai báo để tránh layout shift. Với ảnh nền CSS, dùng aspect-ratio hoặc padding-top hack nếu cần.

Ví dụ thực tế

Dưới đây là bảng so sánh hai cách viết thẻ ảnh — một đúng, một sai — và tác động lên CLS:

Cách viết	HTML mẫu	CLS (ước lượng)	Ghi chú
Sai	<img src="product.jpg" alt="Áo thun cotton">	0.25 – 0.45	Layout shift rõ rệt khi ảnh tải chậm hoặc mạng yếu
Đúng	<img src="product.jpg" width="600" height="600" alt="Áo thun cotton"> <style>img { max-width: 100%; height: auto; }</style>	< 0.05	CLS đạt mức “tốt” theo tiêu chuẩn Google (CLS < 0.1)

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

Image dimensions có cần khớp 1:1 với kích thước file ảnh không?

Có. Giá trị width và height trong thẻ <img> phải bằng đúng chiều rộng và chiều cao thực tế của file ảnh (tính bằng pixel). Nếu dùng ảnh được scale bằng CSS, bạn vẫn phải khai báo kích thước gốc — không phải kích thước hiển thị.

Có thể dùng đơn vị % hoặc em cho width/height không?

Không. Thuộc tính width và height trong HTML chỉ chấp nhận giá trị số nguyên (pixel) hoặc giá trị auto (không hỗ trợ %, em, rem). Dùng đơn vị khác sẽ khiến trình duyệt bỏ qua hoặc xử lý không đúng — dẫn đến layout shift.

Ảnh động (GIF/WebP) hoặc ảnh lazy-load có cần khai báo dimensions không?

Có. Dù ảnh được tải muộn (loading="lazy") hay là GIF/WebP, trình duyệt vẫn cần biết kích thước ban đầu để dành chỗ. Lazy loading không loại trừ nhu cầu về width/height — ngược lại, nó càng làm việc này trở nên quan trọng hơn để tránh dịch chuyển khi ảnh bắt đầu tải.