Съвременните страници и уеб части са предназначени да реагират напълно на различни устройства, което означава, че изображенията, използвани в уеб частите, ще се мащабират по различен начин в зависимост от мястото, където се показват, кое оформление се използва и устройството, на което се преглеждат. Например модерните страници са създадени така, че да изглеждат страхотно на мобилни устройства, а автоматичното мащабиране на изображенията ви помага да създадете това привлекателно изживяване.
Какви размери на изображения вършат най-добра работа?
Поради адаптивния дизайн на страниците няма определена височина или ширина в пикселите, които да гарантират, че изображението ще запази определена форма на различни устройства и оформления. Изображенията се преоразмеряват и изрязват автоматично, за да покажат възможно най-добрия резултат на различни устройства и оформления. Има обаче някои насоки, които могат да ви помогнат да сте сигурни, че изображенията ви изглеждат чудесно на страниците ви.
Намирането на най-добрите размери на изображения за вашата страница зависи от следните фактори:
- Пропорция: отношението между височина и ширина на изображенията
- Оформление на колоните: тип и брой колони на страницата
- Оформление на уеб част: избраното от вас оформление за уеб частта, в която се използва изображението
Пропорция
Пропорцията е отношението между ширина и височина на изображенията. Обикновено се изразява чрез две числа, например 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 е пропорцията за оформленията "Въртележка", "Филмова лента" и "Мрежа". Ето пример за пропорция 16:9. Първото изображение показва оформлението "Филмова лента", а второто показва оформлението "Мрежа": 
|
| Уеб част за изображение | Изображенията ще се разширяват до ширината на секцията, която съдържа уеб частта. Ето пример за изображение в уеб частта за изображение, което използва пропорция 16:9. 
Също така имате възможност да промените пропорцията или свободно изрязване с помощта на инструмента за редактиране на изображения или да използвате манипулаторите за преоразмеряване, за да направите изображението по-голямо или по-малко. 
|
| Уеб част за галерия с изображения | Следните пропорции могат да се използват в различни оформления:
|
| Уеб част за новини | В зависимост от оформлението изображенията в уеб частта "Новини" могат да бъдат 4:3, 16:9 или 21:9. Ето пример за изображения в горната история и оформление на въртележка: 
|
| Област за заглавие на страница | Изображенията изглеждат най-добре, когато са пейзажни или с пропорция 16:9 или повече, както и когато са с размер поне 1 МБ. Също така не забравяйте да зададете фокусна точка, така че да запазите винаги най-важната част от картината видима, особено когато картината се използва в миниатюри, оформления на новини и в резултати от търсене. Пример (оригиналното изображение 16:9) с фокусна точка, зададена на високоговорителя: 
|
| Миниатюра на страница | Миниатюрите на страниците се показват на места като резултати от търсене, резултати от маркирано съдържание, публикации на новини и др. По подразбиране миниатюрата идва от областта за заглавие на страницата или от уеб частта, която е в първия ред на страницата (например горе вляво на оформлението на страница). Можете да заместите настройката по подразбиране и да промените миниатюрата на страницата. Когато правите това, е най-добре да използвате изображение с пропорция 16:9. Пример (оригиналното изображение 16:9): 
|
| Уеб част за бързи връзки | Уеб частта за бързи връзки има шест различни оформления. Ето предварително зададените пропорции:
|
Съвет
Когато добавяте изображение към област за заглавие на страница или уеб част за "герой", също така е най-добре да зададете фокусната точка в областта на изображението, която искате винаги да се показва. За да научите повече за задаването на фокусна точка за тези два сценария, вж. "Използване на уеб частта за централен банер ("герой") и "Създаване и използване на модерни страници в сайт на 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 |