Tối ưu ảnh cho website: 6 việc giúp trang tải nhanh hơn
Trên phần lớn website, ảnh là thứ chiếm nhiều dung lượng nhất. Một trang bán hàng với vài chục ảnh sản phẩm chưa tối ưu có thể nặng hàng chục MB, khiến khách dùng điện thoại phải chờ vài giây mới thấy nội dung — và nhiều người sẽ rời đi trước đó. Ảnh lớn ở đầu trang cũng thường là yếu tố quyết định chỉ số LCP (Largest Contentful Paint), một trong ba chỉ số Core Web Vitals mà Google dùng để đánh giá trải nghiệm trang.
Tin tốt là tối ưu ảnh không đòi hỏi kỹ thuật phức tạp. Dưới đây là sáu việc, xếp theo thứ tự hiệu quả.
1. Đưa ảnh về đúng kích thước hiển thị
Đây là việc tiết kiệm nhiều nhất. Ảnh chụp điện thoại rộng 4000 pixel nhưng khung hiển thị trên website thường chỉ rộng 800–1200 pixel. Tải ảnh gốc lên nghĩa là bắt người xem tải gấp 10–20 lần dữ liệu cần thiết.
Quy tắc đơn giản: chiều rộng ảnh bằng khoảng 1,5–2 lần chiều rộng khung hiển thị (để nét trên màn hình độ phân giải cao), và không lớn hơn thế. Dùng công cụ đổi kích thước trước khi tải ảnh lên website.
2. Dùng định dạng hiện đại
WEBP nhẹ hơn JPG khoảng 25–35% ở cùng chất lượng và hỗ trợ nền trong suốt; AVIF còn nhẹ hơn nữa với ảnh lớn. Mọi trình duyệt hiện đại đều hỗ trợ cả hai. Đọc thêm: WEBP là gì và AVIF là gì.
3. Nén ở mức chất lượng hợp lý
Với ảnh trên web, mức chất lượng 75–85 là điểm cân bằng tốt: dung lượng giảm mạnh mà mắt thường khó nhận ra khác biệt. Công cụ Nén ảnh của Convert.com.vn dùng WEBP chất lượng 75 với chế độ nén kỹ.
Chúng tôi thử với một ảnh minh hoạ 1536×1024 (bản JPG gốc 116 KB): sau khi nén, ảnh còn khoảng 39 KB — giảm hơn 65% — mà khi xem trên màn hình gần như không phân biệt được.
4. Luôn khai báo width và height
Khi thẻ <img> không có thuộc tính width và height, trình duyệt không biết trước ảnh cao bao nhiêu, nên khi ảnh tải xong nội dung bên dưới bị đẩy xuống đột ngột. Hiện tượng này làm tăng chỉ số CLS (Cumulative Layout Shift) và gây khó chịu khi người đọc đang đọc dở hoặc sắp bấm nhầm. Chỉ cần khai báo đúng tỉ lệ, CSS vẫn có thể co giãn ảnh theo màn hình.
5. Lazy loading cho ảnh bên dưới
Thêm loading="lazy" cho các ảnh nằm ngoài màn hình đầu tiên: trình duyệt chỉ tải chúng khi người đọc cuộn gần tới. Trang đầu tiên hiện nhanh hơn và người không cuộn hết trang không phải tải ảnh vô ích. Chi tiết trong bài Lazy loading ảnh và ảnh responsive.
6. Ưu tiên ảnh lớn nhất đầu trang
Ngược lại với mục 5, ảnh lớn nhất ở màn hình đầu (ảnh banner, ảnh bìa bài viết) không được lazy load. Hãy thêm fetchpriority="high" để trình duyệt tải nó sớm nhất có thể. Đây thường là cách cải thiện LCP nhanh nhất.
Đo kết quả thế nào?
- PageSpeed Insights (pagespeed.web.dev): nhập địa chỉ trang, xem điểm và các gợi ý liên quan tới ảnh như "Properly size images", "Serve images in next-gen formats".
- Google Search Console → mục Core Web Vitals: xem dữ liệu thật từ người dùng Chrome.
- Ngưỡng tốt theo Google: LCP dưới 2,5 giây, CLS dưới 0,1, INP dưới 200 mili giây.
Câu hỏi thường gặp
Nén ảnh bao nhiêu là đủ?
Không có con số cố định cho mọi ảnh. Hướng dẫn thực tế: ảnh lớn đầu trang nên dưới khoảng 200 KB, ảnh trong bài viết dưới khoảng 100 KB. Nếu ảnh vẫn nặng hơn mức đó sau khi nén, nguyên nhân thường là kích thước pixel còn quá lớn.
Plugin tối ưu ảnh có cần không?
Với WordPress và các nền tảng lớn, plugin tối ưu ảnh giúp tự động hoá việc nén và chuyển sang WEBP cho mọi ảnh tải lên, rất đáng dùng nếu website có nhiều ảnh. Dù có plugin, bạn vẫn nên thu nhỏ ảnh về kích thước hợp lý trước khi tải lên.
CDN có giúp ảnh tải nhanh hơn không?
Có. CDN đặt bản sao ảnh ở nhiều máy chủ gần người xem, giảm thời gian chờ. Nhiều CDN còn tự chuyển định dạng và thu nhỏ ảnh theo thiết bị. Tuy nhiên CDN không thay thế được việc tối ưu ảnh gốc.
Tóm lại
Đúng kích thước, đúng định dạng, nén vừa phải, khai báo width/height, lazy load ảnh bên dưới và ưu tiên ảnh đầu trang. Sáu việc này thường giảm dung lượng ảnh của một trang xuống còn một phần nhỏ và cải thiện rõ rệt điểm Core Web Vitals.
