Moderné stránky a webové časti sú navrhnuté tak, aby plne reagovali vo všetkých zariadeniach, čo znamená, že mierka obrázkov použitých vo webových častiach sa líši v závislosti od miesta, kde sú zobrazené, od použitého rozloženia a od zariadenia, v ktorom sa zobrazujú. Moderné stránky sú napríklad navrhnuté tak, aby vyzerali skvele na mobilných zariadeniach, a automatické nastavenie mierky obrázka pomáha vytvoriť takýto atraktívny zážitok.
Aké veľkosti obrázkov sú najvhodnejšie?
Vzhľadom na responzívny dizajn stránky neexistuje konkrétna výška alebo šírka v pixeloch, ktorá zabezpečí, že si obrázok zachová špecifický tvar v zariadeniach a rozloženiach. Veľkosť a orezanie obrázkov sa automaticky zmení tak, aby sa v rôznych zariadeniach a rozloženiach zobrazovali čo najlepšie. Existuje však niekoľko pravidiel, ktoré vám môžu pomôcť zabezpečiť, aby obrázky na stránkach vyzerali skvele.
Nájdenie najvhodnejších veľkostí obrázkov pre vašu stránku 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, ktoré vyberiete pre webovú časť, v ktorej sa obrázok používa
Pomer strán
Pomer strán je vzťah medzi šírkou a výškou obrázkov. Zvyčajne sa vyjadrujú ako dve čísla, napríklad 3:2, 4:3 alebo 16:9. Šírka je vždy prvým číslom. Pomer 16:9 môže mať napríklad rozmer 1600 pixlov na šírku a 900 pixelov na výšku. Alebo to môže byť 1920 x 1080, 1280 x 720 alebo ľubovoľná iná kombinácia šírky a výšky, ktorá sa dá vypočítať tak, aby sa rovnala 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ť pomer strán obrázkov.
Obrázky v moderných webových častiach vo väčšine prípadov fungujú najlepšie v rozloženiach a zariadeniach, keď majú pomer strán 16:9 alebo 4:3 (v závislosti od rozloženia).
Rozloženia stĺpcov
Na strane môže byť rozložená sekcie, ktoré obsahujú rôzne typy stĺpcov a rozloženia, napríklad stĺpce s plnou šírkou, jeden stĺpec, dva stĺpce, tri stĺpce, jedna tretina vľavo a jedna tretina pravý stĺpec. Všeobecným pravidlom pre obrázky, ktoré by mali vyplniť šírku stĺpca, je to, že sú minimálne rovnako široké ako stĺpec, v ktorom sú umiestnené. Napríklad 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 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 |
| Jedna tretina ľavého stĺpca | 380 pre ľavý stĺpec; 792 pre pravý stĺpec |
| Jedna tretina pravého stĺpca | 792 pre ľavý stĺpec; 380 pre pravý stĺpec |
Keďže stránky reagujú, obrázky v stĺpcoch s plnou šírkou sa vždy zobrazia na celú šírku obrazovky s automatickou výškou podľa veľkosti obrazovky.
Výška obrázkov umiestnených v rámci iných rozložení stĺpcov závisí od pomeru strán. Tu sú pokyny na výšku a šírku pre pomer strán 16:9 a 4:3 (zaokrúhlené nahor alebo nadol na najbližší pixel). Je to užitočné na zachovanie šírky a výšky obrázkov, ktoré sa primerane prispôsobia mierke pre mobilné zariadenia. Napríklad:
| POMER STRÁN ROZLOŽENIE |
Rozmery 16 x 9 Šírka x výška v pixeloch |
4 x 3 Šírka x výška v pixeloch |
|---|---|---|
| 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 |
| Jedna tretina ľavého stĺpca | 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 |
| Jedna tretina pravého stĺpca | 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í
Zmena veľkosti obrázkov bude mať vplyv aj na rozloženia vo webových častiach. V nasledujúcich príkladoch sa zobrazujú rôzne webové časti a niektoré možnosti a pomery strán, ktoré môžete použiť.
| Webová časť hlavného banera | Nasledujúce pomery strán rozložení dlaždíc a vrstiev sú:
|
| Webová časť Zvýraznený obsah | 16:9 je pomer strán pre rozloženia kolotoča, filmového pásu a mriežky. Tu je príklad pomeru strán 16:9. Prvý obrázok zobrazuje rozloženie filmového pásu a druhý rozloženie mriežky: 
|
| 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. 
Máte tiež možnosť zmeniť pomer strán alebo orezanie voľnou rukou pomocou nástroja na úpravu obrázka, prípadne môžete obrázok zväčšiť alebo zmenšiť pomocou rukovätí na zmenu veľkosti. 
|
| Webová časť Galéria obrázkov | V rôznych rozloženiach je možné použiť tieto pomery strán:
|
| Webová časť Správy | V závislosti od rozloženia môžu mať obrázky vo webovej časti Správy formát 4:3, 16:9 alebo 21:9. Tu je príklad obrázkov v rozložení Top story and Carousel: 
|
| Oblasť názvu strany | Obrázky vyzerajú najlepšie na šírku alebo s pomerom strán 16:9 alebo vyšším a s veľkosťou aspoň 1 MB. Nezabudnite tiež nastaviť ohnisko tak, aby sa zobrazovala najdôležitejšia časť obrázka, 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: 
|
| Miniatúra strany | Miniatúry strany sa zobrazujú na miestach, ako sú napríklad výsledky hľadania, výsledky zvýrazneného obsahu, príspevky so správami a ďalšie. Miniatúra predvolene pochádza z oblasti názvu stránky alebo z webovej časti, ktorá je na stránke v prvom poradí (napríklad v ľavom hornom rohu rozloženia stránky). Môžete prepísať predvolené nastavenie a zmeniť miniatúru strany. Pri použití obrázka je najlepšie použiť obrázok s pomerom strán 16:9. Príklad (pôvodný obrázok 16:9): 
|
| Webová časť Rýchle prepojenia | Webová časť Rýchle prepojenia má šesť rôznych rozložení. Tu sú prednastavené pomery strán:
|
Tip
Keď pridávate obrázok do oblasti nadpisu stránky alebo webovej časti hlavného banera, najlepšie je nastaviť ohnisko v oblasti obrázka, ktorú chcete vždy zobraziť. Ďalšie informácie o nastavení centrálneho bodu pre tieto dva scenáre nájdete v témach Používanie webovej časti hlavného banera a Vytváranie a používanie moderných stránok na lokalite SharePoint.
Odporúčania pre obrázky hlavičky lokality
Okrem strán môžete v rozšírenom rozložení pridať aj vlastné logá alebo obrázky. Tu sú odporúčania týkajúce sa veľkostí týchto prvkov.
| Prvok | Popis | Odporúčanie Šírka x výška v pixeloch |
|---|---|---|
| Logo lokality | Väčšie logo, ktoré môže byť v závislosti od nahratého návrhu neštvorcové a priehľadné. | 192 x 64 Formát: PNG, JPEG, SVG (SVG nie je povolený na lokalitách pripojených k skupinám) |
| Miniatúra loga lokality | Miniatúra štvorcového loga, ktorá sa použije v prípade, že sa nenahráva ž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 k skupinám) |
| Logo lokality s rozšíreným rozložením | Rozšírené rozloženie hlavičky má rozšírenú šírku loga lokality. | Rozmery 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. | 2560 x 164 Formát: JPEG, PNG |