Image SEO

Responsive images

Sử dụng thuộc tính srcset và sizes trong thẻ img để cung cấp phiên bản hình ảnh phù hợp với kích thước màn hình thiết bị.

3 lượt xem Cập nhật: 27/05/2026

Responsive images là gì?

Responsive images (hình ảnh đáp ứng) là cách hiển thị hình ảnh sao cho phù hợp với kích thước màn hình, độ phân giải và khả năng hiển thị của thiết bị người dùng — từ điện thoại nhỏ đến màn hình 4K trên máy tính để bàn. Khác với hình ảnh cố định (chỉ có một file duy nhất), responsive images cung cấp nhiều phiên bản cùng nội dung nhưng khác kích thước hoặc mật độ điểm ảnh (pixel density), giúp trình duyệt tự chọn phiên bản tối ưu nhất.

Đây không phải là kỹ thuật CSS hay JavaScript, mà là tính năng được hỗ trợ trực tiếp bởi HTML5 thông qua các thuộc tính srcset, sizes, và thẻ <picture>.

Tại sao quan trọng trong SEO?

Responsive images ảnh hưởng trực tiếp đến ba yếu tố xếp hạng chính: tốc độ tải trang, trải nghiệm người dùng (UX) và khả năng tương thích đa thiết bị — tất cả đều nằm trong tiêu chí đánh giá của Google.

Tốc độ trang tăng rõ rệt: Trình duyệt chỉ tải phiên bản hình ảnh phù hợp — ví dụ: điện thoại không tải ảnh 3000px mà chỉ tải ảnh 600px — giảm dung lượng tải trung bình 40–70% so với ảnh cố định.
Giảm tỷ lệ thoát (bounce rate): Trang tải nhanh hơn → người dùng ở lại lâu hơn → tín hiệu tích cực gửi tới công cụ tìm kiếm.
Hỗ trợ Core Web Vitals: Đóng góp vào chỉ số Largest Contentful Paint (LCP) và Cumulative Layout Shift (CLS). Hình ảnh không khai báo width/height hoặc thiếu sizes dễ gây dịch chuyển bố cục khi tải xong.
Tối ưu hóa cho thiết bị di động: Google áp dụng Mobile-First Indexing — nếu hình ảnh không hiển thị đúng trên điện thoại, trang có thể bị đánh giá thấp dù trên desktop vẫn ổn.

Cách hoạt động

Trình duyệt đọc thuộc tính srcset để biết danh sách các nguồn ảnh và điều kiện lựa chọn (ví dụ: chiều rộng hiển thị hoặc mật độ pixel). Thuộc tính sizes mô tả kích thước hiển thị dự kiến của ảnh trên từng loại màn hình — giúp trình duyệt chọn file phù hợp *trước khi* bắt đầu tải.

Quy trình diễn ra theo thứ tự:

Trình duyệt xác định chiều rộng khung hiển thị (viewport width) và tỉ lệ pixel (devicePixelRatio).
Nó đọc giá trị sizes để biết ảnh sẽ chiếm bao nhiêu phần trăm viewport (ví dụ: sizes="(max-width: 768px) 100vw, 50vw").
Dựa vào kết quả, trình duyệt chọn phiên bản trong srcset có chiều rộng gần nhất hoặc mật độ cao hơn yêu cầu (ví dụ: image-600w.jpg 1x, image-1200w.jpg 2x).
Ảnh được tải và hiển thị — không có yêu cầu HTTP thừa, không có ảnh bị co dãn sai tỉ lệ.

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

Dưới đây là các bước triển khai chuẩn, an toàn và tương thích với mọi trình duyệt hiện đại (Chrome, Firefox, Safari, Edge từ phiên bản 2020 trở lên):

Chuẩn bị nhiều phiên bản ảnh: Tạo ít nhất 3 kích thước: nhỏ (400–600px), trung bình (800–1200px), lớn (1600–2400px). Nếu hỗ trợ Retina, thêm phiên bản nhân đôi (ví dụ: image@2x.jpg).

Sử dụng srcset với đơn vị w (width descriptor):

