Kích thước ảnh chuẩn cho website: Bảng thông số logo, banner và ảnh bài viết

Tóm tắt nhanh:

• Hero: 1600 × 900 px hoặc 1920 × 1080 px.
• Banner: 1200 × 400 px hoặc 1920 × 600 px.
• Ảnh đại diện bài viết: 1200 × 630 px hoặc 1200 × 800 px.
• Ảnh sản phẩm vuông: từ 1000 × 1000 đến 1600 × 1600 px.
• Ảnh nội dung: cố gắng dưới 200 KB nếu vẫn đủ rõ.
• Định dạng: WebP/AVIF cho ảnh raster (ảnh cấu tạo từ điểm ảnh) khi hệ thống hỗ trợ; SVG cho logo/icon vector.

Bảng kích thước ảnh chuẩn cho website theo từng vị trí

Bảng dưới đây là điểm bắt đầu tham khảo, không phải tiêu chuẩn bắt buộc của Google. Bạn nên đối chiếu kích thước, tỷ lệ khung hình, dung lượng ảnh và định dạng với giao diện thực tế của website.

Chú thích bảng:

• Hãy lấy vùng hiển thị thực tế làm căn cứ; không nên mặc định sử dụng ảnh gốc có kích thước lớn nhất.
• Phân biệt kích thước nguồn và hiển thị. Ảnh rộng 600 px có thể cần nguồn khoảng 1200 px trên màn hình mật độ cao.
• Dùng nhiều biến thể kích thước nếu hệ thống hỗ trợ phân phối ảnh theo thiết bị.
• Giới hạn dung lượng tải lên của CMS không phải là tiêu chuẩn dung lượng tối ưu bạn nên xuất bản cho website.
• Kiểm tra trên desktop, tablet và mobile trước khi nghiệm thu.

Ví dụ minh họa: Blog phần mềm có cột nội dung rộng khoảng 800 px không cần phân phối ảnh gốc 6000 px cho mọi lượt xem. Có thể xuất bản phù hợp và giữ ảnh gốc riêng.

SVG không cần kích thước pixel cố định để giữ nét. Mức 2560 × 1440 px cũng không phải trần kỹ thuật.

Kích thước pixel, tỷ lệ khung hình và dung lượng ảnh khác nhau thế nào?

Kích thước pixel là gì?

• Kích thước pixel (kích thước tệp gốc): Là tổng số điểm ảnh theo chiều rộng × chiều cao. Ví dụ: Ảnh đại diện báo cáo doanh nghiệp 1200 × 630 px có 1200 điểm ảnh ngang và 630 điểm ảnh dọc
• Kích thước hiển thị: Là diện tích ảnh thực tế chiếm trên giao diện. Ví dụ: Tệp gốc rộng 1200 px nhưng có thể chỉ hiển thị rộng 600 px tùy theo màn hình hoặc bố cục trang.

Tỷ lệ khung hình là gì?

• Tỷ lệ khung hình: Là tỷ lệ giữa chiều rộng và chiều cao. Ví dụ: Ảnh 1200 × 630 px có tỷ lệ khoảng 1,91:1.
• Lưu ý khi đổi kích thước (resize): Giữ nguyên tỷ lệ gốc giúp ảnh không bị méo. Tuy nhiên, nếu khung chứa trên giao diện có tỷ lệ khác và được cài đặt lấp đầy, ảnh vẫn sẽ bị cắt bớt (crop).

Dung lượng ảnh là gì?

• Dung lượng ảnh: Là lượng dữ liệu của tệp ảnh, thường tính bằng KB hoặc MB.
• Lưu ý: Hai ảnh có cùng kích thước pixel (ví dụ: 1200×630 px) vẫn có thể lệch dung lượng rất nhiều.
• Yếu tố ảnh hưởng: Định dạng tệp, độ nén và chi tiết trong ảnh sẽ quyết định dung lượng gốc (ví dụ: ảnh nền đơn sắc sẽ nhẹ và dễ nén hơn nhiều so với ảnh chứa nhiều chi tiết phức tạp).

Website có bắt buộc dùng ảnh 72 PPI không?

