Veľkosť a zmena veľkosti obrázka v moderných stránkach SharePointu

Veľkosť a zmena veľkosti obrázka v moderných stránkach SharePointu

Moderné stránky a webové časti sú navrhnuté tak, aby boli plne reagujúce na všetky zariadenia, čo znamená, že obrázky použité vo webových častiach sa rôznia v závislosti od toho, kde sa zobrazujú, ktoré rozloženie sa používa a zariadenie, v ktorom sa zobrazujú. Moderné stránky sú napríklad navrhnuté tak, aby vyzerali skvele v mobilných zariadeniach a automatické nastavenie veľkosti obrázkov pomáha pri vytváraní atraktívneho zážitku.

Príklady stránok v rôznych zariadeniach

Aké veľkosti obrázkov fungujú najlepšie?

Z dôvodu návrhu s vybratou stránkou sa v pixloch nenachádza určitá výška alebo šírka, ktorá zabezpečí, že obrázok bude mať určitý tvar v rôznych zariadeniach a rozloženiach. Obrázky sa prispôsobia a orezané automaticky, aby sa zobrazil najlepší možný výsledok v rôznych zariadeniach a rozloženiach. Niektoré pokyny vám však pomôžu uistiť sa, že vaše obrázky vyzerajú na vašich stránkach skvele.

Vyhľadanie najvhodnejších veľkostí obrázkov na stránke závisí od týchto faktorov:

  • Pomer strán: vzťah medzi výškou a šírkou obrázkov

  • Rozloženie stĺpcov: typ a počet stĺpcov na stránke

  • Rozloženie webovej časti: rozloženie vybraté pre webovú časť, v ktorej sa používa obrázok

Pomer strán

Pomer strán je vzťah medzi šírkou a výškou obrázkov. Zvyčajne sa vyjadruje ako dve čísla, ako napríklad 3:2, 4:3 alebo 16:9. Šírka je vždy prvé číslo. V príklade môže byť pomer 16:9 1600 pixlov na šírku o 900 pixlov na výšku. Môže to byť 1920 x 1080, 1280 x 720 alebo všetky ostatné kombinácie šírky a výšky, ktoré možno vypočítať na rovnaké 16:9. Kalkulačky pomeru strán môžete nájsť online a v niektorých nástrojoch na úpravu fotografií, ktoré vám pomôžu určiť pomer strán obrázkov. 

Príklady pomerov strán 16:9 a 4:3.

Vo väčšine prípadov sú obrázky v moderných webových častiach najlepšie v rozložení a v zariadeniach, keď majú pomer strán v 16:9 alebo 4:3, v závislosti od rozloženia.

Rozloženia stĺpcov

Stránku môžete rozložiť na základe sekcií, ktoré obsahujú rôzne typy stĺpcov a rozloženia, ako sú napríklad stĺpce s plnou šírkou, jeden stĺpec, dva stĺpce, tri stĺpce, jeden tretí ľavý a jeden tretí pravý stĺpec. Všeobecné pravidlo pre obrázky, ktoré sa očakáva na vyplnenie šírky stĺpca, je, že je aspoň tak široká ako stĺpec, v ktorom sú umiestnené. Obrázok vo webovej časti obrázka v jednom stĺpci by mal byť napríklad široký najmenej 1204 pixlov. Nižšie sú uvedené pokyny na šírku jednotlivých rozložení stĺpcov:

Rozloženie

Šírka v pixeloch

Stĺpec s plnou šírkou

1920

Jeden stĺpec

1204

Dva stĺpce

586 na stĺpec

Tri stĺpce

380 na stĺpec

Ľavý stĺpec v jednom treťom stĺpci

380 pre ľavý stĺpec 792 v pravom stĺpci

Jeden tretí pravý stĺpec

792 pre ľavý stĺpec 380 v pravom stĺpci

Z dôvodu citlivej povahy strán sa obrázky v stĺpcoch s plnou šírkou vždy zobrazia v plnej šírke obrazovky s automatickou výškou na základe veľkosti obrazovky.