<img src="image-800w.jpg"
     srcset="image-400w.jpg 400w,
             image-800w.jpg 800w,
             image-1200w.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 960px) 50vw,
            33vw"
     alt="Mô tả ngắn, có từ khóa liên quan">

Bắt buộc khai báo width và height: Giúp trình duyệt dành sẵn không gian, tránh layout shift. Giá trị có thể là kích thước gốc (ví dụ: width="1200" height="800") hoặc dùng CSS aspect-ratio nếu cần linh hoạt hơn.
Không bỏ qua alt: Đây là yếu tố SEO hình ảnh bắt buộc. Mô tả ngắn gọn, chính xác, có chứa từ khóa tự nhiên — không nhồi nhét.
Kiểm tra bằng DevTools: Dùng tab Network → filter Img → thu nhỏ cửa sổ → reload → kiểm tra file nào được tải.

Lỗi thường gặp

Lỗi	Dấu hiệu	Cách khắc phục
Thiếu thuộc tính `sizes`	Trình duyệt luôn tải phiên bản lớn nhất dù trên mobile	Thêm `sizes` mô tả chính xác kích thước hiển thị theo media query — ví dụ: `sizes="(min-width: 960px) 33vw, 100vw"`
Dùng `srcset` với đơn vị `x` nhưng thiếu `sizes`	Hiệu quả thấp trên thiết bị có viewport thay đổi (gập, xoay)	Ưu tiên dùng `w` descriptor + `sizes`. Chỉ dùng `x` khi chắc chắn chỉ cần phân biệt mật độ (ví dụ: logo nhỏ, icon)
Ảnh không có `width`/`height` hoặc khai báo sai tỉ lệ	Gây layout shift, ảnh bị kéo giãn/méo	Luôn khai báo đúng kích thước gốc hoặc dùng `aspect-ratio: 4/3` trong CSS kèm `height: auto`

Ví dụ thực tế

Dưới đây là đoạn mã hình ảnh banner chuẩn SEO, hoạt động trên mọi thiết bị:

<figure>
  <img src="banner-800.jpg"
       srcset="banner-400.jpg 400w,
               banner-800.jpg 800w,
               banner-1200.jpg 1200w,
               banner-1600.jpg 1600w"
       sizes="(max-width: 480px) 100vw,
              (max-width: 960px) 80vw,
              1200px"
       width="1200" height="400"
       alt="Banner khuyến mãi tháng 10 – giảm đến 50% sản phẩm công nghệ">
  <figcaption>Khuyến mãi tháng 10 dành riêng cho khách hàng mới</figcaption>
</figure>

→ Trên điện thoại 400px: trình duyệt tải banner-400.jpg (400w).
→ Trên tablet 768px: tải banner-800.jpg (vì sizes quy định ảnh chiếm 80vw ≈ 614px → chọn file gần nhất).
→ Trên desktop lớn: tải banner-1200.jpg hoặc banner-1600.jpg tùy tỉ lệ pixel.

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

Responsive images có thay thế được lazy loading không?

Không. Responsive images chọn đúng phiên bản để tải, còn lazy loading quyết định khi nào tải. Hai kỹ thuật bổ sung lẫn nhau — nên dùng đồng thời: thêm thuộc tính loading="lazy" cho ảnh ngoài vùng nhìn.

Có cần nén ảnh trước khi tạo phiên bản responsive?

Có. Nén ảnh (WebP/AVIF) là bước bắt buộc trước khi xuất phiên bản. Một ảnh 1200px chưa nén có thể nặng hơn 3 ảnh 400px đã nén. Công cụ khuyên dùng: Squoosh.app, ImageOptim (macOS), hoặc plugin WordPress như ShortPixel.

Thẻ <picture> có bắt buộc không?

Không bắt buộc. Dùng <picture> chỉ khi cần thay đổi nội dung hình ảnh theo thiết bị (ví dụ: ảnh chân dung trên mobile, ảnh toàn cảnh trên desktop) hoặc định dạng (WebP cho trình duyệt hỗ trợ, JPEG cho trình duyệt cũ). Với hầu hết trường hợp — <img> với srcset + sizes là đủ và hiệu quả hơn.