PPI (số điểm ảnh trên mỗi inch) không phải là điều kiện bắt buộc để quyết định độ rõ nét của ảnh trên website, bởi việc thay đổi PPI hoàn toàn không làm thay đổi tổng số pixel hay tạo thêm bất kỳ chi tiết nào cho bức ảnh.

Do đó, thay vì cố định chỉ số PPI ở mức 72, bạn nên ưu tiên tập trung vào kích thước nguồn theo đơn vị pixel, diện tích hiển thị thực tế trên giao diện và chất lượng hình ảnh nhìn bằng mắt thường khi xuất ảnh cho trang web.

Kích thước đề xuất cho logo, banner, ảnh bài viết và ảnh sản phẩm

Logo website và favicon

• Kích thước logo: Logo raster ngang có thể bắt đầu với chiều rộng 300–500 px; logo vuông từ 160–200 px mỗi cạnh (ưu tiên dùng định dạng SVG nếu có).
• Tối ưu khoảng trắng: Hãy cắt bỏ viền trống thừa quanh logo nhưng vẫn đảm bảo khoảng cách an toàn cho thương hiệu. Việc để nền trống quá rộng sẽ khiến logo bị thu nhỏ lại và khó nhìn trên giao diện.
• Kích thước favicon: Chuẩn tham khảo phổ biến là 48 × 48 px (hoặc 32 × 32 px tùy trình duyệt). Nên kiểm tra thêm yêu cầu riêng của CMS và tài liệu hướng dẫn về Favicon của Google Search Central.

Hero image và ảnh nền toàn màn hình

• Kích thước khuyến nghị: Hero image (ảnh chủ đạo đầu trang) nên được bắt đầu từ 1600 × 900 hoặc 1920 × 1080 px. Chỉ cân nhắc mức 2560 × 1440 px khi vùng hiển thị thực sự yêu cầu độ phân giải rất cao.
• Lưu ý về hiển thị: Màn hình ngang hay dọc có thể khiến ảnh nền "toàn màn hình" bị cắt bớt chiều cao thay vì giữ nguyên tỷ lệ 16:9. Vì vậy, hãy luôn kiểm tra vị trí chủ thể trên cả giao diện máy tính và điện thoại.
• Tối ưu tốc độ: Không cài đặt tải trì hoãn (lazy loading) cho ảnh Hero quan trọng chỉ để giảm dữ liệu tải ban đầu, vì điều này sẽ làm chậm hiển thị phần đầu trang.

Banner website và header slider

• Kích thước banner: Phổ biến là 1200 × 400 px (tỷ lệ 3:1) hoặc 1920 × 600 px (tỷ lệ 16:5).
• Lưu ý cho header slider: Kiểm tra kỹ chiều cao khung chứa và cách ảnh bị cắt trên các màn hình; tránh chèn thông điệp hoặc logo sát mép ảnh.
• Tối ưu trải nghiệm: Nên dựng chữ và nút kêu gọi hành động (CTA) bằng mã HTML thực tế thay vì chèn trực tiếp vào ảnh. Điều này giúp nội dung hiển thị sắc nét, dễ đọc và dễ bấm hơn trên điện thoại.

Ảnh đại diện và ảnh minh họa bài viết

Kích thước ảnh bài viết nên theo thẻ nội dung và chiều rộng cột đọc, thay vì chỉ theo tệp thiết kế sẵn.

Ví dụ minh họa: Blog phần mềm dùng thẻ 3:2 nhưng nhận ảnh 1,91:1. Khi lấp đầy khung, ảnh có thể bị cắt hai bên.

Lưu ý: Ảnh giao diện có chữ nhỏ hoặc dùng trên màn hình mật độ cao có thể cần nguồn lớn hơn. Nghiệm thu bằng khả năng đọc, không chỉ số pixel.

Ảnh sản phẩm và thumbnail

Ảnh thiết bị công nghiệp có thể dùng khung vuông 1000 - 1600 px mỗi cạnh; thumbnail thường khoảng 300 - 600 px.

Ví dụ minh họa: Ảnh máy móc vuông và dọc xen kẽ làm danh mục thiếu đồng đều. Nên thống nhất khung, nền và khoảng cách quanh thiết bị.

