Hình ảnh đáp ứng
Việc triển khai hình ảnh phục vụ các 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 ngăn người dùng di động tải xuống hình ảnh có kích thước trên máy tính để bàn gây lãng phí băng thông và tải trang chậm. HTML cung cấp thuộc tính srcset để chuyển đổi độ phân giải và thành phần hình ảnh để chỉ đạo nghệ thuật - phục vụ các loại cây trồng hoặc định dạng khác nhau cho các thiết bị khác nhau. Các khung hiện đại như Next.js tự động tạo hình ảnh đáp ứng, tạo nhiều kích thước từ một nguồn duy nhất và cung cấp phiên bản tối ưu dựa trên chế độ xem. WebP và AVIF fAVIFt với JPEG fallbacJPEGrsẽ giảm băng thông. Hình ảnh phản hồi rất quan trọng đối với hiệu suất của Core Web Vitals — hình ảnh quá khổ sẽ trì hoãn Thời gian hiển thị nội dung lớn nhất, chỉ số hiệu suất tải chính ảnh hưởng đến cả trải nghiệm người dùng và thứ hạng của công cụ tìm kiếm.