Kích thước banner website sai là nguyên nhân hay gặp nhất khiến ảnh đầu trang bị vỡ, bị cắt mất chữ hoặc làm trang tải chậm. Bài này tổng hợp các cỡ ảnh nên dùng cho banner đầu trang, slider, banner danh mục, ảnh sản phẩm, ảnh bài viết và ảnh chia sẻ link, cho cả máy tính lẫn điện thoại. Cuối bài có bảng tra nhanh để gửi cho người thiết kế.
Lưu ý trước: không có một con số “chuẩn” duy nhất cho mọi website. Kích thước thật phụ thuộc vào giao diện ( theme ) bạn dùng. Các con số dưới đây là cỡ an toàn, dùng được cho phần lớn giao diện WordPress hiện nay. Khi làm website mới, hãy hỏi đơn vị thiết kế cỡ chính xác của từng vị trí.
Vì sao kích thước banner website quan trọng
Ảnh banner thường là thứ to nhất và nặng nhất trên trang. Chọn sai cỡ sẽ gặp một trong ba lỗi:
- Ảnh quá nhỏ: bị kéo giãn trên màn hình lớn, nhìn mờ và vỡ hạt.
- Ảnh sai tỉ lệ: giao diện tự cắt cho vừa khung, mất chữ hoặc mất phần quan trọng của ảnh.
- Ảnh quá nặng: trang tải chậm, nhất là trên điện thoại dùng 4G. Google cũng dùng tốc độ tải trang làm một tín hiệu xếp hạng.
Kích thước banner đầu trang cho máy tính
Banner đầu trang ( còn gọi là hero ) thường chạy hết chiều ngang màn hình. Màn hình máy tính phổ biến hiện nay rộng 1366 đến 1920 điểm ảnh, nên ảnh banner nên làm rộng 1920px.
- Banner cao hết màn hình: 1920 × 1080 ( tỉ lệ 16:9 ). Hợp với website kiến trúc, nội thất, du lịch, nơi ảnh là thứ bán hàng chính.
- Banner thấp hoặc slider: 1920 × 700 đến 800. Để lộ một phần nội dung bên dưới, khách biết còn thông tin để cuộn xem.
- Vùng an toàn: tiêu đề, nút bấm và chi tiết quan trọng đặt trong khoảng 1200px ở giữa. Hai bên ngoài chỉ nên là phần nền của ảnh, vì trên màn hình hẹp hơn hai bên sẽ bị cắt bớt.
Nếu banner có chữ viết thẳng lên ảnh ( chữ “in” vào ảnh ), chữ sẽ bị thu nhỏ theo ảnh trên màn hình nhỏ và rất khó đọc. Cách tốt hơn là để ảnh trơn, còn tiêu đề và nút làm bằng chữ thật của website. Chữ thật sắc nét ở mọi màn hình, Google đọc được và sửa nội dung không cần làm lại ảnh.
Kích thước banner website trên điện thoại
Phần lớn khách vào website bằng điện thoại, nhưng đây lại là chỗ hay bị bỏ quên. Màn hình điện thoại dựng đứng, nếu vẫn dùng ảnh ngang 16:9 thì ảnh chỉ còn một dải mỏng, hoặc bị cắt mất hai bên.
- Nên làm thêm bản ảnh dọc riêng: 1080 × 1350 ( 4:5 ) cho banner chiếm phần lớn màn hình, hoặc 1080 × 1920 ( 9:16 ) cho banner toàn màn hình.
- Chiều ngang 1080px là đủ: điện thoại hiển thị ở mật độ điểm ảnh cao, ảnh rộng 1080px vẫn sắc nét mà không quá nặng.
- Chủ thể đặt ở giữa: khi phải dùng chung một ảnh ngang, đặt người hoặc sản phẩm ở giữa ảnh, giao diện cắt hai bên vẫn giữ được phần chính.
Hầu hết các theme WordPress hiện nay, trong đó có Nova Theme mà Sago Media dùng, cho phép đặt ảnh riêng cho máy tính và điện thoại ở cùng một banner. Nếu theme cũ không có lựa chọn này, đó là dấu hiệu nên cân nhắc nâng cấp giao diện.
Kích thước các banner khác trên website
Banner danh mục và trang con
Đầu trang danh mục sản phẩm, trang giới thiệu, trang liên hệ thường dùng banner thấp: 1920 × 400 đến 500. Banner này chủ yếu tạo không khí, chữ trên đó chỉ là tên trang nên không cần cao.
Banner khuyến mãi giữa trang
Banner chạy ngang trong vùng nội dung: 1200 × 400 ( 3:1 ). Nếu đặt hai banner cạnh nhau, mỗi banner khoảng 600 × 300. Nhớ làm bản dọc hoặc vuông cho điện thoại nếu banner có chữ.
Ảnh sản phẩm
Kích thước ảnh sản phẩm nên vuông 1000 × 1000 trở lên. Quan trọng nhất là tất cả ảnh sản phẩm cùng một tỉ lệ, lưới sản phẩm mới thẳng hàng. Nên chụp trên nền trơn hoặc tách nền, sản phẩm chiếm khoảng 70 đến 80% khung.
Ảnh đại diện bài viết và ảnh chia sẻ link
Ảnh đại diện bài viết nên làm 1200 × 675 ( 16:9 ), hiển thị đẹp ở trang tin tức và đầu bài. Khi chia sẻ link lên Facebook hay Zalo, ảnh xem trước dùng tỉ lệ khoảng 1,91:1, cỡ 1200 × 630 theo hướng dẫn của Meta. Ảnh 16:9 vẫn dùng được, chỉ bị cắt rất ít ở trên và dưới, nên đặt chữ cách mép một chút.
Logo và biểu tượng website
Logo trên thanh menu hiển thị cao khoảng 40 đến 60px. Nên dùng tệp SVG, hoặc PNG nền trong suốt cao gấp đôi ( 120px ) để sắc nét trên màn hình độ phân giải cao. Biểu tượng nhỏ trên tab trình duyệt ( favicon ) cần ảnh vuông tối thiểu 512 × 512, đây cũng là yêu cầu của WordPress.
Bảng tra nhanh kích thước banner website
| Vị trí | Kích thước nên dùng ( px ) | Tỉ lệ |
|---|---|---|
| Banner đầu trang máy tính | 1920 × 1080 | 16:9 |
| Banner đầu trang thấp, slider | 1920 × 700–800 | khoảng 2,5:1 |
| Banner đầu trang điện thoại | 1080 × 1350 hoặc 1080 × 1920 | 4:5 hoặc 9:16 |
| Banner danh mục, trang con | 1920 × 400–500 | khoảng 4:1 |
| Banner khuyến mãi giữa trang | 1200 × 400 | 3:1 |
| Ảnh sản phẩm | 1000 × 1000 trở lên | 1:1 |
| Ảnh đại diện bài viết | 1200 × 675 | 16:9 |
| Ảnh chia sẻ link | 1200 × 630 | 1,91:1 |
| Biểu tượng website ( favicon ) | 512 × 512 | 1:1 |
Dung lượng và định dạng ảnh banner
Đúng kích thước rồi vẫn cần nhẹ. Một ảnh 1920 × 1080 xuất thẳng từ máy ảnh có thể nặng 3 đến 5MB, quá nặng cho website.
- Định dạng WebP: cùng chất lượng nhìn bằng mắt, WebP thường nhẹ hơn JPG đáng kể. Hầu hết trình duyệt hiện nay đều hỗ trợ.
- Dung lượng mục tiêu: banner đầu trang nên dưới 300KB, ảnh sản phẩm và ảnh bài viết dưới 150KB.
- Không phóng to ảnh nhỏ: ảnh gốc 800px kéo lên 1920px sẽ mờ, nén nhẹ đến mấy cũng không cứu được.
- Ảnh đầu trang không đặt chế độ tải chậm: ảnh ở màn hình đầu cần tải ngay, các ảnh bên dưới mới để tải chậm ( lazy load ).
Muốn hiểu kỹ hơn cách website chọn ảnh theo cỡ màn hình, bạn có thể đọc tài liệu về ảnh đáp ứng của web.dev ( Google ).
Lỗi hay gặp khi làm banner cho website
- Dùng ảnh thiết kế cho Facebook đặt lên website: ảnh vuông hoặc dọc đặt vào khung ngang bị cắt mất phần lớn.
- Chữ in vào ảnh quá nhỏ: trên máy tính đọc được, lên điện thoại thành những vệt chữ li ti.
- Slider 5 đến 7 ảnh: mỗi ảnh vài trăm KB, cộng lại làm trang đầu rất nặng, trong khi khách hiếm khi xem quá ảnh thứ hai.
- Mỗi banner một tỉ lệ: ảnh chuyển qua lại làm cả trang giật lên giật xuống.
Về cách sắp xếp chữ, ảnh và nút trên banner, bạn xem thêm bài 10 kiểu bố cục banner 2026. Ảnh cho fanpage thì xem bài kích thước ảnh Facebook chuẩn.
Gửi gì cho người thiết kế banner
Khi đặt làm banner website, bạn nên gửi kèm: vị trí đặt banner, kích thước bản máy tính và bản điện thoại, nội dung chữ ( tiêu đề, mô tả, nút ), ảnh gốc chất lượng cao và đường dẫn khi bấm vào banner. Đủ thông tin này thì một lần làm là dùng được, không phải sửa đi sửa lại.
Sago Media nhận thiết kế website trọn gói, trong đó banner được làm sẵn hai bản cho máy tính và điện thoại, ảnh nén WebP để trang tải nhanh. Cần làm lại banner cho website đang chạy hoặc kiểm tra vì sao trang chậm, bạn liên hệ Sago Media qua hotline 0977 727 314.
