Современные страницы и веб-части предназначены для полного реагирования на разных устройствах. Это означает, что изображения, используемые в веб-частях, будут масштабироваться по-разному в зависимости от того, где они отображаются, какой макет используется и устройство, на котором они просматриваются. Например, современные страницы отлично выглядят на мобильных устройствах, а автоматическое масштабирование изображений помогает создать этот привлекательный интерфейс.
Какие размеры изображений лучше всего работают?
Из-за адаптивной структуры страницы нет определенной высоты или ширины в пикселях, которые гарантируют, что изображение будет поддерживать определенную форму на разных устройствах и макетах. Изображения автоматически изменяются и обрезаются для отображения наилучшего результата на различных устройствах и макетах. Однако существуют некоторые рекомендации, которые помогут вам убедиться, что изображения отлично выглядят на ваших страницах.
Выбор наиболее подходящих размеров изображений для страницы зависит от следующих факторов:
- Пропорции: связь между высотой и шириной изображений
- Макет столбца: тип и количество столбцов на странице
- Макет веб-части: макет, выбранный для веб-части, в которой используется изображение.
Пропорции
Пропорции — это связь между шириной и высотой изображений. Обычно он выражается в виде двух чисел, таких как 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 x 9 Ширина x высота в пикселях |
4 x 3 Ширина x высота в пикселях |
|---|---|---|
| Одна колонка | 1204 x 677 | 1204 x 903 |
| Два столбца | 586 x 330 | 586 x 439 |
| Три столбца | 380 x 214 | 380 x 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 — это пропорции для макетов Carousel, Filmstrip и Grid. Ниже приведен пример пропорций 16:9. На первом изображении показан макет Filmstrip, а на втором — макет Сетка: 
|
| Веб-часть "Изображение" | Изображения будут расширяться до ширины раздела, содержащего веб-часть. Ниже приведен пример изображения в веб-части "Изображение", которая использует пропорции 16:9. 
Вы также можете изменить пропорции или свободно обрезать с помощью средства редактирования изображений или использовать маркеры изменения размера, чтобы сделать изображение больше или меньше. 
|
| Веб-часть коллекции образов | Следующие пропорции можно использовать в разных макетах:
|
| Веб-часть "Новости" | В зависимости от макета изображения в веб-части "Новости" могут быть 4:3, 16:9 или 21:9. Ниже приведен пример изображений в верхней истории и макете карусели: 
|
| Область заголовка страницы | Изображения лучше всего выглядят, когда они альбомные или 16:9 или больше по пропорциям, а также если они размером не менее 1 МБ. Кроме того, не забудьте установить фокус, чтобы держать наиболее важную часть изображения в поле зрения, особенно если рисунок используется в эскизах, макетах новостей и результатах поиска. Пример (исходное изображение 16:9) с фокусом на говорящем: 
|
| Эскиз страницы | Эскизы страниц отображаются в таких местах, как результаты поиска, результаты выделенного содержимого, новостные публикации и многое другое. По умолчанию эскиз создается из области заголовка страницы или из веб-части, которая находится в первом порядке на странице (например, в левом верхнем углу макета страницы). Вы можете переопределить значение по умолчанию и изменить эскиз страницы. При этом лучше использовать изображение с пропорциями 16:9. Пример (исходное изображение 16:9): 
|
| Веб-часть "Быстрые ссылки" | Веб-часть Быстрые ссылки имеет шесть различных макетов. Ниже приведены предустановленные пропорции.
|
Совет
При добавлении изображения в область заголовка страницы или веб-часть "Главный герой" лучше также задать фокус в области изображения, которое вы хотите всегда отображать. Дополнительные сведения о настройке фокуса для этих двух сценариев см. в разделах Использование веб-части Hero и Создание и использование современных страниц на сайте SharePoint.
Рекомендации по изображению заголовка сайта
В дополнение к страницам может потребоваться добавить пользовательские логотипы или изображения в расширенном макете. Ниже приведены рекомендации по размеру для этих элементов.
| Элемент | Описание | Рекомендации Ширина x высота в пикселях |
|---|---|---|
| Логотип сайта | Более крупный логотип, который может быть некверным и прозрачным в зависимости от загруженного дизайна. | 192 x 64 Формат: PNG, JPEG, SVG (SVG не разрешен на сайтах, подключенных к группам) |
| Эскиз логотипа сайта | Эскиз квадратного логотипа, который используется, если логотип сайта не загружен или в местах, где требуется квадратный формат. Этот элемент является обязательным. |
64 x 64 Формат: PNG, JPEG, SVG (SVG не разрешен на сайтах, подключенных к группам) |
| Логотип сайта с расширенным макетом | Расширенный макет заголовка имеет расширенную ширину логотипа сайта. | 300 x 64 Формат: JPEG, PNG, SVG |
| Фоновое изображение расширенного макета | Новое фоновое изображение, которое можно использовать с расширенным заголовком. | 2560 x 164 Формат: JPEG, PNG |