Các trang và phần web hiện đại được thiết kế để phản hồi đầy đủ trên các thiết bị, nghĩa là các hình ảnh được sử dụng trong phần web sẽ có tỷ lệ khác nhau tùy theo vị trí chúng được hiển thị, bố trí nào được sử dụng và thiết bị mà chúng đang được xem. Ví dụ: các trang hiện đại được thiết kế để trông đẹp mắt trên thiết bị di động và tự động thay đổi kích thước hình ảnh giúp tạo ra trải nghiệm hấp dẫn đó.
Kích thước hình ảnh nào phù hợp nhất?
Do thiết kế trang đáp ứng, không có chiều cao hoặc chiều rộng cụ thể tính bằng pixel để đảm bảo rằng hình ảnh sẽ duy trì hình dạng cụ thể trên các thiết bị và bố trí. Hình ảnh được thay đổi kích cỡ và cắt xén tự động để hiển thị kết quả tốt nhất có thể trên nhiều thiết bị và bố trí. Tuy nhiên, có một số hướng dẫn có thể giúp bạn đảm bảo hình ảnh của mình trông đẹp mắt trên các trang.
Việc tìm kích cỡ ảnh phù hợp nhất cho trang của bạn phụ thuộc vào những yếu tố sau:
- Tỷ lệ khung ảnh: mối quan hệ giữa chiều cao và độ rộng của hình ảnh
- Bố trí cột: loại và số lượng cột trên trang của bạn
- Bố trí phần web: bố trí bạn chọn cho phần web mà hình ảnh đang được sử dụng
Tỷ lệ khung ảnh
Tỉ lệ khung ảnh là mối quan hệ giữa độ rộng và độ cao của hình ảnh. Thường được biểu thị bằng hai số, chẳng hạn như 3:2, 4:3 hoặc 16:9. Độ rộng luôn là số đầu tiên. Ví dụ, tỷ lệ 16:9 có thể là chiều rộng 1600 pixel và chiều cao 900 pixel. Hoặc nó có thể là 1920 x 1080, 1280 x 720 hoặc bất kỳ sự kết hợp chiều rộng/chiều cao nào khác có thể được tính toán là 16:9. Bạn có thể tìm thấy các máy tính tỷ lệ khung hình trực tuyến và trong một số công cụ chỉnh sửa ảnh để giúp bạn xác định tỷ lệ khung hình của hình ảnh.
Trong hầu hết các trường hợp, hình ảnh trong phần web hiện đại hoạt động tốt nhất trên nhiều bố trí và thiết bị khi chúng có tỷ lệ khung ảnh là 16:9 hoặc 4:3, tùy thuộc vào bố trí.
Bố trí cột
Trang có thể được bố trí với các phần bao gồm các loại cột và bố trí khác nhau, chẳng hạn như cột có độ rộng toàn phần, một cột, hai cột, ba cột, một phần ba cột bên trái và một phần ba cột bên phải. Một quy tắc chung cho hình ảnh dự kiến sẽ lấp đầy chiều rộng của cột là chúng ít nhất phải rộng bằng cột nơi chúng được đặt. Ví dụ: một hình ảnh trong phần web hình ảnh trong một cột phải rộng tối thiểu 1204 điểm ảnh.
Sau đây là hướng dẫn về độ rộng cho mỗi bố trí cột:
| Bố cục | Chiều rộng tính bằng điểm ảnh |
|---|---|
| Cột có độ rộng đầy đủ | 1920 |
| Một cột | 1204 |
| Hai cột | 586 mỗi cột |
| Ba cột | 380 mỗi cột |
| Một phần ba cột bên trái | 380 cho cột bên trái; 792 cho cột bên phải |
| Cột một phần ba bên phải | 792 cho cột bên trái; 380 cho cột bên phải |
Do tính chất phản hồi của trang, hình ảnh trong cột có độ rộng đầy đủ sẽ luôn hiển thị ở mức độ rộng tối đa của màn hình với chiều cao tự động dựa trên kích cỡ màn hình.
Chiều cao của ảnh được đặt trong các bố trí cột khác sẽ phụ thuộc vào tỷ lệ khung ảnh của bạn. Sau đây là hướng dẫn về chiều cao/chiều rộng cho tỷ lệ khung hình 16:9 và 4:3 (làm tròn lên/xuống đến điểm ảnh gần nhất). Điều này hữu ích để giữ cho hình ảnh của bạn có chiều rộng và chiều cao có tỷ lệ phù hợp với thiết bị di động, ví dụ:
| TỶ LỆ KHUNG ẢNH BỐ TRÍ |
16 x 9 Rộng x Cao tính bằng điểm ảnh |
4 x 3 Rộng x Cao tính bằng điểm ảnh |
|---|---|---|
| Một cột | 1204 x 677 | 1204 x 903 |
| Hai cột | 586 x 330 | 586 x 439 |
| Ba cột | 380 x 214 | 380 x 285 |
| Một phần ba cột bên trái | 380 x 446 cho cột bên trái; 792 x 446 cho cột bên phải | 380 x 594 cho cột bên trái; 792 x 594 cho cột bên phải |
| Cột một phần ba bên phải | 792 x 446 cho cột bên trái; 380 x 446 cho cột bên phải | 792 x 594 cho cột bên trái; 380 x 594 cho cột bên phải |
Bố trí phần web
Các bố trí trong phần web bạn sử dụng cũng sẽ ảnh hưởng đến tỷ lệ của hình ảnh. Các ví dụ sau đây hiển thị các phần web khác nhau cùng một số tùy chọn và tỷ lệ khung ảnh mà bạn có thể sử dụng.
| Phần Web | Tỷ lệ khung ảnh |
|---|---|
| Phần web chính | Các tỷ lệ khung ảnh sau đây cho bố trí Ô và Tầng là:
|
| Phần web nội dung được tô sáng | 16:9 là tỷ lệ khung ảnh cho bố cục Băng chuyền, Cuộn phim và Lưới. Đây là ví dụ về tỷ lệ khung hình 16:9. Hình ảnh đầu tiên hiển thị bố trí Cuộn phim và hình ảnh thứ hai hiển thị bố trí Lưới: 
|
| Phần web Hình ảnh | Hình ảnh sẽ bung rộng theo chiều rộng của phần có chứa phần web. Đây là một ví dụ về hình ảnh trong phần web Hình ảnh sử dụng tỷ lệ khung ảnh 16:9. 
Bạn cũng có tùy chọn thay đổi tỷ lệ khung hình hoặc cắt rảnh tay bằng công cụ chỉnh sửa hình ảnh hoặc sử dụng núm điều khiển đổi kích cỡ để phóng to hoặc thu nhỏ hình ảnh. 
|
| Phần web bộ sưu tập ảnh | Có thể sử dụng các tỷ lệ khung ảnh sau đây trong các bố trí khác nhau:
|
| Phần web Tin tức | Tùy thuộc vào bố trí, hình ảnh trong phần web Tin tức có thể có độ phân giải 4:3, 16:9 hoặc 21:9. Đây là ví dụ về hình ảnh trong câu chuyện trên cùng và bố cục Băng chuyền: 
|
| Vùng tiêu đề trang | Hình ảnh sẽ trông đẹp nhất ở dạng ngang hoặc có tỷ lệ khung hình 16:9 trở lên và khi có kích cỡ tối thiểu là 1 MB. Ngoài ra, hãy đảm bảo đặt một tiêu điểm để giữ cho phần quan trọng nhất của ảnh trong tầm nhìn, đặc biệt là khi ảnh được sử dụng trong hình thu nhỏ, bố cục tin tức và kết quả tìm kiếm. Ví dụ (ảnh gốc 16:9) với tiêu điểm được đặt trên loa: 
|
| Hình thu nhỏ trang | Hình thu nhỏ của trang được hiển thị ở những vị trí như kết quả tìm kiếm, kết quả nội dung được tô sáng, bài đăng tin tức và nhiều nội dung khác. Theo mặc định, hình thu nhỏ sẽ đến từ vùng tiêu đề trang hoặc từ phần web theo thứ tự đầu tiên trên trang (chẳng hạn như góc trên bên trái của bố trí trang). Bạn có thể ghi đè lên mặc định và thay đổi hình thu nhỏ của trang. Khi bạn làm như vậy, tốt nhất là sử dụng hình ảnh có tỷ lệ khung ảnh là 16:9. Ví dụ (hình ảnh gốc 16:9): 
|
| Phần web liên kết nhanh | Phần web Liên kết nhanh có sáu bố trí khác nhau. Dưới đây là các tỷ lệ khung hình đặt sẵn:
|
Mẹo
Khi bạn thêm một hình ảnh vào khu vực tiêu đề trang hoặc phần web Hero, tốt nhất là đặt tiêu điểm vào khu vực của hình ảnh bạn muốn luôn hiển thị. Để tìm hiểu thêm về việc đặt tiêu điểm cho hai kịch bản này, hãy xem mục Sử dụng phần web Chính vàTạo và sử dụng trang hiện đại trên site SharePoint.
Đề xuất hình ảnh tiêu đề site
Ngoài các trang, bạn có thể muốn thêm logo hoặc hình ảnh tùy chỉnh trong bố trí mở rộng. Sau đây là khuyến nghị kích cỡ cho các thành phần đó.
| Phần tử | Mô tả | Đề xuất Rộng x Cao tính bằng điểm ảnh |
|---|---|---|
| Logo site | Logo lớn hơn, có thể không hình vuông và trong suốt tùy thuộc vào thiết kế được tải lên. | 192 x 64 Định dạng: PNG, JPEG, SVG (SVG không được phép trên các trang web được kết nối với nhóm) |
| Hình thu nhỏ logo site | Hình thu nhỏ logo hình vuông được sử dụng nếu không có logo site nào được tải lên hoặc ở những nơi yêu cầu định dạng hình vuông. Phần tử này là bắt buộc. |
64 x 64 Định dạng: PNG, JPEG, SVG (SVG không được phép trên các trang web được kết nối với nhóm) |
| Logo site bố trí mở rộng | Bố trí đầu trang mở rộng có chiều rộng logo site mở rộng. | 300 x 64 Định dạng: JPEG, PNG, SVG |
| Ảnh nền Bố trí Mở rộng | Một hình nền mới có thể được sử dụng với tiêu đề mở rộng. | 2560 x 164 Định dạng: JPEG, PNG |