Mục lục

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.

mobility hero image 1024x498 1 ATPWeb - Khởi Tạo Ngôi Nhà Online

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.

toolset homepage hero section ATPWeb - Khởi Tạo Ngôi Nhà Online

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.

10 hero image website ideas to inspire you 1 ATPWeb - Khởi Tạo Ngôi Nhà Online

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.

heroslider ATPWeb - Khởi Tạo Ngôi Nhà Online

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é !

thiet ke website tron goi tai Thanh pho Thu Duc.PNG ATPWeb - Khởi Tạo Ngôi Nhà Online
Thiết kế website tại ATPWeb
  • Website bán hàng ATPWeb giúp tối ưu hiệu quả SEO: Giúp bạn có một Website chuẩn SEO, khách hàng có thể tìm bạn trên Google một cách dễ dàng nhất.
  • 500+ giao diện Responsive đẹp mắt, tùy biến cao: Giúp bạn có một Website thân thiện, dù là bất cứ thiết bị nào Website sẽ cho họ một trải nghiệm mua hàng hấp dẫn.
  • Website tốc độ cao và băng thông không giới hạn: Giúp bạn có một Website tốc độ cao, khách hàng của bạn sẽ được trải nghiệm tốc độ load của một trang báo.
  • Dịch vụ cài đặt dễ dàng và nhanh chóng.
  • Tiết kiệm chi phí: Khi sử dụng dịch vụ thiết kế web trọn gói của ATPWeb bạn sẽ nhận được nhiều ưu đãi như: Kho bài viết, tài liệu, cẩm nang và khóa học miễn phí, khuyến mãi tùy theo từng gói dịch vụ, miễn phí các dịch vụ phát sinh và nhiều lợi ích khác.

 

BÀI VIẾT LIÊN QUAN

ATPWEB – XÂY DỰNG NGÔI NHÀ ONLINE
Liên hệ:
Đánh giá bài viết post

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

LIÊN HỆ TƯ VẤN

Thiết Kế Web
BLOG
Đăng ký tư vấn
Thiết kế website
Đồng hành cùng ATP WEB

Đăng ký tư vấn Thiết kế website