Tỷ lệ 1:1 không bắt buộc, nhất là máy dạng dài. Nếu cần phóng to chi tiết kỹ thuật, chuẩn bị ảnh riêng; không tải bản phóng to cho mọi thumbnail.

Ảnh Open Graph

• Kích thước phổ biến: Ảnh Open Graph thường dùng 1200 × 630 px, khoảng 1,91:1. Đây là lựa chọn phổ biến, không phải kích thước duy nhất được phép.
• Định dạng ưu tiên: Nên chọn JPEG hoặc PNG để tương thích tốt nhất khi chia sẻ trên nhiều nền tảng; chỉ nên dùng WebP nếu đã kiểm tra tương thích trước.
• Kiểm tra thực tế: Luôn xem trước trên Facebook và LinkedIn để tránh lỗi ảnh cũ, bị cắt mất logo hoặc tiêu đề.

Cách chọn kích thước ảnh cho desktop và mobile

Có thể dùng chung nội dung ảnh nếu chủ thể và thông điệp vẫn rõ. Tuy nhiên, không nên mặc định phân phối cùng một tệp lớn cho mọi thiết bị.

Responsive images (ảnh đáp ứng) giúp trình duyệt chọn nguồn phù hợp; không tự sửa bố cục bị cắt sai.

Khi nào có thể dùng chung một ảnh?

Sử dụng chung khi ảnh không chứa chữ nhỏ và việc bị cắt bớt khung hình (crop) không làm biến đổi hay mất ý nghĩa nội dung.

Lưu ý: Resize chỉ làm thay đổi kích thước tổng thể, còn crop là cắt bỏ hẳn một phần hình ảnh. Ảnh vị trí Hero không nhất thiết phải luôn tạo bản mobile riêng.

Khi nào nên tạo phiên bản mobile riêng?

Nên tạo riêng khi việc thu nhỏ khiến thông điệp, chữ viết khó đọc hoặc làm mất đi chủ thể chính.

Ví dụ: Màn hình desktop đặt hình giao diện sản phẩm nằm bên phải tiêu đề, nhưng trên mobile nên chuyển hình xuống dưới tiêu đề thay vì tiếp tục thu nhỏ lại.

Quy tắc vùng an toàn

Luôn kiểm tra vùng an toàn trực tiếp trên giao diện thực tế. Đặt chủ thể ở trung tâm ảnh chỉ là bước bắt đầu, không đảm bảo ảnh sẽ tránh được mọi kiểu cắt khung (crop) trên các màn hình khác nhau.

Chọn định dạng ảnh phù hợp để website tải nhanh

Không có định dạng tốt nhất cho mọi loại ảnh. Cần xét nội dung, độ rõ và khả năng xử lý của hệ thống; định dạng mới không thay thế resize và nén. Theo tài liệu “Image file type and format guide” của MDN Web Docs, mỗi định dạng có đặc tính và phạm vi sử dụng riêng.

Lưu ý:

• Định dạng SVG: Phù hợp nhất cho đồ họa đơn giản; nếu hình ảnh quá chi tiết hoặc phức tạp, tệp SVG vẫn có thể có dung lượng rất nặng.
• Định dạng PNG: Thích hợp khi cần giữ nền trong suốt, nhưng đây không phải lựa chọn duy nhất (các định dạng hiện đại như WebP hay AVIF cũng hỗ trợ tách nền rất tốt).

Cách chọn định dạng ảnh phù hợp:

• Nếu là logo vector → Ưu tiên SVG đã kiểm tra an toàn.
• Nếu là ảnh chụp máy móc → Thử WebP và AVIF.
• Nếu ảnh có chữ, sơ đồ cần giữ nét → Cân nhắc PNG hoặc WebP không mất dữ liệu.
• Nếu là ảnh chia sẻ Open Graph → Ưu tiên JPEG/PNG.
• Nếu CMS không xử lý định dạng mới → Dùng định dạng được hỗ trợ ổn định.

