Image SEO

Image decoding attribute

Thuộc tính HTML 'decoding' kiểm soát cách trình duyệt giải mã hình ảnh (async, sync, auto) nhằm tối ưu hiệu năng hiển thị.

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

Image decoding attribute là gì?

Thuộc tính decoding là một thuộc tính HTML được thêm vào thẻ <img> để hướng dẫn trình duyệt cách giải mã (decode) dữ liệu hình ảnh trước khi hiển thị. Giá trị hợp lệ gồm: async, sync và auto. Đây không phải thuộc tính hiển thị (không ảnh hưởng đến giao diện), mà là tín hiệu hiệu năng — giúp trình duyệt tối ưu thứ tự xử lý hình ảnh trong luồng kết xuất (rendering).

Tại sao quan trọng trong SEO?

Google xếp hạng trang dựa một phần vào trải nghiệm người dùng — đặc biệt là tốc độ tải và độ mượt khi cuộn (scrolling). Hình ảnh chiếm phần lớn dung lượng trang, và việc giải mã chúng tốn tài nguyên CPU/GPU. Nếu trình duyệt giải mã đồng bộ nhiều ảnh cùng lúc, nó có thể làm chậm việc hiển thị nội dung chính (ví dụ: tiêu đề, đoạn văn), gây trì hoãn First Contentful Paint (FCP) và Largest Contentful Paint (LCP) — hai chỉ số Core Web Vitals bắt buộc với SEO hiện đại.

Khi dùng decoding="async" cho ảnh không nằm trong vùng hiển thị ban đầu (above-the-fold), trình duyệt sẽ dời việc giải mã sang nền, không chặn luồng hiển thị. Điều này giúp cải thiện LCP trung bình từ 5–15% trên các trang có nhiều ảnh — theo báo cáo kiểm thử thực tế của WebPageTest và CrUX (Chrome User Experience Report). Ngoài ra, Google xác nhận đã sử dụng tín hiệu hiệu năng như thế này trong thuật toán xếp hạng từ năm 2021.

Cách hoạt động

Trình duyệt đọc HTML từng phần, xây dựng DOM rồi bắt đầu tải và xử lý tài nguyên. Với ảnh, quy trình gồm ba bước: tải (fetch), giải mã (decode), kết xuất (paint). Thuộc tính decoding can thiệp ở bước thứ hai:

  • auto: Trình duyệt quyết định tự động — thường tương đương sync cho ảnh above-the-fold và async cho ảnh dưới màn hình. Đây là giá trị mặc định nếu không khai báo.
  • async: Giải mã chạy bất đồng bộ, không chặn luồng kết xuất. Phù hợp với ảnh ngoài vùng nhìn (lazy-loaded hoặc ở cuối trang).
  • sync: Giải mã đồng bộ — trình duyệt đợi xong mới tiếp tục kết xuất phần sau. Chỉ nên dùng khi ảnh cần hiển thị ngay lập tức và chính xác về kích thước (ví dụ: logo trong header).

Lưu ý: decoding không thay đổi cách tải ảnh (vẫn tuân thủ loading, srcset…), cũng không ảnh hưởng đến nén ảnh hay định dạng file.

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

  1. Xác định ảnh cần tối ưu: Ưu tiên ảnh dưới màn hình (below-the-fold), ảnh trong khối <figure>, ảnh trong slider hoặc gallery.
  2. Thêm thuộc tính vào thẻ <img>: Dùng decoding="async" cho ảnh không cần hiển thị tức thì.
  3. Kết hợp với lazy loading: Kết hợp loading="lazy" và decoding="async" để tăng hiệu quả — trình duyệt vừa trì hoãn tải, vừa dời giải mã.
  4. Không áp dụng cho ảnh quan trọng: Tránh dùng async cho ảnh trong vùng hiển thị đầu tiên (header, banner, thumbnail sản phẩm nổi bật) — có thể gây nhấp nháy hoặc chậm hiển thị.
  5. Kiểm tra tương thích: Thuộc tính hỗ trợ trên mọi trình duyệt hiện đại (Chrome 78+, Firefox 69+, Safari 15.4+, Edge 79+). Không cần polyfill.

Lỗi thường gặp

  • Dùng decoding="async" cho tất cả ảnh: Gây chậm hiển thị ảnh quan trọng, làm giảm điểm LCP. Cách khắc phục: Chỉ áp dụng cho ảnh below-the-fold; kiểm tra bằng công cụ Lighthouse hoặc WebPageTest.
  • Gán sai giá trị như decoding="off" hoặc "defer": Trình duyệt bỏ qua giá trị không hợp lệ và quay về auto. Cách khắc phục: Chỉ dùng ba giá trị chuẩn: auto, async, sync.
  • Đặt decoding trên thẻ <picture> hoặc <source>: Thuộc tính chỉ hoạt động trên thẻ <img>. Cách khắc phục: Thêm trực tiếp vào thẻ <img> bên trong <picture>, không vào <source>.

Ví dụ thực tế

Dưới đây là so sánh hai cách viết — trước và sau khi áp dụng:

Trước tối ưu Sau tối ưu
<img src="blog-1.jpg" alt="Hướng dẫn SEO hình ảnh"> <img src="blog-1.jpg" alt="Hướng dẫn SEO hình ảnh" decoding="async" loading="lazy">
<img src="logo.png" width="120" height="40" alt="Logo công ty"> <img src="logo.png" width="120" height="40" alt="Logo công ty" decoding="sync">

Một ví dụ đầy đủ hơn với ảnh responsive:

<picture> <source media="(min-width: 768px)" srcset="hero-large.webp" type="image/webp"> <source srcset="hero-small.webp" type="image/webp"> <img src="hero-small.jpg" alt="Ảnh bìa bài viết SEO" width="800" height="400" decoding="async" loading="lazy"> </picture>

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

Thuộc tính decoding có thay thế được lazy loading không?

Không. decoding chỉ điều khiển cách giải mã sau khi ảnh đã được tải; còn loading="lazy" kiểm soát thời điểm tải ảnh. Hai thuộc tính bổ sung lẫn nhau — nên dùng cùng nhau để tối ưu toàn diện.

Decoding có ảnh hưởng đến khả năng thu thập (crawling) của Googlebot không?

Không. Googlebot không thực hiện giải mã ảnh — nó chỉ đọc HTML, phân tích alt, src, width/height và các thuộc tính cấu trúc. Thuộc tính decoding hoàn toàn vô hình với bot, nhưng lại ảnh hưởng gián tiếp qua hiệu năng người dùng — yếu tố xếp hạng.

Có cần thêm decoding cho ảnh SVG hoặc ảnh nền (CSS background-image)?

Không. Thuộc tính decoding chỉ áp dụng cho thẻ <img> và <iframe> (ít dùng). SVG vector không cần giải mã bitmap nên không hỗ trợ thuộc tính này. Ảnh nền CSS cũng không dùng được — vì không phải phần tử HTML có thể gắn thuộc tính.