Kích thước tiêu chuẩn của Hero Image khi Thiết kế Website – 2022

Hero Image chất lượng cao là chìa khóa cho ấn tượng đầu tiên tuyệt vời. Nếu được thực hiện tốt, chúng thể hiện bản chất của bản sắc thương hiệu và chủ đề tổng thể của trang web của bạn.

Tuy nhiên các doanh nghiệp cần tuân theo các kích thước tiêu chuẩn của Hero Image để mang lại hiệu quả tối ưu nhất, thông tin chi tiết sẽ được tổng hợp trong bài viết dưới đây.

Kích thước tiêu chuẩn của Hero Image

Việc tìm đúng tỷ lệ khung hình và cắt xén có thể gây nhầm lẫn khi định cỡ Hero Image. Banner hero image không giống như hình ảnh toàn màn hình và mọi hình ảnh phải chia tỷ lệ để phù hợp với không gian.

Bạn cũng phải xem xét mọi trường hợp sử dụng khi người dùng truy cập vào website, ví dụ như có người dùng sẽ cài đặt kích thước hiển thị màn hình ở khoảng tiêu chuẩn, nhưng những người lại thích màn hình hiển thị với kích thước to hơn hoặc nhỏ hơn.

Một số trường hợp cắt xén hình ảnh nhất định xảy ra khi hero image của bạn thay đổi tỷ lệ để phù hợp với nhiều loại màn hình, vì vậy tốt nhất hãy coi các kích thước sau là nguyên tắc cơ bản chứ không phải là quy tắc cứng nhắc.

1. Kích thước Hero Image toàn màn hình và biểu ngữ

Kích thước lý tưởng cho Hero Image toàn màn hình là rộng 1.200 pixel với tỷ lệ khung hình 16: 9. Đối với banner hero image, kích thước lý tưởng là 1600 x 500 pixel.

Nếu bạn cần hình ảnh trong như pha lê, hoặc đối tượng mục tiêu của bạn duyệt trên màn hình lớn, bạn có thể phải kích thước lên đến 1.800 pixel. Hãy nhớ rằng điều này có thể dẫn đến kích thước tệp lớn làm chậm trang web của bạn.

Bạn có thể kiểm tra tốc độ tải của mình cho máy tính để bàn và thiết bị di động bằng Thông tin chi tiết về tốc độ trang của Google. Nó cung cấp một cái nhìn toàn diện về nội dung trang web nào tải đầu tiên và nơi có chỗ để cải thiện. Hãy nhắm đến thời gian tải trang từ một đến hai giây vì bạn có thể sẽ mất đi cơ hội giữ chân khách hàng nếu thời gian tải quá năm giây.

2. Kích thước Hero Image trên thiết bị di động

Kích thước lý tưởng cho Hero Image trên điện thoại di động là 800 x 1.200 pixel.

Mặc dù điều quan trọng là phải xem xét hình ảnh anh hùng của bạn trông như thế nào trên máy tính để bàn, nhưng bạn không thể bỏ qua trải nghiệm trên thiết bị di động. Gần 55% lưu lượng truy cập trang web toàn cầu vào năm 2021 được tạo trên điện thoại di động.

Thiết kế Hero Image của bạn phải đáp ứng và phù hợp với hướng dọc (điện thoại) và ngang (máy tính bảng).

Các loại Hero Image động, như video, hoạt động tốt trên máy tính để bàn, nhưng chúng thường phải được hoán đổi thành hình ảnh tĩnh cho thiết bị di động. Các video mất nhiều thời gian hơn để tải và không ai muốn thực hiện một lượt truy cập lớn vào gói dữ liệu của họ chỉ để xem trang web của bạn.

3. Nén Hero Image theo kích thước tiêu chuẩn

Nếu như Hero Image của bạn có kích thước tệp lớn (bất cứ thứ gì trên 1MB đều được xem là Hero Image vượt quá kích thước và dung lượng cho phép).

Bạn có thể sử dụng các trang web như TinyJPG, Compress JPG hoặc Adobe’s Photoshop Compressor để giảm kích thước mà không làm giảm chất lượng. Chỉ cần đảm bảo lấy đúng kích thước trước đó nếu không hình ảnh có thể bị mờ hoặc bị giãn.

Khi định kích thước Hero Image, hãy kiểm tra phân tích Google của bạn để xem độ phân giải màn hình điển hình của khách truy cập trang web của bạn. Sau đó, hãy thiết kế với đối tượng mục tiêu đó.

Chỉ cần nhớ kiểm tra Hero Image của bạn trên nhiều trình duyệt, màn hình và điện thoại để xem quy mô của nó như thế nào. Khi bạn đã có các kích thước phù hợp, đã đến lúc đưa nó vào trang web của bạn bằng cách sử dụng HTML và CSS.

Nguồn: Tổng hợp

ATPWeb mong rằng bài viết trên đã giúp các bạn biết thêm nhiều kiến thức bổ ích về Hero Image và nếu như bạn đang có nhu cầu xây dựng một Website phù hợp với thương hiệu của mình, nhưng vẫn chưa tìm được giải pháp tối ưu nhất thì hãy liên hệ ngay với ATPWeb trong hôm nay để được tư vấn miễn phí nhé !

BÀI VIẾT LIÊN QUAN

• Hướng dẫn thiết kế website wordpress cho người mới bắt đầu 2021
• 7 cách hiệu quả tối ưu hóa website cho thiết bị di động
• 5 Kỹ năng cơ bản để xây dựng một Website chất lượng hàng đầu
• 5 Cách để tăng lượt truy cập vào Website
• Cách để mỗi bài viết trên Website đạt 1000 views

• Hotline: 0707 6666 56
• Fanpage: http://facebook.com/atpweb.vn
• Website: http://atpweb.vn