Hướng dẫn thực tế về kích thước và định dạng file ảnh cho web
Mỗi ảnh đều dùng tài nguyên mạng, giải mã, bộ nhớ và kết xuất. Ngân sách hữu ích phải riêng cho trang, xét vai trò ảnh, người dùng, bộ nhớ đệm, viewport và chất lượng. Các khoảng dưới đây là điểm khởi đầu để thử, không phải giới hạn đạt chung.
Ngân sách khởi đầu theo mục đích
Các khoảng này minh họa ngân sách phân phối web tiết chế. Kết quả JPEG, WebP hoặc AVIF có thể cao hay thấp hơn; điều chỉnh theo nguồn, bộ mã hóa, kích thước hiển thị, hiệu năng thực tế và đánh giá bằng mắt.
| Trường hợp | Chiều rộng pixel | Dung lượng mục tiêu | Định dạng khuyến nghị |
|---|---|---|---|
| Banner hero toàn trang | 1600-1920px | 100-200 KB | WebP hoặc AVIF |
| Ảnh trong bài viết | 800-1200px | 60-150 KB | WebP |
| Ảnh sản phẩm (chính) | 800-1000px | 80-150 KB | WebP |
| Thumbnail sản phẩm | 300-400px | 20-50 KB | WebP |
| Ảnh card/preview | 400-600px | 30-80 KB | WebP |
| Avatar/ảnh đại diện | 64-128px | 5-15 KB | WebP hoặc JPEG |
| Logo | Tùy | 5-30 KB | SVG (ưu tiên) hoặc PNG |
| Icon | 24-48px | 1-5 KB | SVG |
| Pattern nền | 200-400px (lặp) | 10-30 KB | WebP hoặc PNG |
| Ảnh chia sẻ MXH (OG image) | 1200 x 630px | 80-150 KB | JPEG hoặc WebP |
Biến khoảng khởi đầu thành ngân sách của bạn
Báo cáo trọng lượng trang của HTTP Archive có dữ liệu phân bố hiện tại, nhưng trung vị toàn cầu không phải người dùng của bạn. Ngưỡng LCP “tốt” Google công bố là 2,5 giây ở phân vị thứ 75 của lượt truy cập. Dùng dữ liệu thực tế và waterfall để chia thời gian cho phản hồi máy chủ, phát hiện tài nguyên, truyền, giải mã và trì hoãn kết xuất.
Bắt đầu từ ngân sách truyền của cả trang và dành nhiều hơn cho ảnh mang lại giá trị cao nhất. Xem lại các khoảng khi bố cục, số ảnh, người dùng hoặc yêu cầu chất lượng thay đổi.
Định dạng là một biến số lớn
Cùng một nguồn có thể cho dung lượng rất khác tùy bộ mã hóa và mục tiêu chất lượng. Bảng này cho thấy hành vi cần so sánh, không phải kết quả chuẩn chung cho ảnh 1200 pixel.
| Định dạng | Ví dụ: ảnh 1200px | Kích thước tương đối |
|---|---|---|
| Ảnh PNG không tổn hao | Thường lớn với nội dung ảnh chụp | Mốc chuẩn |
| JPEG (chất lượng 80) | Hiệu quả ở thiết lập chất lượng phù hợp | Dùng làm mốc tương thích |
| WebP (chất lượng 80) | Có thể tốt hơn JPEG; so sánh chất lượng nhìn thấy | Phụ thuộc nguồn và bộ mã hóa |
| AVIF (chất lượng 65) | Có thể hiệu quả; mã hóa và hỗ trợ đều quan trọng | Phụ thuộc nguồn và bộ mã hóa |
WebP hoặc AVIF có thể tốt hơn đầu ra JPEG trong vài phép so sánh, nhưng không có tỷ lệ cố định cho mọi nguồn và bộ mã hóa. Cả hai định dạng hiện đại đều hỗ trợ trong suốt. Xem hướng dẫn WebP và AVIF.
Tạo ứng viên bằng JPG sang WebP, Chuyển sang AVIF cho các đầu vào được liệt kê, hoặc Chuyển đổi hàng loạt cho các định dạng công cụ hiển thị.
Kích thước pixel: Yếu tố ẩn nhân dung lượng
Số pixel, nội dung ảnh, độ sâu bit, siêu dữ liệu, định dạng, bộ mã hóa và thiết lập đều ảnh hưởng dung lượng. Giảm kích thước không cần thiết thường để lại ít dữ liệu hơn nhiều cho bộ mã hóa biểu diễn.
Ảnh 4000 × 3000 có 12 triệu pixel; 1200 × 900 có 1,08 triệu, ít hơn 91%. Với cùng số kênh và độ chính xác, dữ liệu raster chưa nén đưa vào bộ mã hóa giảm mạnh, dù số byte tiết kiệm cuối vẫn phụ thuộc nội dung và thiết lập.
Quy tắc responsive: cung cấp ứng viên gần với chiều rộng và mật độ hiển thị có thể có. Nếu vùng nội dung rộng 720 CSS pixel, ứng viên 1440px có thể hợp màn hình 2×, nhưng zoom, cắt, đổi bố cục và mật độ cao hơn có thể đổi lựa chọn. Dùng srcset và sizes để mô tả.
Dùng công cụ Đổi kích thước ảnh của Vizua để tạo ứng viên đúng bố cục. Sau đó thử bộ nén JPEG hoặc PNG phù hợp; nguồn đã tối ưu có thể không nhỏ hơn.
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:
Quy trình minh họa: bắt đầu với bản gốc 4000 × 3000 và giữ nó ngoài tập phân phối.
- Đổi kích thước thành ứng viên như 1200 × 900 khi phù hợp vùng và mật độ đích
- Xuất ứng viên WebP ở chất lượng khởi đầu đã chọn và kiểm tra file thật
- Xuất ứng viên AVIF nếu stack hỗ trợ, rồi so sánh dung lượng, hình thức và chi phí mã hóa
Chọn ứng viên nhỏ nhất đáp ứng mục đích. Mức tiết kiệm cuối và khác biệt nhìn thấy đến từ nguồn và đầu ra thật, không chỉ từ kích thước ví dụ.
Để 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 phải còn hữu ích ở mức zoom cửa hàng hỗ trợ. Tạo ứng viên responsive từ bản gốc được bảo vệ, thử chi tiết nhỏ và đặt ngân sách riêng cho lưới, khung chính và zoom. Yêu cầu tải lên marketplace có thể khác nội dung cửa hàng nên phân phối.
Portfolio nhiếp ảnh
Portfolio có thể phân phối bản xem trước responsive và cung cấp chế độ độ phân giải cao có chủ ý khi thích hợp. Đặt kích thước và ngân sách byte theo bố cục và màn hình dự kiến, rồi kiểm tra chất liệu, dải màu và hồ sơ màu.
Chia sẻ trên mạng xã hội (Open Graph)
Khuyến nghị và định dạng ảnh Open Graph khác nhau theo nền tảng và có thể đổi. JPEG hoặc PNG 1200 × 630 là điểm khởi đầu đa nền tảng phổ biến, nhưng hãy xác minh hướng dẫn hiện tại và bản xem trước. Trình thu thập lấy file này độc lập với lazy loading của trang.
Tổng ngân sách ảnh cho mỗi trang
Lập ngân sách trang từ mục tiêu hiệu năng. Một phân bổ ban đầu có thể thử 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í dụ này không bảo đảm tốc độ. Thư viện và lưới sản phẩm có thể trì hoãn ảnh ngoài màn hình phù hợp, nhưng tài nguyên lazy-load vẫn dùng dữ liệu khi được yêu cầu và có thể ảnh hưởng cuộn. Đo hiệu năng ban đầu và tương tác trên thiết bị, mạng đại diện.
Câu hỏi thường gặp
Kích thước file nào phù hợp cho ảnh trên website?
Không có mục tiêu KB chung. Hãy lập ngân sách từ mục tiêu hiệu năng trang, số ảnh, viewport, mạng của người dùng, bộ nhớ đệm và chất lượng cần thiết. Ảnh hero có thể đáng dùng nhiều byte hơn ảnh thu nhỏ, nhưng thời điểm phát hiện và độ ưu tiên cũng quan trọng như dung lượng. Hãy đo LCP thực tế và kiểm tra file đại diện thay vì áp một giới hạn ở mọi nơi.
Làm sao giảm kích thước ảnh mà không mất chất lượng?
Giữ bản gốc, tạo kích thước phù hợp với vùng hiển thị và mật độ thiết bị, so sánh định dạng thích hợp rồi điều chỉnh bộ mã hóa trong khi xem đầu ra thật. Thang chất lượng khác nhau giữa các bộ mã hóa và không thiết lập nào bảo đảm kết quả không thể phân biệt. Tránh nén có tổn hao lặp lại.
Google có khuyến nghị kích thước ảnh tối đa không?
Google không công bố một giới hạn KB chung cho ảnh. PageSpeed Insights có thể chỉ ra khả năng giảm dữ liệu truyền và vấn đề LCP trên trang được thử, nhưng ngân sách phù hợp phụ thuộc toàn bộ đường tải. Kết hợp chẩn đoán phòng thí nghiệm với dữ liệu thực tế từ người dùng của bạn.
Kích thước file ảnh có ảnh hưởng SEO không?
Ảnh có thể ảnh hưởng trải nghiệm và Core Web Vitals khi quá lớn, được phát hiện muộn, giải mã chậm hoặc hiển thị không có kích thước ổn định. Google dùng tín hiệu trải nghiệm trang trong hệ thống xếp hạng rộng hơn, nhưng giảm một file không bảo đảm đổi thứ hạng. Hãy đo xem ảnh có thật sự là nút thắt không.
Nên dùng kích thước pixel nào cho ảnh sản phẩm?
Khớp các ứng viên với vùng hiển thị lớn nhất, hành vi zoom và mật độ thiết bị mà cửa hàng hỗ trợ. Dùng nguồn responsive thay vì một chiều rộng cố định, thử chi tiết ở mức zoom dự kiến và đặt ngân sách byte theo trang và người dùng. Yêu cầu nhập của marketplace có thể khác kích thước cửa hàng phân phối.
Đạt mục tiêu dung lượng ảnh
Không cần tài khoản. File đã chọn được xử lý trong trình duyệt và không gửi tới máy chủ xử lý ảnh của chúng tôi.