Tối ưu hình ảnh website: giảm 90% dung lượng mà vẫn nét
Trong hầu hết website bán hàng chậm, thủ phạm không phải hosting mà là hình ảnh chưa được tối ưu. Ảnh chụp từ điện thoại thường 4–6 MB mỗi tấm; một trang danh mục 20 sản phẩm là gần 100 MB phải tải. Nén đúng cách có thể giảm 90% dung lượng mà mắt thường không thấy khác biệt.
Bước 1: Chọn kích thước đúng trước khi nén
Đây là bước bị bỏ qua nhiều nhất. Nếu khung hiển thị ảnh sản phẩm rộng 600 pixel, tải lên ảnh 4000 pixel là vô nghĩa — trình duyệt vẫn phải tải hết rồi mới thu nhỏ. Kích thước thực tế nên dùng:
- Ảnh banner lớn: rộng 1600–1920 pixel
- Ảnh sản phẩm: rộng 800–1200 pixel
- Ảnh trong bài viết: rộng 800–1000 pixel
- Logo, icon: đúng kích thước hiển thị
Bước 2: Dùng định dạng WebP
WebP cho chất lượng tương đương JPG nhưng dung lượng nhỏ hơn 25–35%, và nhỏ hơn PNG rất nhiều. Mọi trình duyệt hiện đại đều hỗ trợ. Quy tắc chọn định dạng:
- WebP — mặc định cho gần như mọi ảnh trên web.
- JPG — ảnh chụp, khi cần tương thích tối đa.
- PNG — chỉ khi cần nền trong suốt.
- SVG — logo, icon dạng vector, không bị mờ khi phóng to.
Con số thực tế: một ảnh chụp trang web dạng PNG 2,3 MB sau khi chuyển WebP và giảm chiều rộng còn khoảng 150–450 KB — nhẹ hơn 5 đến 15 lần.
Bước 3: Nén ở mức chất lượng 75–85
Đây là khoảng "ngọt": dung lượng giảm mạnh mà mắt thường không phân biệt được. Nén xuống dưới 60 mới bắt đầu thấy nhoè ở vùng chuyển màu. Mục tiêu thực tế: mỗi ảnh dưới 200 KB, ảnh banner dưới 400 KB.
Bước 4: Bật tải chậm (lazy load)
Lazy load chỉ tải ảnh khi người dùng cuộn tới. WordPress đã bật sẵn tính năng này cho ảnh trong nội dung. Lưu ý: không lazy load ảnh đầu trang — ảnh banner cần hiện ngay, nếu tải chậm sẽ làm điểm tốc độ tệ hơn.
Bước 5: Đặt thuộc tính alt
Alt là mô tả ảnh cho người khiếm thị và cho Google. Hãy viết đúng nội dung ảnh, ví dụ "máy tính để bàn văn phòng màu đen" thay vì nhồi từ khoá "máy tính giá rẻ hcm mua máy tính". Alt tốt còn giúp ảnh xuất hiện trong tìm kiếm hình ảnh.
Làm gì với website đã có hàng nghìn ảnh nặng?
Không cần sửa tay từng ảnh. Có hai cách:
- Dùng plugin tối ưu ảnh có chức năng nén hàng loạt và tự tạo bản WebP cho ảnh cũ.
- Xử lý ở phía máy chủ nếu bạn có quyền: dùng công cụ chuyển đổi hàng loạt rồi cập nhật đường dẫn trong cơ sở dữ liệu.
Trước khi làm hàng loạt, hãy sao lưu thư mục uploads. Nén là quá trình không thể hoàn tác nếu plugin ghi đè ảnh gốc.
Cách tự kiểm tra
Mở website, nhấn F12, sang tab Network rồi tải lại trang. Sắp xếp theo dung lượng để thấy ảnh nào nặng nhất. Nếu tổng dung lượng trang trên 3 MB thì gần như chắc chắn ảnh đang là vấn đề.
