Hướng Dẫn Toàn Diện Về Kích Thước File Ảnh Cho Website

Mỗi bức ảnh trên website của bạn có một "ngân sách" dung lượng. Vượt quá ngân sách, trang tải chậm đến bực mình. Giữ trong ngân sách, mọi thứ tải tức thì. Bài viết này cung cấp con số KB cụ thể cho từng trường hợp sử dụng, kích thước pixel tương ứng, và định dạng giúp bạn đạt được mục tiêu.

Bảng tham chiếu: Dung lượng lý tưởng theo trường hợp sử dụng

Các con số dưới đây áp dụng khi bạn dùng WebP hoặc AVIF. Nếu vẫn dùng JPEG, cộng thêm khoảng 25-30%.

Các con số này đến từ đâu?

Theo dữ liệu HTTP Archive 2025, trang web trung bình nặng khoảng 2.5 MB trên di động, và riêng ảnh chiếm khoảng 1 MB — tức 40% tổng dung lượng trang. Ngưỡng "tốt" của Google cho Largest Contentful Paint là 2.5 giây. Để đạt mục tiêu này trên kết nối 4G (thông lượng thực tế khoảng 1.5 MB/giây), ảnh hero cần tải xong trong dưới 1 giây — nghĩa là phải dưới 200 KB.

Các con số trong bảng trên không phải lấy ngẫu nhiên. Chúng được tính ngược từ ngân sách hiệu suất thực tế: tổng ngân sách ảnh 400-600 KB cho một trang điển hình, phân bổ vào các vị trí hero, nội dung, và thumbnail.

Định dạng ảnh tạo ra khác biệt lớn nhất

Cùng một bức ảnh, cùng chất lượng thị giác, nhưng dung lượng có thể khác nhau rất lớn tùy theo định dạng:

Chuyển từ JPEG sang WebP tiết kiệm khoảng 25-35%. Chuyển sang AVIF tiết kiệm khoảng 50% so với JPEG. Cả hai đều hỗ trợ trong suốt (transparency). Để so sánh chi tiết, xem bài WebP vs AVIF của Vizua.

Bạn có thể chuyển đổi ảnh ngay bây giờ: JPG sang WebP, bất kỳ định dạng nào sang AVIF, hoặc dùng chuyển đổi hàng loạt cho nhiều file cùng lúc.

Kích thước pixel: Yếu tố ẩn nhân dung lượng

Dung lượng file phụ thuộc hai yếu tố: số pixel và mức nén. Hầu hết mọi người tập trung vào nén mà quên số pixel — nhưng giảm kích thước tạo ra hiệu quả lớn hơn nhiều.

Ví dụ nhanh: ảnh 4000 x 3000 có 12 triệu pixel. Resize xuống 1200 x 900 còn 1.08 triệu pixel — giảm 91% dữ liệu thô. Chưa cần nén, bạn đã loại bỏ phần lớn dung lượng.

Nguyên tắc: không bao giờ phục vụ ảnh rộng hơn vùng hiển thị. Nếu khung nội dung blog rộng 720px, ảnh 1440px (cho Retina 2x) là tối đa bạn cần. Bất kỳ thứ gì lớn hơn đều lãng phí băng thông.

Dùng công cụ thay đổi kích thước của Vizua để đưa ảnh về kích thước chính xác. Sau đó nén với nén JPEG hoặc nén PNG để tiết kiệm thêm.

Chất lượng nén: Tìm điểm cân bằng

Khi ảnh đã đúng kích thước và đúng định dạng, chất lượng nén là nút điều chỉnh cuối cùng. Đây là kịch bản thực tế cho thấy ba yếu tố phối hợp với nhau:

Điểm xuất phát: Ảnh chụp từ máy ảnh, 4000 x 3000, lưu dạng PNG — khoảng 14 MB.

1. Resize xuống 1200 x 900 (chiều rộng nội dung blog, Retina 2x): ~3.5 MB ở PNG
2. Chuyển sang WebP chất lượng 80: ~130 KB
3. Chuyển sang AVIF chất lượng 65 (nếu hệ thống hỗ trợ): ~90 KB

Giảm 99.3% so với ảnh PNG gốc. Kết quả không thể phân biệt bằng mắt thường ở kích thước xem bình thường.

Để biết cài đặt chất lượng chi tiết cho từng định dạng, xem bài: Cách nén ảnh không giảm chất lượng.

Trường hợp đặc biệt

Trang sản phẩm thương mại điện tử

Ảnh sản phẩm cần sắc nét khi zoom. Phục vụ ảnh chính ở 800-1000px (1600-2000px cho Retina) dạng WebP. Hầu hết ảnh sản phẩm nén tốt xuống 80-150 KB. Thumbnail trong lưới nên rộng 300-400px, khoảng 20-50 KB mỗi ảnh.

Portfolio nhiếp ảnh

Chất lượng là ưu tiên số một, nhưng tốc độ tải cũng quan trọng. Phục vụ ảnh preview ở 1200-1600px dạng WebP (chất lượng 85), mục tiêu 150-250 KB. Cung cấp thêm link "Xem cỡ đầy đủ" cho phiên bản độ phân giải cao.

Chia sẻ trên mạng xã hội (Open Graph)

Ảnh OG nên có kích thước 1200 x 630px. Facebook và Twitter chấp nhận JPEG và PNG; một số nền tảng đã hỗ trợ WebP. Giữ dưới 150 KB. Ảnh OG được tải bởi crawler, không phải lazy-loaded bởi trình duyệt, nên mỗi kilobyte đều đáng kể.

Tổng ngân sách ảnh cho mỗi trang

Một khung tham chiếu hữu ích: nhắm tổng dung lượng ảnh dưới 500 KB mỗi trang. Phân bổ thường là:

• 1 ảnh hero: ~150 KB
• 3-4 ảnh nội dung: ~100 KB mỗi ảnh, tổng ~300-400 KB
• Thumbnail, avatar, icon: ~50 KB tổng cộng

Với ngân sách này, trang tải nhanh trên 4G và không tiêu hao gói cước di động. Nếu cần nhiều ảnh hơn (gallery, lưới sản phẩm), lazy loading giữ lần tải đầu tiên trong ngân sách — chỉ ảnh trên màn hình đầu tiên mới tính vào hiệu suất tải ban đầu.

Câu hỏi thường gặp