Tối ưu hình ảnh website: Giảm dung lượng mà vẫn giữ chất lượng
Hình ảnh thường là nhóm tài nguyên chiếm nhiều dung lượng nhất trên một trang web. Nếu ảnh được xuất trực tiếp từ máy ảnh hoặc công cụ thiết kế, người dùng có thể phải tải vài megabyte chỉ để xem một khung hình rộng vài trăm pixel. Tối ưu hình ảnh website đúng cách giúp trang tải nhanh hơn, giảm băng thông và cải thiện Core Web Vitals mà vẫn giữ được chất lượng thị giác.
Điểm quan trọng là không có một định dạng hay mức nén phù hợp cho mọi trường hợp. Ảnh đại diện, ảnh sản phẩm, biểu tượng và ảnh nền cần chiến lược khác nhau. Quy trình dưới đây giúp bạn chọn đúng kích thước, định dạng và cách tải cho từng loại.
Vì sao hình ảnh làm website chậm?
Một ảnh có thể gây chậm theo nhiều cách. Tệp quá lớn làm tăng thời gian tải. Kích thước vượt nhu cầu làm lãng phí dữ liệu di động. Ảnh xuất hiện đầu trang nhưng bị phát hiện muộn sẽ kéo dài LCP. Ảnh không có kích thước khai báo khiến bố cục nhảy khi tải xong và làm CLS tăng.
Do đó, chỉ nén ảnh là chưa đủ. Một chiến lược hoàn chỉnh cần trả lời năm câu hỏi:
Ảnh được hiển thị ở kích thước nào?
Định dạng nào phù hợp với nội dung ảnh?
Mức chất lượng nào đủ tốt trên thiết bị thật?
Ảnh có nằm trong vùng nhìn thấy ban đầu không?
Trình duyệt có biết trước tỷ lệ và mức ưu tiên của ảnh không?
Chọn đúng định dạng ảnh
JPEG
JPEG vẫn phù hợp với ảnh chụp khi cần khả năng tương thích rộng. Định dạng này không hỗ trợ nền trong suốt và thường kém hiệu quả hơn các định dạng hiện đại ở cùng chất lượng cảm nhận.
PNG
PNG phù hợp với hình cần nền trong suốt, nét vẽ sắc hoặc nội dung ít màu. Không nên dùng PNG cho ảnh chụp lớn nếu không có lý do cụ thể vì dung lượng có thể rất cao.
WebP và AVIF
WebP là lựa chọn thực tế cho phần lớn website hiện đại nhờ khả năng nén tốt và hỗ trợ cả ảnh có độ trong suốt. AVIF có thể cho tệp nhỏ hơn ở nhiều tình huống, nhưng thời gian mã hóa, quy trình xử lý và chất lượng ở từng loại ảnh vẫn cần được kiểm tra.
Cách an toàn là dùng thẻ picture để trình duyệt chọn định dạng tốt nhất và giữ ảnh dự phòng:
Phục vụ kích thước phù hợp bằng srcset
Màn hình rộng 390 pixel không cần tải ảnh 2000 pixel nếu ảnh chỉ chiếm toàn bộ chiều rộng thiết bị. Thuộc tính srcset cho phép cung cấp nhiều phiên bản để trình duyệt tự chọn theo kích thước màn hình và mật độ điểm ảnh.
srcset mô tả các tệp có sẵn. sizes mô tả chiều rộng mà ảnh dự kiến chiếm trong bố cục. Nếu khai báo sizes sai, trình duyệt vẫn có thể tải ảnh lớn hơn cần thiết.
Lazy loading đúng chỗ
Thuộc tính loading="lazy" giúp trì hoãn ảnh nằm dưới vùng nhìn thấy, nhờ đó băng thông ban đầu được dành cho nội dung quan trọng. Đây là lựa chọn phù hợp cho ảnh trong bài viết dài, danh sách sản phẩm phía dưới và thư viện ảnh.
Không nên lazy load ảnh hero hoặc ảnh có khả năng là phần tử LCP. Việc trì hoãn ảnh LCP buộc trình duyệt chờ thêm bước xác định bố cục trước khi tải, khiến nội dung chính xuất hiện muộn hơn.
Ưu tiên ảnh quan trọng bằng fetchpriority
Với ảnh chính nằm ngay đầu trang, fetchpriority="high" là tín hiệu để trình duyệt ưu tiên tài nguyên này. Chỉ nên dùng cho một hoặc một số rất ít tài nguyên thực sự quan trọng. Nếu mọi ảnh đều được đặt ưu tiên cao thì chúng sẽ cạnh tranh lẫn nhau và tín hiệu mất ý nghĩa.
Nếu ảnh LCP nằm trong CSS background, trình duyệt có thể phát hiện nó muộn. Trong trường hợp đó, cân nhắc đưa ảnh thành thẻ img hoặc preload có kiểm soát.
Khai báo width và height để tránh CLS
Khi có width và height, trình duyệt tính được tỷ lệ ảnh và dành sẵn không gian trước khi tải tệp. CSS vẫn có thể làm ảnh co giãn theo màn hình:
img { max-width: 100%; height: auto;
}
Hai thuộc tính trong HTML không ép ảnh luôn hiển thị đúng kích thước gốc. Chúng cung cấp tỷ lệ nội tại để bố cục ổn định. Đây là một thay đổi nhỏ nhưng có tác động rõ rệt đến CLS.
Nén ảnh bao nhiêu là đủ?
Không nên chọn chất lượng chỉ bằng một con số cố định. Ảnh có nhiều chi tiết, gradient hoặc chữ nhỏ cần mức chất lượng khác ảnh nền mờ. Hãy xuất nhiều phiên bản, xem trên điện thoại thật và so sánh dung lượng với khác biệt cảm nhận.
Một quy trình thực tế:
Cắt ảnh về đúng tỷ lệ sử dụng trước khi nén.
Tạo ba kích thước phục vụ điện thoại, máy tính bảng và màn hình lớn.
Xuất WebP hoặc AVIF cùng ảnh dự phòng khi cần.
Kiểm tra chi tiết quan trọng ở mức phóng đại thông thường.
Đo lại trang bằng DevTools và PageSpeed Insights.
Đừng quên SEO hình ảnh
Tên tệp nên mô tả ngắn gọn nội dung, viết không dấu và dùng dấu gạch nối, ví dụ toi-uu-hinh-anh-website.webp. Thuộc tính alt cần mô tả điều người đọc nhận được từ ảnh, không nhồi lặp từ khóa. Với ảnh chỉ mang tính trang trí, có thể để alt rỗng để công nghệ hỗ trợ bỏ qua.
Ảnh nên nằm gần đoạn văn liên quan. Nếu website dùng CDN hoặc hệ thống xử lý ảnh động, URL cần ổn định và cho phép công cụ tìm kiếm truy cập. Sitemap hình ảnh có thể hữu ích với website phụ thuộc nhiều vào lưu lượng tìm kiếm hình ảnh.
Checklist tối ưu hình ảnh website
Ảnh đã được cắt về đúng tỷ lệ hiển thị.
Đã có WebP hoặc AVIF nếu phù hợp.
Có nhiều kích thước qua srcset và sizes.
Mọi ảnh có width và height.
Ảnh dưới màn hình dùng lazy loading.
Ảnh LCP không lazy load và có thể dùng fetchpriority="high".
Tên tệp và alt có ý nghĩa, không nhồi từ khóa.
Đã kiểm tra chất lượng trên màn hình điện thoại thật.
Kết luận
Tối ưu hình ảnh hiệu quả là sự kết hợp giữa kích thước đúng, định dạng phù hợp, nén hợp lý và chiến lược tải thông minh. Hãy ưu tiên ảnh đầu trang, tải lười ảnh phía dưới, cung cấp ảnh responsive và luôn dành sẵn không gian. Những thay đổi này thường mang lại cải thiện rõ rệt cho tốc độ tải, LCP, CLS và trải nghiệm người dùng.
