Современные страницы и веб-части разработаны так, чтобы быть полностью адаптивными на разных устройствах, а это означает, что изображения, используемые в веб-частях, будут масштабироваться по-разному в зависимости от того, где они отображаются, какой макет используется и на каком устройстве они просматриваются. Например, современные страницы прекрасно выглядят на мобильных устройствах, и автоматическое масштабирование изображения помогает создать такой привлекательный интерфейс.
Какие размеры изображений подходят лучше всего?
Из-за адаптивного дизайна страницы не существует определенной высоты или ширины в пикселях, чтобы гарантировать, что изображение сохранит определенную форму на разных устройствах и макетах. Размер изображения изменяется и автоматически обрезаются, чтобы добиться наилучшего результата на различных устройствах и макетах. Однако есть несколько рекомендаций, которые помогут вам убедиться, что ваши изображения отлично смотрятся на ваших страницах.
Подбор оптимальных размеров изображений для страницы зависит от следующих факторов:
- Пропорции: связь между высотой и шириной изображений
- Макет столбца: тип и количество столбцов на странице
- Макет веб-части: макет, выбранный для веб-части, в которой используется изображение
Пропорции
Пропорции — это отношение между шириной и высотой изображений. Обычно оно выражается двумя числами, например 3:2, 4:3 или 16:9. Ширина всегда является первым числом. Например, соотношение сторон 16:9 может составлять 1600 пикселей в ширину и 900 пикселей в высоту. Или это могут быть 1920 x 1080, 1280 x 720 или любые другие сочетания ширины и высоты, которые можно вычислить как 16:9. Вы можете найти калькуляторы пропорций в Интернете и в некоторых инструментах редактирования фотографий, которые помогут вам определить пропорции ваших изображений.
В большинстве случаев изображения в современных веб-частях лучше всего подходят для разных макетов и устройств, когда их пропорции составляют 16:9 или 4:3 в зависимости от макета.
Макеты столбцов
Страница может быть разбита на разделы с различными типами столбцов и макетами, например столбцы на всю ширину, один столбец, два столбца, три столбца, одна треть слева и одна треть правая колонка. Общее правило для изображений, которые должны заполнить ширину столбца, заключается в том, что они должны быть по крайней мере ширины столбца, в котором они размещены. Например, изображение в веб-части изображения в одном столбце должно быть не менее 1204 пикселей в ширину.
Ниже приведены рекомендации по ширине для каждого макета столбца.
| Макет | Ширина в пикселях |
|---|---|
| Столбец во всю ширину | 1920 |
| Одна колонка | 1204 |
| Два столбца | 586 в столбце |
| Три столбца | 380 за столбец |
| Левый столбец с одной третью | 380 для левой колонки; 792 для правого столбца |
| Одна треть правого столбца | 792 для левой колонки; 380 для правого столбца |
Из-за адаптивного характера страниц изображения в столбцах во всю ширину всегда будут отображаться во всю ширину экрана с автоматической высотой в зависимости от размера экрана.
Высота изображений, размещенных в других макетах столбцов, зависит от ваших пропорций. Ниже приведены рекомендации по высоте/ширине для пропорций 16:9 и 4:3 (округлены до ближайшего пикселя). Это помогает, чтобы сохранить ширину и высоту изображений, которые подходят для мобильных устройств, например:
| ПРОПОРЦИИ МАКЕТ |
16 х 9 Ширина x высота в пикселях |
4 х 3 Ширина x высота в пикселях |
|---|---|---|
| Одна колонка | 1204 х 677 | 1204 х 903 |
| Два столбца | 586 х 330 | 586 х 439 |
| Три столбца | 380 х 214 | 380 х 285 |
| Левый столбец с одной третью | 380 x 446 для левой колонки; 792 x 446 для правой колонки | 380 x 594 для левой колонки; 792 x 594 для правого столбца |
| Одна треть правого столбца | 792 x 446 для левой колонки; 380 x 446 для правого столбца | 792 x 594 для левой колонки; 380 x 594 для правого столбца |
Макеты веб-частей
Макеты в используемых веб-частях также влияют на масштабирование изображений. В следующих примерах показаны различные веб-части, а также некоторые параметры и пропорции, которые вы можете использовать.
| Веб-часть | Пропорции |
|---|---|
| Веб-часть главного имиджевого баннера | Для макетов «Плитки» и «Слои» используются следующие пропорции:
|
| Веб-часть "Выделенный контент" | Пропорции 16:9 подходят для макетов "Карусель", "Пленка" и "Сетка". Вот пример пропорций 16:9. На первом изображении показан макет "Диафильма", а на втором — макет "Сетка". 
|
| Веб-часть рисунков | Изображения будут развернуты до ширины раздела, содержащего веб-часть. Ниже приведен пример изображения в веб-части "Изображение" с пропорциями 16:9. 
Вы также можете изменить пропорции или произвольно обрезать изображение с помощью инструмента редактирования изображений или использовать маркеры изменения размера, чтобы увеличить или уменьшить изображение. 
|
| Веб-часть "Коллекция изображений" | В разных макетах можно использовать следующие пропорции:
|
| Веб-часть "Новости" | В зависимости от макета изображения в веб-части "Новости" могут иметь пропорции 4:3, 16:9 или 21:9. Вот пример изображений в топовой истории и макете карусели: 
|
| Область заголовка страницы | Изображения лучше всего смотрятся в альбомной ориентации или с пропорциями 16:9 или выше и при размере не менее 1 МБ. Кроме того, не забудьте установить фокальную точку, чтобы держать в поле зрения самую важную часть изображения, особенно если изображение используется в эскизах, новостных макетах и результатах поиска. Пример (исходное изображение 16:9) с фокусной точкой, установленной на динамике: 
|
| Эскиз страницы | Эскизы страниц отображаются в таких местах, как результаты поиска, выделенный контент, новостные посты и т. д. По умолчанию эскиз находится в области заголовка страницы или в веб-части, расположенной в первом порядке на странице (например, в левом верхнем углу макета страницы). Вы можете переопределить значение по умолчанию и изменить эскиз страницы. При этом лучше всего использовать изображение с пропорциями 16:9. Пример (исходное изображение 16:9): 
|
| Веб-часть "Быстрые ссылки" | Веб-часть "Быстрые ссылки" имеет шесть различных макетов. Ниже приведены готовые пропорции.
|
Совет
При добавлении изображения в область заголовка страницы или веб-часть главного имиджевого баннера также рекомендуется установить фокальную точку в области изображения, которая должна отображаться всегда. Дополнительные сведения о настройке фокусной точки для этих двух сценариев см. в статьях Использование веб-части главного имиджевого баннера и Создание и использование современных страниц на сайте SharePoint.
Рекомендации по изображениям для заголовка сайта
Помимо страниц, вы можете добавить собственные логотипы или изображения в расширенном макете. Ниже приведены рекомендации по размеру для этих элементов.
| Элемент | Описание | Рекомендации Ширина x высота в пикселях |
|---|---|---|
| Логотип сайта | Более крупный логотип, который может быть неквадратным и прозрачным в зависимости от загруженного дизайна. | 192 х 64 Формат: PNG, JPEG, SVG (SVG не допускается на сайтах, подключенных к группе) |
| Эскиз логотипа сайта | Квадратный эскиз логотипа, который используется, если логотип сайта не отправлен или в местах, где требуется квадратный формат. Этот элемент является обязательным. |
64 х 64 Формат: PNG, JPEG, SVG (SVG не допускается на сайтах, подключенных к группе) |
| Расширенная верстка логотипа сайта | Расширенный макет верхнего колонтитула имеет расширенную ширину логотипа сайта. | 300 х 64 Формат: JPEG, PNG, SVG |
| Фоновое изображение расширенного макета | Новое фоновое изображение, которое можно использовать с расширенным верхним колонтитулом. | 2560 х 164 Формат: JPEG, PNG |