Thiết kế website kích thước như thế nào là hợp lí
Website, fanpage Facebook là “vật bất ly thân” của doanh nghiệp khi tiến hành chiến dịch digital marketing. Ai ai cũng muốn xây dựng trang web trở nên chuyên nghiệp, hấp dẫn. Và để làm được điều đó không thể bỏ qua yếu tố hình ảnh trên website. Kích thước ảnh chuẩn trên website là bao nhiêu? Con số “vàng” nào bạn cần chú ý khi thiết kế website? Bài viết này, Markdao sẽ bật mí kích thước ảnh chuẩn trên website cho những người mới bắt đầu.
Kích thước ảnh chuẩn trên website mà marketer buộc phải ghi nhớ
Một website chuyên nghiệp và chuẩn xác là mục tiêu của mọi designer khi thiết kế web. Để đạt được điều đó, trang web phải đáp ứng đầy đủ các tiêu chí mà Google đưa ra nhằm tối ưu nhất cho website của mình. Một trong số những yêu cầu của Google là kích thước hình ảnh. Theo đó, trước khi đăng ảnh lên website chúng ta phải đảm bảo rằng hình ảnh của mình phải đủ chuẩn. Chưa bàn đến việc hình ảnh phù hợp hay không, xấu hay đẹp, nhoè hay nét, kích thước hình phải chính xác là yếu tố đầu tiên (vì Google không đọc được hình ảnh, chỉ đọc kích thước, alt ảnh; còn chất lượng hình tốt là để tăng trải nghiệm người dùng).
Nếu bạn đã thay đổi các thông số kích thước ở cấu hình hệ thống, trước khi đăng ảnh bạn hãy chỉnh sửa kích thước ảnh về đúng chuẩn đấy. Nếu bạn chưa thay đổi thì dưới đây là những thông số các kích thước ảnh chuẩn trên website:
- Kích thước hình ảnh Slider ở trang chủ: Kích thước ảnh Slider website: 1360 x 540 pixel
- Kích thước hình ảnh trong bài viết: Kích thước ảnh minh họa: 300 x 188 pixel
- Kích thước ảnh chi tiết: 800 x 500 pixel
- Kích thước hình ảnh bên trong sản phẩm: đối với hình ảnh minh họa là 300 x 400 pixel, với hình ảnh chi tiết thì lớn gấp đôi là 600 x 800 pixel
Nhìn chung thì các kích thước ảnh chuẩn trên website kể trên có thể thay đổi tùy ý thích nhưng không nên thay đổi quá nhiều so với thông số gốc vì nó sẽ bị lệch chuẩn, hình ảnh sẽ không đúng chuẩn của Google đưa ra.
Khi bắt tay vào thiết kế website, bạn tuyệt đối phải lưu ý những tiêu chuẩn vàng này, vì điều này sẽ giúp Google đánh giá cao trang web của bạn, từ đó đem lại hiệu quả cho hoạt động SEO. Trải nghiệm người dùng trên web tốt hay không phụ thuộc một phần vào kích thước ảnh này.
Kích thước hình ảnh trên Facebook có giống với kích thước ảnh chuẩn trên website không?
Giống như kích thước ảnh chuẩn trên website, Facebook cũng rất quan trọng, thậm chí còn quan trọng hơn vì chúng ảnh hưởng trực tiếp đến hiệu quả của các chiến dịch quảng cáo. Giống như thiết kế website, hình ảnh đẹp chuẩn giúp bài post trên fanpage của doanh nghiệp đẹp và hấp dẫn hơn, đồng thời có nhiều lượt tương tác hơn. Dưới đây là những quy định về kích thước khi đăng hình ảnh của Facebook trong năm 2019 mà bạn cần biết.
- Kích thước hình ảnh theo link website trên Facebook: Khi bạn chia sẻ link website của bạn lên Facebook, sẽ có hình ảnh đi kèm theo link, gọi là ảnh thumbnail. Hình ảnh lúc này sẽ hiển thị đầy đủ và đẹp nhất khi ảnh thumbnail website của bạn tỷ lệ với kích thước 1200 x 630 pixel. Đề xuất thông số kích thước hình tối thiểu bạn cần thiết kế là 600 x 315 pixel và dung lượng tối đa là 8 MB.
- Đối với hình ảnh đi kèm với bài post thông thường, kích thước cần tỉ lệ với 1200 x 630 và kích thước tối thiểu đề xuất là 600 x 315 pixel. Markdao Vietnam thường chọn thiết kế hình ảnh post facebook dưới dạng hình chữ nhật đứng, hoặc hình vuông để phù hợp với nhiều thiết bị di động hơn.
- Kích thước hình ảnh đại diện trên Facebook: Đối với hình ảnh đại diện bạn chỉ cần làm 1 hình ảnh với kích thước bất kỳ, miễn phải là hình vuông. Kích thước khuyên dùng: 300 x 300 pixel và kích thước cho hình ảnh đẹp nhất: 2048 x 2048 pixel.
- Kích thước ảnh bìa trên trang cá nhân: Trên máy tính kích thước ảnh bìa nên là 851 x 315 pixel, trên smartphone là 640 x 360 pixel.
- Kích thước hình ảnh bìa chuẩn trên fanpage: Trên máy tính kích thước ảnh bìa nên là 820 x 312 pixel, trên smartphone là 820 x 462 pixel. Do chúng ta không thể đăng nhiều ảnh bìa riêng biệt cho từng thiết bị với kích thước khác nhau, cho nên các designer lưu ý thiết kế chùa những khoảng trống phù hợp để dù ở thiết bị nào thì hình ảnh cũng không bị cắt xén mất đẹp.
Các công cụ để điều chỉnh kích thước ảnh chuẩn trên website
Bạn không biết làm sao để gia giảm hoặc chỉnh sửa cho đúng thông số các kích thước ảnh chuẩn trên website. Đây là gợi ý dành cho bạn:
- Adobe Photoshop: phần mềm dẫn đầu thị trường về sửa ảnh bitmap và được coi là chuẩn cho các ngành liên quan tới chỉnh sửa ảnh.
Ngoài ra bạn có thể sử dụng các công cụ chỉnh sửa ảnh trực tuyến sau:
- Pixlr: một bộ công cụ hình ảnh dựa trên đám mây và các tiện ích, bao gồm một số trình chỉnh sửa ảnh, tiện ích trình duyệt ghi màn hình và dịch vụ chia sẻ ảnh.
- Fotor: Đây là công cụ hoàn toàn miễn phí, hỗ trợ điều chỉnh độ sáng, độ tương phản, cân bằng trắng và độ bão hòa màu của ảnh. Đồng thời, cho phép làm nổi bật hoặc làm mờ ảnh, thêm chi tiết cho ảnh, cắt, kéo và xoay chiều ảnh.
- Canva: sử dụng ngôn ngữ tiếng Việt, định dạng kéo và thả và cung cấp quyền truy cập vào hơn một triệu ảnh, đồ họa và phông chữ.
Bật mí điều chỉnh kích thước ảnh chuẩn trên website bằng Paint trong windows
Trong windows có sẵn Paint là công cụ hỗ trợ cho việc chỉnh sửa kích thước ảnh chuẩn trên website khá dễ cho những người không chuyên.
Sử dụng paint để resize
Bước 1: Bạn mở hình ảnh lên với Paint
Bước 2: Chọn Resize
Bước 3: Paint sẽ cho bạn 2 lựa chọn để chỉnh kích thước, theo phần trăm và theo pixel. Thông thường, chúng ta sẽ chọn pixel để dễ chỉnh sửa chi tiết con số.
Lưu ý: Bạn nhớ nhấn vào ô Maintain aspect ratio để khi điều chỉnh chiều ngang thì chiều dài ảnh cũng sẽ được điều chỉnh theo, không làm hình bị méo.
Bước 4: Nhập thông số kích thước cụ thể.
Bước 4: Nhấn Ok rồi nhấn Save. Chỉnh sửa xong kích thước thì hình ảnh của hình sẽ giảm xuống.
Chỉnh sửa kích thước ảnh chuẩn trên website nền tảng WordPress, tại sao không?
Đối với website sử dụng nền tảng WordPress, thật dễ dàng để bạn có thể chỉnh sửa hình ảnh về kích thước ảnh chuẩn trên website. Kích thước chuẩn xác vừa giúp trang web tối ưu hơn, mà dung lượng vừa đủ còn giúp web nhẹ hơn, load nhanh hơn.
Bước 1: Bạn up hình lên website rồi chọn Thêm Media
Bước 2: Tải tập tin đó lên
Bước 3: Trước khi chèn hình vào bài viết, bạn hãy chọn
+ Liên kết tới: tập tin đa phương tiện
+ Kích cỡ: trung bình
Bước 4: Nhấn vào “Chèn vào bài viết”
Hy vọng những thông tin mà Markdao Vietnam cung cấp trên đây sẽ giúp ích cho “công cuộc” thiết kế web cũng như chiến lược thiết kế banner Facebook của bạn. Nếu bạn vẫn còn băn khoăn về nhiều yếu tố khác trong website, hay một chiến lược social media phù hợp với doanh nghiệp, đừng ngần ngại liên hệ đến chúng tôi. Markdao Vietnam cung cấp giải pháp digital toàn diện từ SEO, SEM, Social Media Planning và thiết kế website.
Kham khảo thêm:
Kích thước của website có 2 dạng chính là kích thước cố định (fixed layout) và kích thước lưu động (fluid layout). Ngoài ra còn có dạng bổ sung thứ 3 là kích thước co giãn (elastic layout).
- Kích thước cố định là kích thước mà chiều rộng (width) của website được thiết lập theo 1 thông số cố định: Ví dụ 800px, 1000px, 960px, 1260px, v.v.v
- Kích thước lưu động là kích thước được tính theo thông số tỉ lệ % thay vì thông số cố định px và do đó, chiều rộng của website co giãn theo kích thước của cửa sổ trình duyệt (browser windows)
- Kích thước co giãn (elastic layout) là dạng kết hợp của 2 dạng trên.
1) Kích thước cố định
Đối với kích thước cố định, vì chiều ngang của website được thiết lập một con số cố định nên các website này không thay đổi kích thước theo độ phân giải màn hình mà vẫn giữ nguyên một kích thước cố định.
Ví dụ:
Đối với website có chiều rộng 800px thì máy tính có độ phân giải 800×600 sẽ thấy website hiển thị toàn màn hình, lắp đầy màn hình khi trình duyệt ở chế độ maxium.
Tuy nhiên, khi máy tính có độ phân giải cao hơn như 1024 hoặc 1280 thì website không còn hiển thị toàn màn hình nữa nhưng sẽ dư ra một khoảng trông bên hông của website.
Đối với fixed layout, kích thước chuẩn khi được sử dụng bởi 90% các thiết kế website mới là 960px vì kích thước này phù hợp với màn hình có độ phân giải 1024 hoặc cao hơn và độ phân giải 1024 được xem là độ phân giải chuẩn của máy tính bởi hầu hết các nhà sản xuất phần cứng cũng như nhà thiết kế.
Hầu hết các nhà thiết kế thích sử dụng fixed layout hơn là fluid layout vì đối với fixed layout, graphic designers (đồ họa viên) có thể tự do thực hiện ý tưởng của mình mà không sợ làm khó cho bộ phận lập trình. Hơn nữa, fixed layout đảm bảo kết quả cho ra là thống nhất trên mọi độ phân giải, nhà thiết kế có thể kiểm soát kết quả hiển thị với user.
Tuy nhiên, bên cạnh những ưu điểm của mình, fixed layout vẫn có những khuyết điểm mà ta có thể tổng hợp như sau:
Ưu điểm
- Trên phương diện thiết kế, fixed layout dễ thiết kế và triển khai hơn vì nhà thiết kế web có thể kiểm soát kích thước website của minh
- Chiều rộng website là cố định và giống nhau trên tất cả trình duyệt bất chấp độ phân giải màn hình. Vì thế, các thành phần HTML có chiều rộng cố định được bố cục dễ dàng hơn, nhanh hơn
- Được hỗ trợ bởi nhiều trình duyệt hơn (khi không cần sử dụng thuộc tính CSS như min-width, max-width)
- Ngay cả khi website được thiết kế với độ phân giải 800×600, nội dung website vẫn có thể được đọc dễ dàng ở những máy có độ phân giải cao hơn rất nhiều.
Khuyết điểm
- Website với kích thước cố định có thể tạo ra nhiều khoảng trắng không cần thiết ở bên hông website khi xem ở độ phân giải lớn, tạo nên cảm giác mất cân đối, thiếu tỉ lệ hài hòa và xung khắc với một số nguyên lý thiết kế website.
- Nếu thiết kế website với fixed width cao hơn độ phân giải màn hình có thể làm xuất hiện thanh cuộn ngang (horizontal scrollbar) gây khó khăn cho việc lướt web.
2) Kích thước lưu động (Fluid Layout)
Đối với kích thước lưu động (fluid layout / liquid layout), các thành phần trong website có chiều rộng là tỉ lệ % thay vì đơn vị cố định px . Nhờ đó, website có thể co giãn theo độ phân giải của màn hình.
Fluid layout hay còn gọi là liquid layout sử dụng tỉ lệ % cho các thành phần HTML của nó và hạn chế tối đa việc sử dụng px. Do đó layout có thể thay đổi theo từng độ phân giải nhất định.
Cũng như fixed layout, fluid layout có ưu, khuyết điểm tương đương như:
Ưu điểm
- Thân thiện hơn với người dùng vì có thể tự điều chỉnh tùy từng độ phân giải
- Khoảng trắng dư thừa không quá khác biệt cho dù trình duyệt và độ phân giải RẤT khác nhau. Điều này giúp tạo nên sự cân bằng tốt hơn fixed layout
- Nếu được thiết kế tốt, fluid layout có thể chấm dứt tình trạng thanh cuộn ngang (horizontal scrollbar) ở máy có độ phân giải quá thấp
Khuyết điểm
- Hạn chế hơn và khó khăn hơn trong việc sử dụng graphics để tô điểm cho website của mình
- Giao diện có thể hiển thị tốt trên máy nhà thiết kế nhưng bị sai khi hiển thị trên máy người dùng vì nhà thiết kế khó kiểm soát bố cục sử dụng fluid layout hơn là fixed layout
- Hình ảnh, video hoặc các thành phần web cần phải có chiều rộng cố định có thể gặp không ít khó khăn, trục trặc khi kết hợp với các thành phần có chiều rộng co giãn
- Với những máy có độ phân giải CỰC LỚN, mặc dù website có thể tự co giãn nhưng nếu nội dung bên trong website không đủ để lắp đầy bố cục thì nó có thể tạo ra RẤT NHIỀU những khoảng trắng không cần thiết
Từ khóa:
kích thước thiết kế website
kích thước thiết kế web
kích thước chuẩn thiết kế website
kích thước chữ trong thiết kế web
kích thước layout web
kích thước chuẩn khi thiết kế website
kích thước màn hình thiết kế web
kích thước thường thấy khi thiết kế web trên photoshop
kích thước banner tiêu chuẩn trong thiết kế web
kích thước thiết kế app
kích thước web
kích thước chuẩn của website
kích thước chữ trong html
kích thước chữ
kích cỡ chữ trong html
kích thước responsive
kích thước giao diện web
kích thước của một trang web