Zmena veľkosti a mierky obrázkov na moderných stránkach SharePointu
Applies ToSharePoint v službe Microsoft 365

Moderné stránky a webové časti sú navrhnuté tak, aby boli plne flexibilné vo všetkých zariadeniach, čo znamená, že obrázky používané vo webových častiach sa budú škálovať odlišne v závislosti od toho, kde sa zobrazujú, ktoré rozloženie sa používa, a od zariadenia, v ktorom sa zobrazujú. Moderné stránky sú napríklad navrhnuté tak, aby vyzerali skvele v mobilných zariadeniach, a automatická mierka obrázkov pomáha vytvárať atraktívne prostredie.

Príklady stránok v rôznych zariadeniach

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

Vzhľadom na flexibilný návrh strany nie je v pixeloch konkrétna výška ani šírka, ktorá by zaručila, že obrázok si zachová konkrétny tvar v rôznych zariadeniach a rozloženiach. Veľkosť obrázkov sa automaticky zmení a orezá, aby sa zobrazil najlepší možný výsledok v rôznych zariadeniach a rozloženiach. Existuje však niekoľko pokynov, ktoré vám pomôžu zabezpečiť, aby vaše obrázky vyzerali skvele na vašich stránkach.

Vyhľadanie najlepších veľkostí obrázkov pre stránku závisí od týchto faktorov:

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

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

  • Rozloženie webovej časti: rozloženie, ktoré vyberiete 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, napríklad 3:2, 4:3 alebo 16:9. Šírka je vždy prvé číslo. Napríklad pomer 16:9 môže mať šírku 1 600 pixlov a výšku 900 pixelov. Môže to byť napríklad 1 920 x 1 080, 1 280 x 720 alebo akékoľvek iné kombinácie šírky a výšky, ktoré možno vypočítať tak, aby sa rovnali 16:9. Kalkulačky pomeru strán nájdete online a v niektorých nástrojoch na úpravu fotografií, ktoré vám pomôžu určiť pomery strán obrázkov. 

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

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

Rozloženia stĺpcov

Stranu možno rozložiť so sekciami, 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, tretí ľavý a jeden tretí pravý stĺpec. Všeobecným pravidlom pre obrázky, pri ktorých sa očakáva, že vyplnia šírku stĺpca, je, že sú aspoň také široké ako stĺpec, do ktorého sú umiestnené. Obrázok vo webovej časti obrázka v jednom stĺpci by mal mať šírku aspoň 1 204 pixelov.

Nižšie sú uvedené pokyny na šírku pre každé rozloženie 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

Tretí ľavý stĺpec

380 pre ľavý stĺpec; 792 pre pravý stĺpec

Jeden tretí pravý stĺpec

792 pre ľavý stĺpec; 380 pre pravý stĺpec

Vzhľadom na responzívnu povahu strán sa obrázky v stĺpcoch s plnou šírkou vždy zobrazia na celej šírke obrazovky s automatickou výškou na základe veľkosti obrazovky.

Výška obrázkov umiestnených v iných rozloženiach stĺpcov bude závisieť od pomeru strán. Tu sú pokyny na výšku alebo šírku pre pomer strán 16:9 a 4:3 (zaokrúhlené nahor alebo nadol na najbližší pixel). Je to užitočné, ak chcete, aby mali obrázky šírku a výšku a vhodne sa škálujú pre mobilné zariadenia, napríklad:

POMER

ROZLOŽENIE

16 x 9

Šírka x výška v pixeloch

4 x 3

Šírka x výška v pixeloch

Jeden stĺpec

1 204 x 677

1 204 x 903

Dva stĺpce

586 x 330

586 x 439

Tri stĺpce

380 x 214

380 x 285

Tretí ľavý stĺpec

380 x 446 pre ľavý stĺpec; 792 x 446 pre pravý stĺpec

380 x 594 pre ľavý stĺpec; 792 x 594 pre pravý stĺpec

Jeden tretí pravý stĺpec

792 x 446 pre ľavý stĺpec; 380 x 446 pre pravý stĺpec

792 x 594 pre ľavý stĺpec; 380 x 594 pre pravý stĺpec

Rozloženia webových častí

Rozloženia vo webových častiach, ktoré používate, tiež ovplyvnia mierku obrázkov. Nasledujúce príklady zobrazujú rôzne webové časti a niektoré možnosti a pomery strán, ktoré môžete použiť.

Webová časť Hlavné obrázok

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

  • Dlaždice: výška webovej časti sa prispôsobí pomeru strán 8:3 a obrázky vo webovej časti sa škálujú na pomer strán 4:3.

  • Vrstvy: Jednotlivé vrstvy sa škálujú na pomer strán 8:3 a obrázky v každej vrstve sa škálujú na pomer strán v blízkosti 16:9.

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

Tu je príklad obrázka zobrazeného v rozložení Vrstvy (hore) a v rozložení Dlaždice (dole):

Príklad obrázkov webovej časti Hlavného banera v rozloženiach vrstiev a dlaždíc

Webová časť Zvýraznený obsah

Pomer strán 16:9 je kolotoč, filmový pás a mriežka.

