Tại sao kích thước banner website quan trọng
Kích thước sai ảnh hưởng theo hai hướng: quá nhỏ thì ảnh bị nhòa, vỡ hạt khi hiển thị. Quá lớn thì file nặng, tải chậm, kéo điểm hiệu năng của cả trang xuống theo.
Với hero banner, vấn đề còn nghiêm trọng hơn. Hero banner thường là thứ Google chọn làm mốc đo LCP trên trang, nên thời gian tải banner ảnh hưởng trực tiếp tới điểm Core Web Vitals của cả website.
Ngoài ra, thiết kế banner sai kích thước còn gây mất thêm công sức sau này. Nếu giao ảnh cho người lập trình với kích thước không đúng, họ phải yêu cầu làm lại, hoặc ảnh sẽ bị kéo giãn, bị cắt xén không như ý.
Biết đúng kích thước trước khi làm giúp bạn giao việc cho người thiết kế chính xác, và tránh phải làm đi làm lại nhiều lần.
Bảng kích thước banner website chuẩn theo từng vị trí
Dưới đây là bảng kích thước thực tế, phân theo từng vị trí hiển thị. Kích thước pixel này là kích thước của file ảnh gốc bạn cung cấp cho hệ thống, không phải kích thước hiển thị trên màn hình (vì website co giãn theo chiều rộng màn hình người dùng).
Hero banner (banner đầu trang, vùng above-the-fold)
| Loại layout | Kích thước ảnh gốc | Ghi chú |
|---|---|---|
| Full width (tràn màn hình) | 1920 × 600 px | Phổ biến nhất, dùng cho trang chủ cần ảnh lớn |
| Full width, thấp hơn | 1920 × 450 px | Dùng khi muốn nội dung bên dưới hiện sớm hơn |
| Boxed layout (khung cố định) | 1200 × 600 px | Dùng cho layout có max-width giới hạn nội dung |
| Tỷ lệ cho mobile | 768 × 400 px | Làm thêm phiên bản riêng hoặc dùng object-fit: cover |
Lưu ý: nhiều website dùng CSS để kéo hero banner full width với chiều cao linh hoạt theo tỷ lệ. Trong trường hợp đó, ảnh gốc cần đủ rộng (tối thiểu 1440 px) để không bị vỡ hạt trên màn hình lớn. Tìm hiểu thêm về thiết kế vùng này trong bài above-the-fold là gì.
Banner trong nội dung (in-content banner)
| Tên chuẩn | Kích thước | Dùng ở đâu |
|---|---|---|
| Medium Rectangle | 300 × 250 px | Phổ biến nhất, vừa sidebar vừa in-content |
| Large Rectangle | 336 × 280 px | Biến thể lớn hơn của Medium Rectangle |
| In-content wide | 728 × 90 px | Dải ngang giữa các đoạn văn dài |
| Billboard | 970 × 250 px | Banner ngang lớn, dùng cho trang tin tức hay blog nhiều lưu lượng |
Sidebar banner (banner cột bên)
| Tên chuẩn | Kích thước | Ghi chú |
|---|---|---|
| Medium Rectangle | 300 × 250 px | Hay dùng nhất cho sidebar |
| Half Page | 300 × 600 px | Sidebar lớn, hiệu quả cao vì chiều cao |
| Wide Skyscraper | 160 × 600 px | Dùng khi sidebar hẹp |
| Skyscraper | 120 × 600 px | Sidebar rất hẹp, ít phổ biến |
Header và footer banner (dải ngang đầu/cuối trang)
| Tên chuẩn | Kích thước | Ghi chú |
|---|---|---|
| Leaderboard | 728 × 90 px | Tiêu chuẩn IAB cho dải ngang header/footer |
| Super Leaderboard | 970 × 90 px | Biến thể rộng hơn, dùng trên màn hình lớn |
Popup và modal banner
| Loại | Kích thước phổ biến | Ghi chú |
|---|---|---|
| Popup desktop | 600 × 400 px hoặc 700 × 500 px | Không nên quá lớn, để người dùng thấy vẫn còn nội dung phía sau |
| Popup mobile | 320 × 400 px | Trên điện thoại không nên vượt quá chiều rộng màn hình |
| Mobile Interstitial | 320 × 480 px | Dạng popup toàn màn hình mobile, Google giới hạn dùng ở trang chuyển tiếp |
Banner quảng cáo mobile
| Tên chuẩn | Kích thước | Ghi chú |
|---|---|---|
| Mobile Banner | 320 × 50 px | Dải ngang nhỏ ở đầu hoặc cuối màn hình điện thoại |
| Mobile Leaderboard | 320 × 100 px | Cao hơn Mobile Banner, nổi bật hơn |
| Medium Rectangle | 300 × 250 px | Hoạt động tốt nhất trên mobile theo dữ liệu IAB |
Các kích thước trên tuân theo tiêu chuẩn của IAB (Interactive Advertising Bureau, tức Cục Quảng cáo Tương tác), tổ chức đặt ra quy chuẩn cho quảng cáo kỹ thuật số toàn cầu. Ngay cả khi bạn không chạy quảng cáo mà chỉ làm banner giao diện, dùng các kích thước này giúp đảm bảo banner hiển thị đúng trên mọi loại bố cục web phổ biến.
Định dạng file ảnh banner nên dùng
| Định dạng | Dùng khi nào | Ưu điểm | Nhược điểm |
|---|---|---|---|
| WebP | Hầu hết banner giao diện | Nhỏ hơn JPEG/PNG 25-34%, chất lượng tốt, hỗ trợ nền trong suốt | Cần kiểm tra trình duyệt cũ (IE không hỗ trợ, nhưng IE đã ngừng cập nhật) |
| PNG | Khi cần nền trong suốt tuyệt đối (logo, icon, ảnh có chi tiết sắc nét) | Chất lượng cao, nền trong suốt hoàn toàn | File nặng hơn WebP và JPEG |
| JPEG | Ảnh chụp, ảnh có nhiều màu gradient | Hỗ trợ rộng rãi, nén tốt cho ảnh chụp | Không hỗ trợ nền trong suốt, chất lượng giảm theo mỗi lần nén |
| SVG | Đồ họa vector, icon, logo | Co giãn không mất chất lượng ở mọi kích thước màn hình | Không phù hợp cho ảnh chụp |
Khuyến nghị thực tế: dùng WebP làm định dạng chính cho mọi banner giao diện. Nếu hệ thống không hỗ trợ xuất WebP trực tiếp, xuất JPEG hoặc PNG rồi chuyển sang WebP bằng công cụ như Squoosh hay cwebp. So sánh chi tiết hơn về định dạng ảnh web trong bài WebP và AVIF khác nhau thế nào.
Chuẩn bị ảnh cho màn hình retina và mobile
Màn hình retina (hay HiDPI) có mật độ điểm ảnh gấp đôi so với màn hình thường. Nếu bạn cung cấp ảnh banner đúng kích thước hiển thị (ví dụ 300px rộng) nhưng màn hình retina cần 600px để hiển thị đẹp, ảnh sẽ bị nhòa hoặc vỡ hạt.
Cách xử lý thực tế: làm ảnh với kích thước gấp đôi kích thước hiển thị mục tiêu, rồi để trình duyệt tự thu nhỏ về đúng kích thước hiển thị. Với hero banner hiển thị ở chiều rộng 960px, làm ảnh 1920px rộng. Khi hiển thị trên màn hình thường, trình duyệt thu về 960px bình thường. Khi hiển thị trên màn hình retina, trình duyệt dùng thêm điểm ảnh để render sắc nét hơn.
Với banner nhỏ hơn như sidebar 300 × 250px, làm ảnh gốc 600 × 500px. Tuy nhiên, cần chú ý rằng file ảnh lớn hơn cũng đồng nghĩa tải chậm hơn nếu không nén tốt. Dùng WebP giúp giữ chất lượng cao trong khi file không quá nặng.
Đối với mobile, thiết kế banner cần kiểm tra trên màn hình nhỏ thực tế, không chỉ dùng chế độ giả lập trong trình duyệt máy tính. Một số vấn đề hay gặp trên mobile mà trên máy tính không thấy: chữ bị thu nhỏ quá mức, nút bị dịch chuyển ra ngoài vùng dễ bấm, hay ảnh bị cắt mất phần quan trọng.
Banner nặng ảnh hưởng tới LCP như thế nào
Google đo LCP (Largest Contentful Paint) là khoảng thời gian từ lúc trang bắt đầu tải cho tới khi phần tử đồ họa lớn nhất hiện đầy đủ trên màn hình người dùng. Google khuyến nghị LCP dưới 2,5 giây để đạt điểm tốt trong Core Web Vitals.
Nếu file ảnh banner nặng, quá trình tải kéo dài và LCP tăng cao. Một file ảnh JPEG không nén có thể nặng 1-3MB, đủ để kéo LCP của trang lên 4-6 giây ngay cả trên kết nối 4G tốt.
Biện pháp xử lý trực tiếp nhất:
- Nén ảnh: dùng WebP thay JPEG/PNG, nén xuống dưới 200KB cho hero banner full width nếu có thể.
- Preload hero banner: thêm thẻ
<link rel="preload">trong phần head để trình duyệt tải ảnh sớm hơn, song song với các tài nguyên khác. - Lazy load cho banner dưới: banner không nằm trong vùng nhìn thấy đầu tiên (below-the-fold) thì nên dùng lazy load để trì hoãn tải cho tới khi người dùng cuộn tới gần. Bài lazy load ảnh trên website giải thích kỹ hơn về kỹ thuật này.
Chú ý: hero banner không nên dùng lazy load vì nó nằm trong vùng nhìn thấy ngay khi vào trang. Dùng lazy load ở đây sẽ làm chậm LCP thay vì cải thiện.
Kích thước banner đúng không chỉ là vấn đề thẩm mỹ mà còn liên quan trực tiếp tới tốc độ tải trang và trải nghiệm người xem. Biết bảng kích thước chuẩn giúp bạn làm việc hiệu quả hơn với người thiết kế và tránh phải sửa đi sửa lại nhiều lần.
Nếu bạn cần hiểu thêm về cách làm banner từ đầu, bài cách làm banner website từng bước đi chi tiết vào quy trình. Còn để biết banner là gì và có mấy loại, xem bài banner là gì.
Phần kỹ thuật về kích thước, định dạng và tối ưu ảnh là một trong những khía cạnh Web22 kiểm tra ngay khi bắt tay vào thiết kế website, vì xử lý đúng từ đầu sẽ tránh được nhiều vấn đề về tốc độ sau này.
Câu hỏi thường gặp
Kích thước banner website chuẩn nhất là bao nhiêu?
Không có một kích thước duy nhất vì mỗi vị trí có yêu cầu khác nhau. Hero banner thường 1920 × 600px, sidebar dùng 300 × 250px hoặc 300 × 600px, dải ngang header dùng 728 × 90px. Chọn theo vị trí bạn sẽ đặt banner.
Kích thước banner website và banner quảng cáo có khác nhau không?
Banner quảng cáo (Google Ads, Facebook Ads) có kích thước chuẩn riêng do mạng quảng cáo quy định, thường trùng với kích thước IAB. Banner giao diện của trang web do lập trình viên dựng nên linh hoạt hơn, nhưng dùng kích thước IAB chuẩn vẫn là lựa chọn an toàn.
Ảnh banner cần bao nhiêu KB là vừa?
Hero banner nên dưới 200KB sau khi nén WebP. Banner nhỏ hơn như sidebar hay in-content thường dưới 80KB. Mục tiêu là giữ LCP dưới 2,5 giây, nên con số cụ thể phụ thuộc vào tốc độ server và tổng trọng lượng trang.
Làm thế nào để banner không bị vỡ hạt trên màn hình retina?
Làm ảnh gốc theo tỷ lệ 2:1 so với kích thước sẽ hiển thị, kết hợp WebP để giữ file nhẹ. Ví dụ sidebar hiển thị 300px thì làm ảnh 600px rộng. Trình duyệt tự thu về đúng kích thước hiển thị, phần mật độ điểm ảnh dư ra dùng để render sắc nét trên màn hình retina.