Сучасні сторінки та веб-частини розроблено так, щоб вони могли повністю реагувати на різних пристроях. Це означає, що масштаб зображень, які використовуються у веб-частинах, змінюватиметься залежно від того, де вони відображаються, який макет використовується, і пристрою, на якому вони переглядаються. Наприклад, сучасні сторінки створені, щоб чудово виглядати на мобільних пристроях, а автоматичне масштабування зображення допомагає зробити їх привабливими.
Які розміри зображень підходять найкраще?
Через адаптивний дизайн сторінки немає певної висоти або ширини в пікселях, які гарантують, що зображення матиме певну форму на різних пристроях і в різних макетах. Зображення автоматично змінюють розмір і обтинаються для найкращого результату на різних пристроях і макетах. Проте є кілька рекомендацій, які допоможуть переконатися, що зображення виглядатимуть на сторінках.
Вибір найкращого розміру зображення для сторінки залежить від таких факторів:
- Пропорції: співвідношення між висотою та шириною зображень
- Розташування стовпців: тип і кількість стовпців на сторінці.
- Макет веб-частини: макет, який ви вибираєте для веб-частини, у якій використовується зображення
Пропорції
Пропорції – це відношення між шириною та висотою зображення. Зазвичай він виражається у вигляді двох чисел, наприклад 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 х 446 для лівої колонки; 792 x 446 для правого стовпця | 380 х 594 для лівого стовпця; 792 x 594 для правого стовпця |
| Одна третина правого стовпця | 792 х 446 для лівого стовпця; 380 x 446 для правого стовпця | 792 х 594 для лівої колонки; 380 x 594 для правого стовпця |
Макети веб-частин
Макети у використаних веб-частинах також впливають на масштаб зображень. У прикладах нижче наведено різні веб-частини, а також деякі параметри та пропорції, які можна використовувати.
| Веб-частина | Пропорції |
|---|---|
| Веб-частина Hero | Існують такі пропорції для макетів "Плитки" й "Шари":
|
| Веб-частина "Виділений вміст" | 16:9 – це співвідношення сторін для макетів "Карусель", "Кінострічка" та "Сітка". Ось приклад співвідношення сторін 16:9. На першому зображенні показано макет Filmstrip, а на другому – Grid: 
|
| Веб-частина зображення | Зображення буде розширено до ширини розділу, що містить цю веб-частину. Ось приклад зображення у веб-частині "Зображення", у якому використовуються пропорції 16:9. 
Ви також можете змінити пропорції або довільно обітнути зображення за допомогою інструмента редагування зображення або скористатися маркерами змінення розміру, щоб збільшити або зменшити зображення. 
|
| Веб-частина "Колекція зображень" | У різних макетах можна використовувати такі пропорції:
|
| Веб-частина "Новини" | Залежно від макета, зображення у веб-частині "Новини" можуть мати формат 4:3, 16:9 або 21:9. Ось приклад зображень у верхньому сюжеті та макеті "Карусель": 
|
| Область заголовка сторінки | Зображення найкраще виглядають в альбомній орієнтації або мають формат 16:9 або більше, а розмір має розмір не менше 1 МБ. Також важливо зосередити увагу на найважливішій частині зображення, особливо якщо зображення використовується в ескізах, макетах новин і результатах пошуку. Приклад (вихідне зображення 16:9) із точкою фокусування на динаміку: 
|
| Ескіз сторінки | Ескізи сторінок відображаються в результатах пошуку, виділених результатах вмісту, дописах із новинами тощо. За замовчуванням ескіз походить з області заголовка сторінки або з веб-частини, розташованої в першому порядку на сторінці (наприклад, у верхньому лівому куті макета сторінки). Ви можете обійти стандартне значення та змінити ескіз сторінки. Для цього краще використовувати зображення зі співвідношенням сторін 16:9. Приклад (вихідне зображення 16:9): 
|
| Веб-частина "Швидкі посилання" | Веб-частина "Швидкі посилання" має шість різних макетів. Ось готові пропорції:
|
Порада.
Коли ви додаєте зображення до області заголовка сторінки або веб-частини Hero, також радимо встановити фокус в області зображення, яку потрібно постійно відображати. Докладні відомості про налаштування фокуса для цих двох сценаріїв див. у статтях "Використання веб-частини 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 |