Promjena veličine i skaliranje slika na modernim stranicama sustava SharePoint
Applies ToSharePoint u sustavu Microsoft 365

Moderne stranice i web-dijelovi osmišljeni su tako da u potpunosti reagiraju na svim uređajima, što znači da će se slike koje se koriste u web-dijelovima razlikovati ovisno o tome gdje se prikazuju, koji se raspored koristi i uređaju na kojem se prikazuju. Na primjer, moderne stranice osmišljene su tako da izgledaju sjajno na mobilnim uređajima, a automatsko skaliranje slika pomaže u stvaranju tog atraktivnog doživljaja.

Primjeri stranica na svim uređajima

Koje veličine slika najbolje funkcioniraju?

Zbog responzivnog dizajna stranice ne postoji određena visina ili širina u pikselima koja će osigurati da slika održava određeni oblik na svim uređajima i rasporedima. Slikama se automatski mijenja veličina i obrežu da bi se prikazao najbolji mogući rezultat na raznim uređajima i rasporedima. No postoje neke smjernice koje vam mogu pomoći da provjerite izgledaju li slike sjajno na stranicama.

Pronalaženje najboljih veličina slika za stranicu ovisi o ovim čimbenicima:

  • Razmjer proporcija: odnos između visine i širine slika

  • Izgled stupca: vrsta i broj stupaca na stranici

  • Izgled web-dijela: raspored koji odaberete za web-dio u kojem se slika koristi

Omjer

Razmjer proporcija odnos je između širine i visine slika. Obično se izražava kao dva broja, kao što su 3:2, 4:3 ili 16:9. Širina je uvijek prvi broj. Primjerice, omjer 16:9 može biti širine 1600 piksela i visine 900 piksela. Ili može biti 1920 x 1080, 1280 x 720 ili bilo koja druga kombinacija širine/visine koja se može izračunati jednako 16:9. Kalkulatore razmjera proporcija možete pronaći na internetu i u nekim alatima za uređivanje fotografija da biste lakše odredili razmjere proporcija slika. 

Primjeri razmjera proporcija 16:9 i 4:3.

U većini slučajeva slike u modernim web-dijelovima najbolje funkcioniraju na različitim rasporedima i uređajima kada imaju razmjer proporcija 16:9 ili 4:3, ovisno o rasporedu.

Izgledi stupaca

Stranicu je moguće rasporediti s sekcijama koje sadrže različite vrste stupaca i rasporede, kao što su stupci pune širine, jedan stupac, dva stupca, tri stupca, treći lijevi i treći desni stupci. Općenito pravilo za slike za koje se očekuje da ispune širinu stupca jest to da su barem širine stupca u koji se smještaju. Na primjer, slika u web-dijelu slike u jednom stupcu mora biti široka najmanje 1204 piksela.

U nastavku su navedene smjernice za širinu svakog rasporeda stupaca:

Raspored

Širina u pikselima

Stupac pune širine

1920

Jedan stupac

1204

Dva stupca

586 po stupcu

Tri stupca

380 po stupcu

Treći lijevi stupac

380 za lijevi stupac; 792 za desni stupac

Treći desni stupac

792 za lijevi stupac; 380 za desni stupac

Zbog responzivne prirode stranica slike u stupcima pune širine uvijek će se prikazivati u punoj širini zaslona uz automatsku visinu na temelju veličine zaslona.

Visina slika postavljenih u drugim rasporedima stupaca ovisit će o razmjeru proporcija. Slijede smjernice za visinu/širinu razmjera proporcija 16:9 i 4:3 (zaokruženo prema gore/dolje na najbliži piksel). To je korisno ako slike držite na širini i visini koja se na odgovarajući način skaliraju za mobilne uređaje, na primjer:

OMJER

TLOCRT

16 x 9

Širina x Visina u pikselima

4 x 3

Širina x Visina u pikselima

Jedan stupac

1204 x 677

1204 x 903

Dva stupca

586 x 330

586 x 439

Tri stupca

380 x 214

380 x 285

Treći lijevi stupac

380 x 446 za lijevi stupac; 792 x 446 za desni stupac

380 x 594 za lijevi stupac; 792 x 594 za desni stupac

Treći desni stupac

792 x 446 za lijevi stupac; 380 x 446 za desni stupac

792 x 594 za lijevi stupac; 380 x 594 za desni stupac

Izgledi web-dijelova

Rasporedi u web-dijelovima koje koristite utjecat će i na skaliranje slika. U sljedećim se primjerima prikazuju različiti web-dijelovi te neke mogućnosti i razmjeri proporcija koje možete koristiti.

Glavni web-dio

Sljedeći razmjeri proporcija za rasporede pločica i slojeva su:

  • Pločice: visina web-dijela skalirana je tako da slijedi razmjer proporcija 8:3, a slike unutar web-dijela skalirane su u razmjer proporcija 4:3.

  • Slojevi: pojedinačni sloj skaliraju razmjer proporcija 8:3, a slike unutar svakog sloja skaliranje u razmjer proporcija blizu 16:9.

  • Na mobilnim uređajima raspored vrtuljak koristi se u 16:9.

Evo primjera slike prikazane u rasporedu Slojevi (vrh) i Raspored pločica (dno):

Example of Hero web part images in Layers and Tiles layouts

Web-dio istaknutog sadržaja

16:9 omjer je proporcija za rasporede vrtuljaka, filmske trake i rešetke.

Evo primjera razmjera proporcija 16:9. Na prvoj je slici prikazan raspored Filmska vrpca, a na drugoj je prikazan raspored Rešetka:

