Hình ảnh đáp ứng
Cách triển khai hình ảnh cung cấp kích thước hoặc định dạng khác nhau dựa trên thiết bị, kích thước màn hình và tốc độ kết nối của người xem.
Hình ảnh đáp ứng giúp người dùng di động không phải tải ảnh kích thước desktop gây lãng phí băng thông và làm chậm trang. HTML cung cấp thuộc tính srcset để chuyển đổi độ phân giải và phần tử picture để điều hướng nghệ thuật, tức là phục vụ các bản cắt hoặc định dạng khác nhau cho từng thiết bị. Các framework hiện đại như Next.js tự động tạo nhiều kích thước từ một nguồn ảnh và phục vụ phiên bản tối ưu theo viewport. Định dạng WebP và AVIF kèm dự phòng JPEG tiếp tục giảm băng thông. Hình ảnh đáp ứng rất quan trọng với Core Web Vitals: ảnh quá lớn sẽ làm chậm Largest Contentful Paint, chỉ số tải chính ảnh hưởng đến trải nghiệm người dùng và thứ hạng tìm kiếm.