Tu je príklad pomeru strán 16:9. Prvý obrázok zobrazuje rozloženie Filmstrip a druhý znázorňuje rozloženie mriežky:

Webová časť Zvýraznený obsah s rozložením Filmstrip.

Rozloženie Mriežka zvýrazneného obsahu so zobrazenými rozbalenými fotografiami.

Webová časť Obrázok

Obrázky sa rozšíria na šírku sekcie obsahujúcej webovú časť. 

Tu je príklad obrázka vo webovej časti Obrázok, ktorý používa pomer strán 16:9.

Obrázok vo webovej časti Obrázok s pomerom kolotoča 16:9.

Môžete tiež zmeniť pomer strán alebo voľné orezanie pomocou nástroja na úpravu obrázkov alebo pomocou rukovätí na zmenu veľkosti zväčšiť alebo zmenšiť obrázok.

Fotografia otvorená v nástroji na úpravu SharePointu.

Webová časť Galéria obrázkov

V rôznych rozloženiach možno použiť nasledujúce pomery strán:

  • Rozloženia Tehla a Kolotoč rešpektujú pomer strán všetkých obrázkov: 16:9, 1:1, 4:3 atď. 

  • Rozloženie Mriežka umožňuje tri pomery strán: štvorec 1:1, šírku 16:9 a štandardný pomer 4:3.

Prvý obrázok zobrazuje rozloženie Tehla vowebovej časti Galéria obrázkov (zachovanie pomeru strán 16:9 a 1:1). Druhý obrázok zobrazuje rozloženie mriežky (s pomerom strán 1:1).

Webová časť Galéria obrázkov s možnosťou tehlového rozloženia.

Webová časť Galéria obrázkov s možnosťou rozloženia mriežky.

Webová časť Správy

V závislosti od rozloženia môžu byť obrázky vo webovej časti Správy 4:3, 16:9 alebo 21:9.

Tu je príklad obrázkov v hornom príbehu a rozložení kolotoča:

Príklady obrázkov rozloženia správ

Oblasť názvu strany

Obrázky vyzerajú najlepšie, keď sú na šírku alebo 16:9 alebo viac v pomere strán, a keď majú veľkosť aspoň 1 MB. Nezabudnite tiež nastaviť ohnisko na zachovanie najdôležitejšej časti obrázka v zobrazení, najmä ak sa obrázok používa v miniatúrach, rozloženiach správ a výsledkoch hľadania.

Príklad (pôvodný obrázok 16:9) s ohniskom nastaveným na reproduktore:

Príklad obrázka s veľkosťou 16:9 v oblasti názvu strany.

Miniatúra strany

Miniatúry strán sa zobrazujú na miestach, ako sú napríklad výsledky hľadania, výsledky zvýrazneného obsahu, príspevky s novinkami a ďalšie. Miniatúra predvolene pochádza z oblasti názvu strany alebo z webovej časti, ktorá je v prvom poradí na stránke (napríklad v ľavom hornom rohu rozloženia stránky). Predvolené nastavenie môžete prepísať a zmeniť miniatúru strany. Ak tak 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 miniatúry stránky vo webovej časti Zvýraznený obsah

Webová časť Rýchle prepojenia

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

  • Kompaktné, Zoznam, Dlaždice: 1:1, 4:3

  • Filmový pás, mriežka, tlačidlo: 16:9

Prvý obrázok zobrazuje kompaktné rozloženie vo webovejčasti Rýchle prepojenia. Druhý obrázok zobrazuje rovnakú webovú časť Rýchle prepojenia pomocou rozloženia Filmstrip.

Webová časť Rýchle prepojenia zobrazujúca miniatúry prepojení.

Webová časť Rýchle prepojenia zobrazujúca pomer obrázkov 16:9.

Tipy: 

Odporúčania pre obrázok hlavičky lokality

Okrem strán môžete chcieť pridať aj vlastné logá alebo obrázky v rozšírenom rozložení. Tu sú odporúčania týkajúce sa veľkosti týchto prvkov.

Prvok

Popis

Odporúčanie

Šírka x výška v pixeloch

Logo lokality

Väčšie logo, ktoré môže byť iné ako štvorcové a priehľadné v závislosti od nahratého návrhu.

192 x 64 

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

Miniatúra loga lokality

Miniatúra štvorcového loga, ktorá sa používa, ak sa nenahrá žiadne logo lokality, alebo na miestach, kde sa vyžaduje štvorcový formát.

Tento prvok je povinný.

64 x 64 

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

Logo lokality rozšíreného rozloženia

Rozšírené rozloženie hlavičky má rozšírenú šírku loga lokality.

300 x 64

Formát: JPEG, PNG, SVG

Obrázok pozadia rozšíreného rozloženia

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

2 560 x 164

Formát: JPEG, PNG

Potrebujete ďalšiu pomoc?

Chcete ďalšie možnosti?

Môžete preskúmať výhody predplatného, prehľadávať školiace kurzy, naučiť sa zabezpečiť svoje zariadenie a ešte oveľa viac.

Komunity pomôžu s kladením otázok a odpovedaním na ne, s poskytovaním pripomienok a so získavaním informácií od odborníkov s bohatými znalosťami.