Khi so sánh, dùng cùng ảnh nguồn và kích thước, rồi đánh giá ở chất lượng thị giác tương đương. Không chọn tệp nhỏ nhất nếu chữ hoặc chi tiết thiết bị bị mất.

Mức dung lượng ảnh phù hợp cho tốc độ tải trang

Dung lượng ảnh website nên thay đổi theo vai trò: Thumbnail và ảnh nội dung thường nhẹ hơn hero hoặc ảnh nền lớn. Các mức dung lượng khuyến nghị là con số tham khảo giúp cân bằng giữa độ nét và tốc độ tải, không phải giới hạn kỹ thuật bắt buộc hay tiêu chuẩn tối thiểu của Google.

Cần xét tổng tài nguyên của trang. Ví dụ, 20 ảnh cùng 150 KB tương đương khoảng 3 MB nếu đều được tải. Đây là phép tính minh họa, không phải thời gian tải đo được.

Nén ảnh không mất dữ liệu giữ nguyên thông tin ảnh. Nén mất dữ liệu loại bỏ một phần thông tin; mức vừa phải có thể khó nhận thấy bằng mắt.

Dung lượng tối đa không đồng nghĩa với dung lượng nên dùng:

• Không tải ảnh vài MB chỉ vì CMS cho phép.
• Không nén đến mức mất chữ hoặc chi tiết kỹ thuật.
• Kiểm tra trên mobile và đánh giá toàn trang.

Quy trình tối ưu ảnh website trong 9 bước

Quy trình nên đi từ bố cục đến xuất tệp, sau đó kiểm tra thực tế. Đội nội dung, thiết kế và quản trị website có thể dùng chung checklist này.

1. Xác định vùng hiển thị lớn nhất: Ghi chiều rộng khung, vị trí ảnh và thiết bị cần phục vụ.
2. Chọn tỷ lệ phù hợp: Đối chiếu khung chứa để tránh méo hình hoặc cắt mất nội dung.
3. Resize theo nhu cầu hiển thị: Tạo kích thước nguồn phù hợp; không phóng lớn ảnh gốc thiếu nét.
4. Tạo bản mobile nếu cần: Đổi crop hoặc bố cục khi thu nhỏ không còn đủ rõ.
5. Chọn định dạng: Cân nhắc loại ảnh, nơi sử dụng và khả năng hỗ trợ của CMS.
6. Nén và kiểm tra độ rõ: So sánh trước/sau ở kích thước hiển thị thực tế.
7. Đặt tên file có nghĩa: Chữ thường và gạch nối giúp quản lý, không phải công thức tăng hạng.
8. Viết alt phù hợp ngữ cảnh: Alt (văn bản thay thế) mô tả nội dung/chức năng; không nhồi từ khóa hay máy móc chép chú thích. Ảnh thuần trang trí có thể dùng alt rỗng.
9. Kiểm tra sau xuất bản: Xem crop, độ rõ, dung lượng được tải và hiệu suất trên nhiều thiết bị.

Hướng dẫn alt và tên tệp phù hợp với nguyên tắc trong “Google Images SEO best practices” của Google Search Central.

Lưu ý cơ bản về LCP, CLS và lazy loading

LCP đo thời điểm phần tử nội dung lớn nhất hiển thị; CLS đo dịch chuyển bố cục. Dành sẵn không gian ảnh bằng chiều rộng, chiều cao hoặc tỷ lệ. Theo web.dev, không dùng lazy loading (tải trì hoãn) cho ảnh đầu trang quan trọng, đặc biệt ảnh LCP. Cân nhắc áp dụng cho ảnh dưới vùng nhìn đầu tiên.

Công cụ resize, nén và kiểm tra ảnh

• Squoosh: Resize, chuyển định dạng, so sánh ảnh.
• TinyPNG: Nén định dạng được hỗ trợ.
• ShortPixel: Tối ưu ảnh, tích hợp website.
• Canva: Thiết kế theo kích thước.
• Photoshop: Kiểm soát resize và chất lượng xuất.
• Google PageSpeed Insights: Kiểm tra hiệu suất, chẩn đoán ảnh.

