Tối Ưu Hình Ảnh Trong HTML Cho SEO: Thẻ <img>, <picture>, alt & Core Web Vitals

Bảng Tóm Tắt Kỹ Thuật (Quick Facts)

Bảng thông số kỹ thuật tóm tắt các quy chuẩn quan trọng nhất khi khai báo thẻ ảnh img, giúp tối ưu chỉ số Core Web Vitals và tăng khả năng hiển thị trên Google Image Search.

Quy Chuẩn Viết Thuộc Tính alt Mô Tả Thực Thể Thực Tế

Google Image Search và thuật toán phân tích thị giác dựa vào văn bản trong thẻ alt cùng với ngữ cảnh xung quanh ảnh để xác định nội dung bức hình:

<!-- Mô tả chính xác đối tượng trong hình -->
<img
  src="/images/lop-hoc-seo-danh-nolan.webp"
  alt="Học viên thảo luận phân tích mô hình DLN trong lớp học SEO của Danh Nolan"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
/>

<!-- Lỗi: Thiếu alt hoàn toàn -->
<img src="/images/IMG_1024.jpg">

<!-- Lỗi: Nhồi từ khóa spam, vô nghĩa -->
<img
  src="/images/hinh.jpg"
  alt="hoc seo, dao tao seo gia re, khoa hoc seo hcm"
>

Bảo Vệ Core Web Vitals: Chống Nhảy Khung Hình (CLS) & Tối Ưu LCP

Hình ảnh là thủ phạm hàng đầu gây suy giảm điểm số trải nghiệm người dùng (Core Web Vitals). Hai sai lầm kinh điển cần tránh:

• Quên khai báo thuộc tính width và height: Khi ảnh chưa tải về, trình duyệt không biết kích thước của bức ảnh nên mặc định xem chiều cao là 0px. Khi ảnh tải xong, nội dung bài viết bị đẩy tụt xuống dưới đột ngột, gây ra chỉ số Cumulative Layout Shift (CLS) cao chót vót. Hãy luôn khai báo width và height gốc trên thẻ HTML (CSS có thể dùng height: auto; max-width: 100%).
• Lazy load nhầm ảnh Hero đầu trang: Nếu bạn gắn loading="lazy" cho ảnh đại diện bài viết hoặc banner đầu trang, trình duyệt sẽ hoãn tải bức ảnh đó cho đến khi luồng kết xuất hoàn tất, khiến chỉ số Largest Contentful Paint (LCP) bị chậm đi từ 1 đến 2 giây. Với ảnh đầu trang, hãy giữ nguyên tải tức thì và có thể bổ sung fetchpriority="high".

Quy Trình Kiểm Tra Tối Ưu Hình Ảnh

Quy trình bốn bước thực tế giúp bạn rà soát toàn bộ tệp hình ảnh, phát hiện ảnh thiếu văn bản thay thế alt và tối ưu dung lượng tải trang cho người dùng di động.

Tài Nguyên Kỹ Thuật & Công Cụ Kiểm Tra Thực Tế

Bộ tài nguyên kỹ thuật dưới đây cung cấp các hướng dẫn từ Google Search Central, tài liệu web.dev về CLS cùng các công cụ đo lường hiệu suất hình ảnh chuyên sâu.