Theo thống kê của Google, nếu trang web mất quá 3 giây để tải, hơn 53% người dùng di động sẽ rời bỏ ngay lập tức. Và phần lớn dung lượng tải trang lại tập trung ở các bức ảnh sản phẩm chưa được tối ưu hóa. Tối ưu ảnh không đơn thuần là làm giảm kích thước file mà là sự cân bằng nghệ thuật giữa chất lượng thị giác và dung lượng byte.
1. Sử dụng định dạng ảnh thế hệ mới (WebP & AVIF)
Hãy ngưng sử dụng PNG hoặc JPEG chất lượng gốc cho ảnh hiển thị web. Chuyển sang định dạng WebP giúp giảm dung lượng từ 30% đến 80% so với JPEG truyền thống mà không hề suy giảm chất lượng mắt thường có thể nhận biết. Hiện nay, 100% các trình duyệt hiện đại đều đã hỗ trợ WebP hoàn hảo.
2. Kích thước hiển thị thực tế (Responsive Images)
Đừng bắt một chiếc điện thoại iPhone có màn hình rộng 390px tải một bức hình sản phẩm có độ phân giải gốc 4000x3000px. Hãy cắt và render ảnh ở nhiều kích thước khác nhau (srcset) phù hợp với kích thước hiển thị của từng thiết bị. Sử dụng component `next/image` trong Next.js là giải pháp tự động hóa tuyệt vời cho vấn đề này.
Next.js Image tự động tối ưu hóa kích thước ảnh, định dạng WebP, và kích hoạt lazy loading theo vùng nhìn hiển thị của trình duyệt giúp cải thiện đáng kể chỉ số LCP (Largest Contentful Paint) của website.
3. Viết thẻ alt mô tả chuẩn SEO
Google Bot không thể 'nhìn' thấy ảnh như con người, nó hiểu ảnh thông qua văn bản thay thế (thẻ alt attribute). Hãy viết alt mô tả chân thực sản phẩm kèm từ khóa một cách tự nhiên. Ví dụ, thay vì để alt là `image_123.jpg` hoặc `ao_thun`, hãy viết `ao-thun-nam-posee-chat-cotton-mau-trang-co-tron`.