Lưu ý: Tính năng và giới hạn phụ thuộc vào từng công cụ và gói dịch vụ bạn đăng ký. Bạn cần phân biệt rõ giữa kết quả thử nghiệm (lab data) và dữ liệu người dùng thực tế (field data), không nên đưa ra kết luận chỉ dựa trên một lần chạy kiểm tra duy nhất.

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

Ảnh website nên có kích thước bao nhiêu là chuẩn nhất?

Không có một kích thước cố định cho mọi website. Kích thước chuẩn phụ thuộc vào vùng hiển thị trên giao diện của bạn. Thông thường, ảnh Hero nên dùng 1920 × 1080 px, ảnh đại diện bài viết khoảng 1200 × 630 px và ảnh minh họa trong bài viết nên rộng từ 800–1200 px để đảm bảo độ sắc nét.

Dung lượng ảnh bao nhiêu KB là phù hợp để website tải nhanh?

Mục tiêu lý tưởng là giữ hầu hết các ảnh dưới 200 KB. Các ảnh nhỏ như thumbnail, icon hoặc logo nên được tối ưu dưới 50 KB - 80 KB. Việc kiểm soát dung lượng giúp giảm tải cho máy chủ, từ đó cải thiện tốc độ tải trang và trải nghiệm người dùng trên thiết bị di động.

Định dạng ảnh nào tốt nhất cho website hiện nay?

WebP là lựa chọn phổ biến và hiệu quả nhất hiện nay vì cân bằng tốt giữa chất lượng và dung lượng. AVIF mang lại khả năng nén vượt trội hơn nhưng cần kiểm tra tính tương thích. Đối với logo và đồ họa vector đơn giản, SVG luôn là ưu tiên hàng đầu để hiển thị sắc nét trên mọi độ phân giải.

Tại sao cần chú ý đến tỷ lệ khung hình (Aspect Ratio)?

Tỷ lệ khung hình giúp ảnh hiển thị đồng nhất trên các thiết bị, tránh tình trạng bị méo hoặc mất chủ thể khi hệ thống tự động cắt ảnh (crop). Sử dụng các tỷ lệ phổ biến như 16:9 cho Hero banner, 3:2 cho ảnh bài viết và 1:1 cho ảnh sản phẩm giúp bố cục website chuyên nghiệp và ổn định hơn.

Có cần thiết phải tạo ảnh riêng cho phiên bản Mobile không?

Nếu ảnh trên desktop có chủ thể quan trọng bị rơi vào vùng thường bị cắt trên mobile, bạn nên thiết kế hoặc crop lại phiên bản riêng. Tuy nhiên, nếu chủ thể nằm ở trung tâm và bố cục đơn giản, bạn có thể sử dụng tính năng responsive images để phục vụ các phiên bản kích thước khác nhau từ cùng một nguồn ảnh gốc.

Lỗi giật bố cục (CLS) liên quan thế nào đến kích thước ảnh?

Lỗi giật bố cục xảy ra khi trình duyệt không biết kích thước ảnh trước khi tải xong, làm nội dung bị đẩy xuống bất ngờ. Để khắc phục, bạn cần khai báo thuộc tính width và height trong thẻ <img> hoặc sử dụng thuộc tính aspect-ratio trong CSS để trình duyệt dành sẵn không gian hiển thị ngay từ đầu.

Xem thêm:

• Crawl Depth là gì? Cách kiểm tra và tối ưu độ sâu trang trong SEO
• Lỗi 451 là gì? Tìm hiểu về mã trạng thái HTTP 451
• Course Schema: Cách tạo JSON-LD, chọn type và kiểm tra chi tiết

Kết luận

Kích thước ảnh chuẩn cho website phụ thuộc vào vùng hiển thị thực tế chứ không có một con số cố định. Việc tối ưu hình ảnh đòi hỏi sự cân bằng giữa độ nét (pixel), tỷ lệ khung hình, dung lượng và định dạng tệp để vừa đảm bảo tính thẩm mỹ, vừa giúp trang web tải nhanh.

Doanh nghiệp nên xây dựng quy chuẩn nội bộ rõ ràng cho từng vị trí ảnh và kiểm tra kĩ trên giao diện thực tế trước khi xuất bản.