Nén ảnh là bước không thể bỏ qua trong quy trình tối ưu SEO, nhưng nhiều website đang làm sai: hoặc nén quá mạnh khiến ảnh vỡ hạt (pixelated), hoặc không nén đủ khiến trang tải chậm và điểm Core Web Vitals thấp. Cân bằng giữa chất lượng và dung lượng là nghệ thuật cần hiểu đúng kỹ thuật.
Theo HTTP Archive, ảnh chiếm trung bình 46% tổng dung lượng trang web. Tối ưu ảnh đúng cách có thể giảm 50-70% dung lượng trang mà người dùng gần như không nhận ra sự khác biệt về chất lượng.
Lossy vs Lossless: Chọn Phương Pháp Nào Cho SEO?
Nén lossy (mất dữ liệu) loại bỏ một số thông tin ảnh không quan trọng để giảm dung lượng mạnh. Nén lossless giữ nguyên 100% dữ liệu pixel nhưng chỉ giảm được 10-30% dung lượng. Với website thông thường, lossy ở mức quality 75-85% là điểm tối ưu — giảm 60-80% dung lượng mà chất lượng hiển thị trên màn hình gần như không thay đổi.
- ▸Lossy (JPEG, WebP lossy): Tối ưu cho ảnh chụp, ảnh sản phẩm, ảnh lifestyle — giảm 60-80% dung lượng
- ▸Lossless (PNG, WebP lossless): Tối ưu cho logo, icon, ảnh kỹ thuật số cần độ sắc nét tuyệt đối
- ▸WebP hỗ trợ cả hai mode: WebP lossy nhẹ hơn JPEG 25-35%, WebP lossless nhẹ hơn PNG 26%
- ▸AVIF (mới nhất): Nhẹ hơn WebP 20% nhưng chưa được hỗ trợ rộng rãi bằng WebP
Thông Số Quality Tối Ưu Cho Từng Loại Ảnh
Không phải loại ảnh nào cũng cần cùng mức quality. Hiểu đúng ngưỡng tối ưu giúp bạn giảm dung lượng tối đa mà không ảnh hưởng trải nghiệm mua hàng hay đọc bài:
- ▸Ảnh hero/banner website: Quality 85 (WebP) — cần độ sắc nét cao, người dùng nhìn rõ từng chi tiết
- ▸Ảnh sản phẩm e-commerce: Quality 80-82 (WebP) — cân bằng tốt giữa chất lượng và tốc độ tải
- ▸Ảnh thumbnail blog: Quality 75-78 (WebP) — hiển thị nhỏ, không cần độ phân giải quá cao
- ▸Ảnh trong bài viết: Quality 78-80 (WebP) — đa số xem trên mobile, ít cần zoom
- ▸Ảnh nền/background: Quality 70-75 (WebP) — thường bị overlay bởi text, không cần sắc nét tuyệt đối
Nguyên tắc kiểm tra: Xem ảnh nén ở 100% zoom trên màn hình. Nếu bạn không thấy "hiện vật nén" (compression artifacts) rõ ràng thì chất lượng đã đạt yêu cầu. Đừng so sánh với ảnh gốc — hãy đánh giá bằng mắt người dùng thực tế.
Kích Thước Ảnh (Resolution) và Ảnh Hưởng SEO
Nén chất lượng không phải là cách duy nhất giảm dung lượng. Resize ảnh về đúng kích thước hiển thị là bước quan trọng không kém. Một ảnh 4000x3000px được scale xuống hiển thị 800x600px trên web vẫn tải nguyên file 4000px — lãng phí bandwidth 25 lần mà không có lợi ích SEO nào.
- ▸Desktop hero/banner: Max 1920px chiều rộng (1440px là đủ với 95% màn hình)
- ▸Ảnh trong bài viết: Max 1200px chiều rộng
- ▸Ảnh sản phẩm: 800-1200px — đủ zoom 2x cho màn hình Retina
- ▸Thumbnail blog/card: 400-600px chiều rộng là đủ
- ▸Kết hợp srcset để serve ảnh đúng kích thước cho từng thiết bị
Progressive JPEG vs Baseline JPEG: Cái Nào Tốt Hơn Cho SEO?
Progressive JPEG load theo từng lớp từ mờ đến rõ — người dùng thấy ảnh ngay lập tức dù chưa load xong. Baseline JPEG load từ trên xuống dưới. Với Google PageSpeed, progressive JPEG được đánh giá tốt hơn về perceived performance, giúp cải thiện điểm LCP. Tuy nhiên, WebP progressive thậm chí còn tốt hơn cả hai.
Nén Ảnh Hàng Loạt: Tiết Kiệm Thời Gian Tối Đa
Website có 500-5000 ảnh sản phẩm không thể nén thủ công từng ảnh. Quy trình nén hàng loạt cần: thiết lập thông số quality một lần, áp dụng cho toàn bộ lô ảnh, xuất file ra thư mục riêng (không ghi đè gốc), và tự động chuyển đổi sang WebP. Phần mềm tối ưu ảnh SEO hàng loạt thực hiện đúng quy trình này — xử lý song song 4 ảnh, hoàn thành 1000 ảnh trong 8-10 phút.