Výška obrázkov umiestnených v inom rozložení stĺpcov bude závisieť od pomeru strán. Tu sú pokyny pre výšku a šírku pre pomery strán 16:9 a 4:3 (zaokrúhlené nahor/nadol na najbližší pixel). Je to užitočné, ak chcete, aby boli obrázky v šírke a výške, ktoré sú vhodnejšie pre mobilné zariadenia, napríklad.

POMER STRÁN

ROZLOŽENIE

16 x 9

Šírka x výška v pixloch

4 x 3

Šírka x výška v pixloch

Jeden stĺpec

1204 x 677

1204 x 903

Dva stĺpce

586 x 330

586 x 439

Tri stĺpce

380 x 214

380 x 285

Ľavý stĺpec v jednom treťom stĺpci

380 x 446 pre ľavý stĺpec; 792 x 446 v pravom stĺpci

380 x 594 pre ľavý stĺpec; 792 x 594 v pravom stĺpci

Jeden tretí pravý stĺpec

792 x 446 pre ľavý stĺpec; 380 x 446 v pravom stĺpci

792 x 594 pre ľavý stĺpec; 380 x 594 v pravom stĺpci

Rozloženia webových častí

Rozloženie vo webových častiach, ktoré používate, ovplyvní aj spôsob veľkosti obrázkov. Nasledujúce príklady znázorňujú rôzne webové časti a ich rozloženia v jednom stĺpci a pomery strán, ktoré sa používajú v jednotlivých stĺpcoch.

Zoberme si tento obrázok, ktorý má pôvodný pomer strán 16:9:

Príklad 16_9 obrázka

Nižšie sú uvedené príklady tohto obrázka zobrazeného v rozložení jednej strany stĺpca v rôznych webových častiach a rozloženiach.

Webová časť Hero

Nasledujúce pomery strán pre rozloženia dlaždíc a vrstiev sú nasledovné:

  • Dlaždice: výška webovej časti je zmenšená tak, aby sledovala pomer strán 8:3 a obrázky v mierke webovej časti na pomer strán 4:3.

  • Vrstvy: jednotlivé vrstvy stupnice na pomer strán 8:3 a obrázky v každej mierke vrstvy na pomer strán v blízkosti 16:9.

  • V mobilných zariadeniach sa na 16:9 používa rozloženie kolotoč.

Tu je príklad obrázka zobrazeného v rozložení rozloženie vrstvy (zhora) a rozloženie dlaždíc (dole)

Príklad obrázkov webových častí hrdinu v rozloženiach vrstiev a dlaždíc

Webová časť zvýraznená obsah

16:9 je pomer strán v rozložení kolotoča, pása s filmami a kariet.

Tu je príklad obrázka zobrazeného v rozložení pása s nástrojmi (hore) a rozloženie kariet (dole).

Zvýraznený Príklad obrázka webovej časti obsah

Webová časť obrázok

Obrázky sa rozbalia na šírku sekcie, ktorá obsahuje webovú časť. Ak chcete zväčšiť alebo zmenšiť obrázok, máte možnosť zmeniť pomer strán alebo voľnú plodinu pomocou panela s nástrojmi obrázka alebo pomocou rukovätí na zmenu veľkosti.

Tu je príklad znázorňujúci značky orezania obrázka (modré čiary) na 4:3

Obrázok znázorňujúci značky orezania na 4:3

Webová časť Galéria obrázkov

Nasledujúce pomery strán sa používajú v rôznych rozloženiach:

  • Rozloženie tehly rešpektuje pomer strán všetkých zobrazených obrázkov: 16:9, 1:1, 4:3 atď. 

  • Dlaždice, karty: 4:3

Tu je príklad obrázka zobrazeného v rozložení dlaždice rozloženie (hore) a tehly (dole)

Príklad rozloženia dlaždíc a tehál pre webovú časť Galéria obrázkov

