Sodobne strani in spletni gradniki so zasnovani tako, da so popolnoma odzivni v vseh napravah, kar pomeni, da se bodo slike, uporabljene v spletnih gradnikih, različno prilagajale glede na to, kje so prikazane, katera postavitev je uporabljena in naprava, v kateri si jih ogledujete. Sodobne strani so na primer zasnovane tako, da izgledajo odlično v mobilnih napravah, samodejno prilagajanje velikosti pa pomaga ustvariti privlačno izkušnjo.
Katere velikosti slik so najboljše?
Zaradi odzivne zasnove strani ni določene višine ali širine v slikovnih pikah, ki bi zagotovila, da bo slika ohranila določeno obliko v vseh napravah in postavitvah. Velikost slik se samodejno spremeni in obreže, da se prikažejo najboljši možni rezultati v različnih napravah in postavitvah. Vendar pa obstaja nekaj smernic, ki vam lahko pomagajo zagotoviti, da bodo vaše slike na straneh videti odlično.
Iskanje najboljše velikosti slik za stran je odvisno od teh dejavnikov:
- Razmerje med višino in širino slik: razmerje med višino in širino slik
- Postavitev stolpcev: vrsta in število stolpcev na strani
- Postavitev spletnega gradnika: postavitev, ki jo izberete za spletni gradnik, v katerem je slika uporabljena
Razmerje višina/širina
Razmerje stranic je razmerje med širino in višino slik. Običajno je izražena kot dve številki, na primer 3:2, 4:3 ali 16:9. Širina je vedno prva številka. Na primer, razmerje 16:9 je lahko 1600 slikovnih pik v širino in 900 slikovnih pik v višino. Ali pa je lahko 1920 x 1080, 1280 x 720 ali katera koli druga kombinacija širine / višine, ki jo je mogoče izračunati na 16: 9. Kalkulatorje razmerja stranic lahko najdete na spletu in v nekaterih orodjih za urejanje fotografij, ki vam pomagajo določiti razmerja stranic vaših slik.
V večini primerov slike v sodobnih spletnih gradnikih najbolje delujejo v postavitvah in napravah, če imajo razmerje med širino in višino 16:9 ali 4:3, odvisno od postavitve.
Postavitve stolpcev
Stran je lahko razporejena z odseki, ki vključujejo različne vrste stolpcev in postavitve, kot so stolpci polne širine, en stolpec, dva stolpca, trije stolpci, ena 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 vsaj tako široke kot stolpec, v katerega so postavljene. Slika v spletnem gradniku slike v enem stolpcu mora biti na primer široka vsaj 1204 slikovnih pik.
Spodaj so navedene smernice za širino za vsako postavitev stolpcev:
| Postavitev | Širina v slikovnih pikah |
|---|---|
| Stolpec polne širine | 1920 |
| En stolpec | 1204 |
| Dva stolpca | 586 na stolpec |
| Trije stolpci | 380 na stolpec |
| Tretjina levega stolpca | 380 za levi stolpec; 792 za desni stolpec |
| Tretjina desnega stolpca | 792 za levi stolpec; 380 za desni stolpec |
Zaradi odzivne narave strani bodo slike v stolpcih polne širine vedno prikazane v celotni širini zaslona s samodejno višino, ki temelji na velikosti zaslona.
Višina slik v drugih postavitvah stolpcev je odvisna od vašega razmerja stranic. Tukaj so smernice za višino/širino za razmerja 16:9 in 4:3 (zaokroženo navzgor/navzdol na najbližjo slikovno piko). To je koristno, če ohranite širino in višino, ki sta primerni za mobilne naprave, na primer:
| RAZMERJE STRANIC 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 |
| 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 spletnih gradnikov
Postavitve v spletnih gradnikih, ki jih uporabljate, bodo vplivale tudi na prilagajanje slik. V spodnjih primerih so prikazani različni spletni gradniki ter nekatere možnosti in razmerja med širino in višino, ki jih lahko uporabite.
| Spletni gradnik heroja | Naslednja razmerja stranic za postavitve ploščic in plasti so:
|
| Spletni gradnik označene vsebine | 16 : 9 je razmerje stranic za postavitve vrtiljaka, filmskega traku in mreže. Tukaj je primer razmerja stranic 16 : 9. Na prvi sliki je prikazana postavitev »Filmski trak«, na drugi pa postavitev »Mreža«: 
|
| Spletni gradnik slike | Slike se razširijo na širino odseka, ki vsebuje spletni gradnik. Tukaj je primer slike v spletnem gradniku slike, ki uporablja razmerje stranic 16 : 9. 
Prav tako imate možnost, da spremenite razmerje stranic ali obrezujete s prosto roko z orodjem za urejanje slik ali uporabite ročice za spreminjanje velikosti, da povečate ali zmanjšate sliko. 
|
| Spletni gradnik galerije slik | V različnih postavitvah lahko uporabite naslednja razmerja stranic
|
| Spletni gradnik novic | Glede na postavitev so lahko slike v spletnem gradniku novic 4:3, 16:9 ali 21:9. Tukaj je primer slik v postavitvi »Zgornja zgodba« 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 |