Оразмеряване и мащабиране на изображения в модерни страници на SharePoint
Applies ToSharePoint в Microsoft 365

Модерните страници и уеб части са проектирани да отговарят напълно на всички устройства, което означава, че изображенията, използвани в уеб частите, ще се мащабират по различен начин в зависимост от това къде се показват, кое оформление се използва и устройството, на което се преглеждат. Например модерните страници са създадени така, че да изглеждат чудесно на мобилни устройства, а автоматичното мащабиране на изображения помага за създаването на тази атрактивна среда за работа.

Примери за страници на различни устройства

Кои размери на изображения работят най-добре?

Поради дизайна на адаптивната страница няма конкретна височина или ширина в пиксели, която да гарантира, че изображението ще поддържа определена фигура на различни устройства и оформления. Изображенията се преоразмеряват и изрязват автоматично, за да се покаже възможно най-добрият резултат на различни устройства и оформления. Има обаче някои указания, които могат да ви помогнат да се уверите, че изображенията ви изглеждат чудесно на страниците ви.

Намирането на най-добрите размери на изображенията за вашата страница зависи от следните фактори:

  • Пропорция: отношението между височината и ширината на изображенията

  • Оформление на колони: типът и броят на колоните на вашата страница

  • Оформление на уеб част: оформлението, което избирате за уеб частта, в която се използва изображението

Пропорция

Пропорция е отношението между ширината и височината на изображенията. Обикновено се изразява като две числа, например 3:2, 4:3 или 16:9. Ширината винаги е първото число. Например съотношението 16:9 може да бъде 1600 пиксела по височина на 900 пиксела. Или може да е 1920 x 1080, 1280 x 720 или всякакви други комбинации ширина/височина, които могат да бъдат изчислени като равни на 16:9. Можете да намерите калкулатори на пропорция онлайн, а в някои инструменти за редактиране на снимки можете да определите пропорциите на вашите изображения. 

Примери за пропорции 16:9 и 4:3.

В повечето случаи изображенията в модерни уеб части работят най-добре на различни оформления и устройства, когато имат пропорция 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 за дясна колона

Оформления на уеб части

Оформленията в уеб частите, които използвате, също ще се отразят на мащаба на вашите изображения. Следващите примери показват различни уеб части и някои от опциите и пропорциите, които можете да използвате.

Уеб част за централен банер

Следните пропорции за оформленията на плочки и слоеве са:

  • Плочки: височината на уеб частта се мащабира, за да следва пропорция 8:3, а изображенията вътре в мащаба на уеб частта се мащабира до пропорция 4:3.

  • Слоеве: Отделният слой се мащабира до пропорция 8:3, а изображенията във всеки слой се мащабират до пропорция близо до 16:9.

  • На мобилни устройства оформлението "Въртележка" се използва в 16:9 часа.

Ето пример за изображение, показано в оформлението "Слоеве" (отгоре) и оформлението "Плочки" (долу):

Example of Hero web part images in Layers and Tiles layouts

Уеб част за маркирано съдържание

16:9 е съотношението на оформленията "Въртележка", "Филмова лента" и "Мрежа".

Ето пример за пропорция 16:9. Първото изображение показва оформлението Филмова лента, а втората показва оформлението Мрежа:

Уеб частта за маркирано съдържание с помощта на оформлението Filmstrip.

Оформлението "Мрежа с осветено съдържание" с показани разгънати снимки.

Уеб част за изображение

Изображенията ще се разширят до ширината на секцията, съдържаща уеб частта. 

Ето пример за изображение в уеб частта за изображение, което използва пропорцията 16:9.

Изображение в уеб частта "Изображение", използваща съотношението "Въртележка" 16:9.

Също така имате възможност да промените пропорцията или свободното изрязване с помощта на инструмента за редактиране на изображение или да използвате манипулаторите за преоразмеряване, за да направите изображението по-голямо или по-малко.

Снимка, отворена в инструмента за редактиране на SharePoint.

Уеб част за галерия с изображения

Следните пропорции могат да се използват в различни оформления:

  • Оформленията Тухла и въртележка се съобразяват с пропорциите на всички изображения: 16:9, 1:1, 4:3 и т.н. 

  • Оформлението Мрежа позволява три пропорции: квадрат 1:1, ширина 16:9 и стандарт 4:3.

Първото изображение показва оформлението "Тухла" в уеб частта"Галерия с изображения" (запазвайки пропорциите 16:9 и 1:1). Второто изображение показва оформлението Мрежа (с пропорция 1:1).

Уеб частта "Галерия с изображения", използваща опцията за оформление на тухла.

Уеб частта "Галерия с изображения", използваща опцията за оформление на мрежата.

Уеб част за дискусионни групи

В зависимост от оформлението изображенията в уеб частта "Новини" могат да бъдат 4:3, 16:9 или 21:9.

Ето пример за изображения в най-горната история и оформление "Въртележка":

Примери за изображения на оформления на дискусионни групи

Област за заглавие на страница

Изображенията изглеждат най-добре, когато са пейзажни или с пропорция 16:9 или по-големи и когато са с размер поне 1 МБ. Освен това не забравяйте да зададете фокусна точка, за да запазите най-важната част от картината в изгледа, особено когато картината се използва в миниатюри, оформления на новини и резултати от търсене.

Пример (оригинално изображение 16:9) с фокусна точка, зададена на високоговорителя:

Пример за изображение 16:9 в областта за заглавие на страницата.

Миниатюра на страница

Миниатюрите на страници се показват на места, като резултати от търсене, осветени резултати от съдържание, публикации на новини и др. По подразбиране миниатюрата идва от областта за заглавие на страницата или от уеб частта, която е в първия ред на страницата (например горе вляво на оформление на страница). Можете да заместите настройката по подразбиране и да промените миниатюрата на страницата. Когато направите това, най-добре е да използвате изображение с пропорция 16:9.

Пример (оригинално изображение 16:9):

Example of page thumbnail image in Highlighted content web part

Уеб част за бързи връзки

Уеб частта "Бързи връзки" има шест различни оформления. Ето предварително зададените пропорции:

  • Компактен, списък, плочки: 1:1, 4:3

  • Филмова лента, Мрежа, Бутон: 16:9

Първото изображение показва оформлението Компактен в уеб часттаБързи връзки. Второто изображение показва същата уеб част "Бързи връзки", използваща оформлението Filmstrip.

Уеб частта "Бързи връзки", показваща изображения на миниатюри за връзки.

Уеб частта "Бързи връзки", показваща съотношението 16:9 за изображения.

Съвети: 

Препоръки за изображения на заглавки на сайт

В допълнение към страниците може да искате да добавите емблеми или изображения по избор в разширено оформление. Ето препоръки за размера на тези елементи.

Елемент

Описание

Препоръка

Ширина 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

Нуждаете ли се от още помощ?

Искате ли още опции?

Разгледайте ползите от абонамента, прегледайте курсовете за обучение, научете как да защитите устройството си и още.

Общностите ви помагат да задавате и отговаряте на въпроси, да давате обратна връзка и да получавате информация от експерти с богати знания.