Sodobne strani in spletni gradniki so zasnovani tako, da so popolnoma odzivni v različnih napravah, kar pomeni, da bodo slike, uporabljene v spletnih gradnikih, različno prilagojene glede na to, kje so prikazane, uporabljeno postavitev in napravo, v kateri si jih ogledujete. Sodobne strani so na primer zasnovane tako, da so videti odlično v prenosnih napravah, samodejno prilagajanje velikosti slike pa pomaga ustvariti privlačno izkušnjo.
Katere velikosti slik so najboljše?
Zaradi odzivnega načrta strani ni določene višine ali širine v slikovnih pikah, ki bi zagotovila, da bo slika ohranila določeno obliko v različnih napravah in postavitvah. Velikost slik se samodejno spremeni in jih obreže, da prikažejo najboljše možne rezultate v različnih napravah in postavitvah. Vendar pa obstaja nekaj navodil, s katerimi lahko zagotovite, da bodo slike na straneh videti odlično.
Iskanje najboljše velikosti slik za stran je odvisno od naslednjih dejavnikov:
- Razmerje višina/širina: razmerje med višino in širino slik
- Postavitev stolpca: vrsta in število stolpcev na vaši strani
- Postavitev spletnega gradnika: postavitev, ki jo izberete za spletni gradnik, v katerem uporabljate sliko
Razmerje višina/širina
Razmerje višina/širina je razmerje med širino in višino slik. Običajno so izražene kot dve števili, na primer 3:2, 4:3 ali 16:9. Širina je vedno prvo število. Razmerje 16:9 je lahko na primer 1600 slikovnih pik v širino x 900 slikovnih pik v višino. Ali pa je lahko 1920 x 1080, 1280 x 720 ali katera koli druga kombinacija širine/višine, za katero lahko izračunate, da ustreza 16:9. Kalkulatorje za izračun razmerja višina/širina so na voljo v spletu in v nekaterih orodjih za urejanje fotografij, s katerimi lahko lažje določite razmerja višina/širina slik.
V večini primerov slike v sodobnih spletnih gradnikih delujejo najbolje v vseh postavitvah in napravah, če imajo razmerje višina/širina 16:9 ali 4:3, odvisno od postavitve.
Postavitve stolpcev
Stran je lahko postavljena z odseki, ki vključujejo različne vrste stolpcev in postavitev, na primer stolpci polne širine, en stolpec, dva stolpca, trije stolpci ter tretjina levega in ena tretjina desnega stolpca. Splošno pravilo za slike, za katere se pričakuje, da bodo zapolnile širino stolpca, je, da so slike vsaj tako široke kot stolpec, v katerega so postavljene. Slika v spletnem gradniku slike v enem stolpcu mora biti široka vsaj 1204 slikovne pike.
V nadaljevanju so navodila za širino posameznih postavitev stolpcev:
| Postavitev | Širina v slikovnih pikah |
|---|---|
| Stolpec polne širine | 1920 |
| En stolpec | 1204 |
| Dva stolpca | 586 na stolpec |
| Trije stolpci | 380 na stolpec |
| Ena tretjina levega stolpca | 380 za levi stolpec; 792 za desni stolpec |
| Tretjina desnega stolpca | 792 za levi stolpec; 380 za desni stolpec |
Zaradi odzivnosti strani bodo slike v stolpcih polne širine vedno prikazane na polni širini zaslona s samodejno višino glede na velikost zaslona.
Višina slik v drugih postavitvah stolpcev je odvisna od razmerja višina/širina. Tukaj so smernice za višino/širino za razmerja višina/širina 16:9 in 4:3 (zaokroženo navzgor/navzdol do najbližjega slikovnega pika). To je uporabno, če imate slike na voljo na širini in višini, ki je primerna za prenosne naprave, na primer:
| RAZMERJE VIŠINA/ŠIRINA POSTAVITEV |
16 x 9 Širina x višina v slikovnih pikah |
4 x 3 Širina x višina v slikovnih pikah |
|---|---|---|
| En stolpec | 1204 x 677 | 1204 x 903 |
| Dva stolpca | 586 x 330 | 586 x 439 |
| Trije stolpci | 380 x 214 | 380 x 285 |
| Ena tretjina levega stolpca | 380 x 446 za levi stolpec; 792 x 446 za desni stolpec | 380 x 594 za levi stolpec; 792 x 594 za desni stolpec |
| Tretjina desnega stolpca | 792 x 446 za levi stolpec; 380 x 446 za desni stolpec | 792 x 594 za levi stolpec; 380 x 594 za desni stolpec |
Postavitve spletnega gradnika
Postavitve v spletnih gradnikih, ki jih uporabite, vplivajo tudi na prilagajanje velikosti slik. V teh primerih so prikazani različni spletni gradniki ter nekatere možnosti in razmerja, ki jih lahko uporabite.
| Spletni gradnik Hero | Ta razmerja višina/širina za postavitve ploščic in plasti so:
|
| Spletni gradnik za označeno vsebino | 16:9 je razmerje višina/širina za postavitve vrtiljaka, filmskega traku in mreže. Tu je primer razmerja višina/širina 16:9. Na prvi sliki je prikazana postavitev filmskega traku, na drugi pa postavitev mreže: 
|
| Spletni gradnik slike | Slike se bodo razširile do širine razdelka s spletnim gradnikom. Tukaj je primer slike v spletnem gradniku Slika, ki uporablja razmerje višina/širina 16:9. 
Lahko pa tudi spremenite razmerje višina/širina ali prostoročno obrezovanje z orodjem za urejanje slik ali pa uporabite ročice za spreminjanje velikosti, da povečate ali pomanjšate sliko. 
|
| Spletni gradnik galerije slik | V različnih postavitvah lahko uporabite ta razmerja višina/širina:
|
| Spletni gradnik novic | Glede na postavitev so lahko slike v spletnem gradniku »Novice« 4:3, 16:9 ali 21:9. Tukaj je primer slik v postavitvi »Zgodba zgornja« in »Vrtiljak«: 
|
| Območje z naslovom strani | Slike so videti najbolje, če so ležeče ali v razmerju višina/širina 16:9 ali več, in če so velike vsaj 1 MB. Prav tako ne pozabite nastaviti fokusne točke, da ohranite najpomembnejši del slike v pogledu, še posebej, če je slika uporabljena v sličicah, postavitvah novic in rezultatih iskanja. Primer (izvirna slika 16:9) z fokusno točko, nastavljeno na zvočnik: 
|
| Sličica strani | Sličice strani so prikazane na mestih, kot so rezultati iskanja, rezultati označene vsebine, objave novic in drugo. Privzeto sličica izhaja iz območja z naslovom strani ali spletnega gradnika, ki je v prvem vrstnem redu na strani (npr. zgoraj levo od postavitve strani). Privzeto nastavitev lahko preglasite in spremenite sličico strani. Pri tem je najbolje uporabiti sliko v razmerju višina/širina 16:9. Primer (izvirna slika 16:9): 
|
| Spletni gradnik hitrih povezav | Spletni gradnik hitrih povezav ima šest različnih postavitev. Prednastavljeni razmerji višina/širina:
|
Namig
Ko dodate sliko v območje z naslovom strani ali spletni gradnik Hero, je tudi najbolje, da nastavite žarišče na območju slike, ki ga želite vedno prikazati. Če želite izvedeti več o nastavitvi osrednje točke za ta dva scenarija, glejte »Uporaba spletnega gradnika »Hero« in » Ustvarjanje in uporaba sodobnih strani« na SharePointovem mestu.
Priporočila za sliko glave mesta
Poleg strani boste morda želeli dodati logotipe ali slike po meri v razširjeni postavitvi. Tukaj so priporočila za velikost teh elementov.
| Element | Opis | Priporočilo Širina x višina v slikovnih pikah |
|---|---|---|
| Logotip mesta | Večji logotip, ki je lahko nekvadraten in prosojen, odvisno od prenesenega načrta. | 192 x 64 Oblika zapisa: PNG, JPEG, SVG (SVG ni dovoljen na spletnih mestih, povezanih s skupino) |
| Sličica logotipa mesta | Kvadratna sličica logotipa, ki se uporabi, če ni prenesen noben logotip spletnega mesta ali na mestih, kjer je zahtevana oblika kvadrata. Ta element je obvezen. |
64 x 64 Oblika zapisa: PNG, JPEG, SVG (SVG ni dovoljen na spletnih mestih, povezanih s skupino) |
| Logotip mesta s razširjeno postavitvijo | Razširjena postavitev glave ima razširjeno širino logotipa mesta. | 300 x 64 Oblika zapisa: JPEG, PNG, SVG |
| Slika za ozadje razširjene postavitve | Nova slika za ozadje, ki jo je mogoče uporabiti z razširjeno glavo. | 2560 x 164 Oblika zapisa: JPEG, PNG |