Webová časť správy

V závislosti od rozloženia sa obrázky vo webovej časti správy môžu nachádzať 4:3, 16:9 alebo 21:9. Tu je príklad obrázkov v najvyššom príbehu a v rozložení kolotoča.

Príklady obrázkov v rozložení noviniek

Oblasť názvu strany

Obrázky vyzerajú najlepšie, ak sú na šírku alebo 16:9 alebo väčšie v pomere strán, a keď majú veľkosť aspoň 1 MB. Ak chcete, aby sa v zobrazení zobrazila najdôležitejšia časť obrázka, a to najmä v prípade, že sa obrázok používa v miniatúrach, rozložení správ a výsledkoch hľadania, nezabudnite nastaviť ústredný bod.

Príklad (pôvodný obrázok 16:9) so zadaným kontaktným miestom na reproduktore.

Príklad obrázka 16:9 v oblasti názvu strany.

Miniatúra strany

Miniatúry strán sa zobrazujú v miestach, ako sú napríklad výsledky vyhľadávania, zvýraznené výsledky obsahu, príspevky na správy a ďalšie. Miniatúra na základe predvoleného nastavenia pochádza z oblasti názvu strany alebo z webovej časti, ktorá je v prvej objednávke na strane (napríklad v ľavom hornom rohu rozloženia strany). Môžete prepísať predvolenú a zmeniť miniatúru strany. Keď to urobíte, najlepšie je použiť obrázok s pomerom strán 16:9.

Príklad (pôvodný obrázok 16:9)

Príklad obrázka miniatúry strany vo webovej časti zvýraznený obsah

Webová časť rýchle prepojenia 

Webová časť rýchle prepojenia obsahuje šesť rôznych rozložení. Tu sú Odporúčané pomery strán:

  • Pás s nástrojmi, mriežka, tlačidlo: 16:9

  • Kompaktné, zoznam, dlaždice: 1:1, 4:3

Tu je príklad obrázka zobrazeného v kompaktnom rozložení (hore) a v rozložení pása s nástrojmi (v dolnej časti)

Príklady obrázkov v rozložení rýchlych prepojení

Tipy: 

Odporúčania týkajúce sa obrázka hlavičky lokality

Okrem stránok môžete pridať vlastné logá alebo obrázky v rozšírenom rozložení. Tu sú odporúčania pre veľkosť týchto prvkov.

Prvok

Popis

Odporúčanie

Šírka x výška v pixloch

Logo lokality

Väčšie logo, ktoré môže byť iné ako štvorcové a transparentné v závislosti od nahranej konštrukcie

192 x 64 

Formát: PNG, JPEG, SVG (SVG nie je povolené na lokalitách pripojených na skupiny)

Miniatúra loga lokality

Miniatúra štvorca, ktorá sa používa v prípade, že sa nenahrá žiadne logo lokality alebo na miestach, kde sa vyžaduje štvorcový formát

Vyžaduje sa tento prvok.

64 x 64 

Formát: PNG, JPEG, SVG (SVG nie je povolené na lokalitách pripojených na skupiny)

Rozšírené logo lokality rozloženia

Rozloženie rozšíreného záhlavia obsahuje rozšírenú šírku loga lokality.

300 x 64p

Formát: JPEG, PNG, SVG

Obrázok pozadia s rozšíreným rozložením

Nový obrázok pozadia, ktorý sa dá použiť s rozšírenou hlavičkou.

2560 x 164

Formát: JPEG, PNG

Potrebujete ďalšiu pomoc?

Rozšírte svoje zručnosti práce s balíkom Office
Preskúmať školenie
Buďte medzi prvými, ktorí získajú nové funkcie
Pridajte sa k insiderom pre Office

Boli tieto informácie užitočné?

Ďakujeme za vaše pripomienky!

Ďakujeme vám za pripomienky. Pravdepodobne vám pomôže, ak vás spojíme s pracovníkom podpory pre Office.

×