Lazy loading ảnh và ảnh responsive (srcset): hướng dẫn cho người làm web
Hai câu hỏi quyết định một trang web tải ảnh hiệu quả hay lãng phí: ảnh nào cần tải ngay? và tải phiên bản lớn cỡ nào? HTML có sẵn câu trả lời cho cả hai: thuộc tính loading="lazy" và bộ đôi srcset, sizes. Bài này dành cho người tự làm website hoặc quản trị nội dung, giải thích cách dùng đúng và các lỗi hay gặp.
Lazy loading là gì?
Lazy loading (tải lười) nghĩa là chỉ tải ảnh khi người đọc sắp nhìn thấy nó. Một bài viết có 20 ảnh, nhưng nếu người đọc chỉ xem nửa trên rồi rời đi, 10 ảnh còn lại không cần tải. Trước đây phải dùng JavaScript, nay mọi trình duyệt hiện đại hỗ trợ sẵn bằng một thuộc tính:
<img src="anh.webp" alt="Mô tả ảnh" width="800" height="600" loading="lazy">
Lỗi thường gặp: lazy load ảnh đầu trang
Nhiều plugin và theme tự gắn loading="lazy" cho mọi ảnh, kể cả ảnh banner đầu trang. Kết quả: trình duyệt hoãn tải đúng ảnh quan trọng nhất, làm chỉ số LCP chậm đi rõ rệt. Quy tắc: ảnh nằm trong màn hình đầu tiên không lazy load; ảnh lớn nhất trong đó nên có thêm fetchpriority="high".
Đừng quên width và height
Ảnh lazy load xuất hiện muộn hơn, nên nếu không khai báo kích thước, nội dung sẽ bị đẩy xuống khi ảnh hiện ra. Luôn khai báo width và height đúng tỉ lệ ảnh.
Ảnh responsive với srcset và sizes
Màn hình điện thoại rộng khoảng 400 pixel, màn hình máy tính 1400 pixel hoặc hơn. Dùng chung một ảnh 1800 pixel cho tất cả thì điện thoại tải thừa rất nhiều. srcset cho phép bạn khai báo nhiều phiên bản, trình duyệt tự chọn bản phù hợp:
<img src="anh-1200.webp" srcset="anh-600.webp 600w, anh-1200.webp 1200w, anh-1800.webp 1800w" sizes="(max-width: 768px) 100vw, 720px" alt="Mô tả ảnh" width="1200" height="800">
- srcset liệt kê các file và chiều rộng thật của từng file (đơn vị
w). - sizes cho trình duyệt biết ảnh sẽ hiển thị rộng bao nhiêu: ở ví dụ trên là toàn màn hình trên điện thoại, 720 pixel trên máy tính.
- Trình duyệt kết hợp hai thông tin này với mật độ điểm ảnh của màn hình để chọn file nhỏ nhất mà vẫn nét.
Để tạo các phiên bản 600, 1200, 1800 pixel, dùng công cụ đổi kích thước ảnh rồi chuyển sang WEBP. Nếu bạn dùng WordPress, hệ thống đã tự tạo nhiều kích thước và tự sinh srcset khi bạn chèn ảnh.
Thẻ picture: chọn định dạng
Khi muốn phục vụ AVIF cho trình duyệt hỗ trợ và WEBP hoặc JPG cho phần còn lại, dùng thẻ <picture>. Trình duyệt đọc từ trên xuống và dùng nguồn đầu tiên nó hỗ trợ; thẻ <img> bên trong là phương án dự phòng và cũng là nơi đặt alt, width, height, loading.
Checklist nhanh
- Ảnh lớn nhất màn hình đầu: không lazy, có
fetchpriority="high". - Mọi ảnh khác:
loading="lazy". - Mọi ảnh: có
width,heightvàalt. - Ảnh rộng hơn khoảng 800 pixel: có
srcsetvàsizes. - Định dạng: WEBP hoặc AVIF, có dự phòng nếu cần.
Câu hỏi thường gặp
Lazy loading có ảnh hưởng SEO không?
Lazy loading bằng thuộc tính loading="lazy" có sẵn của trình duyệt không gây hại cho SEO; Googlebot hiểu và vẫn lập chỉ mục được ảnh. Rủi ro chỉ đến từ các script lazy load tự viết không chuẩn, khiến ảnh không bao giờ được tải nếu không có thao tác cuộn.
Ảnh nền CSS có lazy load được không?
Thuộc tính loading chỉ áp dụng cho thẻ img và iframe. Với ảnh nền CSS, bạn cần JavaScript (ví dụ Intersection Observer) để chỉ gắn ảnh nền khi phần tử sắp xuất hiện, hoặc chuyển ảnh nền quan trọng thành thẻ img.
Có cần srcset nếu ảnh đã nhỏ?
Ảnh hiển thị dưới khoảng 600 pixel và đã được tối ưu thì srcset không mang lại nhiều lợi ích. srcset phát huy tác dụng nhất với ảnh lớn như banner, ảnh bìa bài viết, ảnh sản phẩm chính.
Làm sao biết ảnh nào là ảnh LCP của trang?
Mở trang bằng PageSpeed Insights hoặc Chrome DevTools (tab Performance hoặc Lighthouse). Báo cáo sẽ chỉ rõ phần tử LCP, thường là ảnh banner hoặc ảnh bìa bài viết. Đó chính là ảnh không nên lazy load và nên thêm fetchpriority cao.
Thuộc tính decoding="async" có cần không?
Thuộc tính này gợi ý trình duyệt giải mã ảnh không đồng bộ để không chặn việc hiển thị nội dung khác. Thêm vào ảnh bên dưới màn hình đầu là vô hại; với ảnh LCP, hiệu quả không đáng kể nên không bắt buộc.
Tóm lại
Lazy loading quyết định khi nào tải ảnh, srcset quyết định tải cỡ nào. Kết hợp với định dạng hiện đại và khai báo kích thước đầy đủ, trang của bạn sẽ chỉ tải đúng những gì người đọc thực sự cần.