Web-dio Istaknuti sadržaj koji koristi izgled Filmstrip.

Raspored Rešetka istaknutog sadržaja s prikazanim proširenim fotografijama.

Web-dio slike

Slike će se proširiti na širinu sekcije koja sadrži web-dio. 

Evo primjera slike u web-dijelu Slika koja koristi razmjer proporcija 16:9.

Slika u web-dijelu Slika koja koristi omjer Vrtuljak 16:9.

Možete i promijeniti razmjer proporcija ili prostoručnu obrezivanje pomoću alata za uređivanje slika ili pomoću ručica za promjenu veličine povećati ili smanjiti sliku.

Fotografija otvorena u alatu za uređivanje sustava SharePoint.

Web-dio galerije slika

Sljedeći razmjeri proporcija mogu se koristiti u različitim rasporedima:

  • Izgledi cigle i vrtuljaka poštuju razmjere proporcija svih slika: 16:9, 1:1, 4:3 i tako dalje. 

  • Izgled Rešetka omogućuje tri proporcije: 1:1 kvadrat, širok 16:9 i 4:3 standard.

Prva slika prikazuje izgled Cigla uweb-dijelu Galerija slika (zadržava razmjer proporcija 16:9 i 1:1). Na drugoj je slici prikazan raspored Rešetka (pomoću razmjera proporcija 1:1).

Web-dio Galerija slika pomoću mogućnosti izgleda cigle.

Web-dio Galerija slika koji koristi mogućnost rasporeda rešetke.

Web-dio novosti

Ovisno o rasporedu, slike u web-dijelu Novosti mogu biti 4:3, 16:9 ili 21:9.

Evo primjera slika u gornjoj priči i rasporedu vrtuljaka:

Primjeri slika izgleda vijesti

Područje naslova stranice

Slike izgledaju najbolje kada su vodoravno ili 16:9 ili veće u razmjeru proporcija i kada su veličine najmanje 1 MB. Svakako postavite središnju točku tako da najvažniji dio slike bude u prikazu, osobito kada se slika koristi u minijaturama, rasporedima vijesti i rezultatima pretraživanja.

Primjer (izvorna slika 16:9) s fokusnom točkom postavljenom na zvučniku:

Primjer slike 16:9 u području naslova stranice.

Minijatura stranice

Minijature stranica prikazuju se na mjestima kao što su rezultati pretraživanja, istaknuti rezultati sadržaja, objave vijesti i još mnogo toga. Minijatura po zadanom dolazi iz područja naslova stranice ili iz web-dijela prvog redoslijeda na stranici (npr. iz gornjeg lijevog dijela stranice). Možete nadjačati zadanu postavku i promijeniti minijaturu stranice. Kada to učinite, najbolje je koristiti sliku s razmjerom proporcija 16:9.

Primjer (izvorna slika 16:9):

Example of page thumbnail image in Highlighted content web part

Web-dio brze veze

Web-dio Brze veze ima šest različitih rasporeda. Evo unaprijed postavljenih razmjera proporcija:

  • Kompaktno, Popis, Pločice: 1:1, 4:3

  • Filmstrip, Grid, button: 16:9

Na prvoj je slici prikazan sažeti raspored u web-dijeluBrze veze. Na drugoj se slici prikazuje isti web-dio brze veze pomoću rasporeda Filmska vrpca.

Web-dio Brze veze s minijaturama slika za veze.

Web-dio Brze veze s prikazom omjera 16:9 za slike.

Savjeti: 

  • Kada dodate sliku u područje naslova stranice ili web-dio Glavna slika, najbolje je postaviti i središnju točku u području slike koje želite uvijek prikazivati. Dodatne informacije o postavljanju središnje točke za ta dva scenarija potražite u člancima Korištenje web-dijela Glavna slika i Stvaranje i korištenje modernih stranica na web-mjestu sustava SharePoint.

  • Žarište

Preporuke za slike zaglavlja web-mjesta

Osim stranica, možda ćete htjeti dodati prilagođene logotipe ili slike u proširenom rasporedu. U nastavku su navedeni preporuke za veličinu tih elemenata.

Element

Opis

Preporuka

Širina x Visina u pikselima

Logotip web-mjesta

Veći logotip koji može biti ne-kvadratni i transparentan ovisno o prenesenom dizajnu.

192 x 64 

Oblik: PNG, JPEG, SVG (SVG nije dopušten na web-mjestima povezanima s grupom)

Minijatura logotipa web-mjesta

Minijatura kvadratnog logotipa koja se koristi ako nije prenesen logotip web-mjesta ili na mjesta na kojima je potreban kvadratni oblik.

Taj je element obavezan.

64 x 64 

Oblik: PNG, JPEG, SVG (SVG nije dopušten na web-mjestima povezanima s grupom)

Logotip web-mjesta s proširenim rasporedom

Prošireni izgled zaglavlja ima proširenu širinu logotipa web-mjesta.

300 x 64

Oblik: JPEG, PNG, SVG

Slika pozadine proširenog izgleda

Nova pozadinska slika koja se može koristiti s proširenim zaglavljem.

2560 x 164

Oblik: JPEG, PNG

Potrebna vam je dodatna pomoć?

Želite dodatne mogućnosti?

Istražite pogodnosti pretplate, pregledajte tečajeve za obuku, saznajte kako zaštititi uređaj i još mnogo toga.

Zajednice vam pomažu da postavljate pitanja i odgovarate na njih, pošaljete povratne informacije i čujete se sa stručnjacima s bogatim znanjem.