Moderne stranice i veb segmenti dizajnirani su tako da se u potpunosti odazivaju na svim uređajima, što znači da će slike korišćene u veb segmentima imati različitu razmeru u zavisnosti od toga gde se prikazuju, koji raspored se koristi i koji uređaj na kojem se prikazuju. Na primer, moderne stranice su dizajnirane tako da izgledaju sjajno na mobilnim uređajima, a automatsko podešavanje razmere slike pomaže u kreiranju tog privlačnog iskustva.
Koje veličine slika najbolje funkcionišu?
Zbog responzivnog dizajna stranice, ne postoji određena visina ili širina u pikselima koja će obezbediti da slika zadrži određeni oblik na svim uređajima i rasporedima. Slike se automatski menjaju veličinu i izrezuju se radi prikaza najboljeg mogućeg rezultata na raznim uređajima i rasporedima. Međutim, postoje neke smernice koje mogu da vam pomognu da se uverite da slike izgledaju odlično na stranicama.
Pronalaženje najboljih veličina slika za stranicu zavisi od ovih faktora:
- Odnos širina/visina: odnos između visine i širine slika
- Raspored kolona: tip i broj kolona na stranici
- Raspored veb segmenta: raspored koji odaberete za veb segment u kojem se slika koristi
Odnos širina/visina
Odnos širina/visina je odnos između širine i visine slika. Obično se izražava kao dva broja, na primer 3:2, 4:3 ili 16:9. Širina je uvek prvi broj. Kao primer, odnos 16:9 može da bude 1600 piksela u širinu i 900 piksela u visinu. Odnosno, to može biti 1920 x 1080, 1280 x 720 ili bilo koja druga kombinacija širine/visine koja može da se izračuna na 16:9. Kalkulatore odnosa širina/visina možete da pronađete na mreži i u nekim alatkama za uređivanje fotografija kako biste lakše utvrdili odnos širina/visina vaših slika.
U većini slučajeva, slike u modernim veb segmentima najbolje funkcionišu u rasporedima i uređajima kada imaju odnos širina/visina 16:9 ili 4:3, u zavisnosti od rasporeda.
Rasporedi kolona
Stranica može biti raspoređena sa odeljcima koji uključuju različite tipove kolona i rasporede, na primer kolone pune širine, jednu kolonu, dve kolone, tri kolone, jednu trećinu leve i jedne trećine desne kolone. Opšte pravilo za slike za koje se očekuje da ispune širinu kolone jeste da budu barem onoliko široke kao kolona u koju su postavljene. Na primer, slika u veb segmentu za sliku u jednoj koloni treba da bude široka najmanje 1204 piksela.
Slede smernice za širinu za svaki raspored kolone:
| Raspored | Širina u pikselima |
|---|---|
| Kolona pune širine | 1920 |
| Jedna kolona | 1204 |
| Dve kolone | 586 po koloni |
| Tri kolone | 380 po koloni |
| Jedna trećina leve kolone | 380 za levu kolonu; 792 za desnu kolonu |
| Jedna trećina desne kolone | 792 za levu kolonu; 380 za desnu kolonu |
Zbog odzivne prirode stranica, slike u kolonama pune širine uvek će se prikazivati u punoj širini ekrana sa automatskom visinom zasnovanom na veličini ekrana.
Visina slika koje se nalaze u drugim rasporedima kolona zavisiće od vašeg odnosa širina/visina. Evo uputstava za visinu/širinu za 16:9 i 4:3 odnos širina/visina (zaokruženo na najbliži piksel). To je korisno da zadržite širinu i visinu slike koja se prilagođava na odgovarajući način za mobilne uređaje, na primer:
| ODNOS ŠIRINA/VISINA RASPORED |
16 x 9 Širina x visina u pikselima |
4 x 3 Širina x visina u pikselima |
|---|---|---|
| Jedna kolona | 1204 x 677 | 1204 x 903 |
| Dve kolone | 586 x 330 | 586 x 439 |
| Tri kolone | 380 x 214 | 380 x 285 |
| Jedna trećina leve kolone | 380 k 446 za levu kolonu; 792 x 446 za desnu kolonu | 380 k 594 za levu kolonu; 792 x 594 za desnu kolonu |
| Jedna trećina desne kolone | 792 k 446 za levu kolonu; 380 x 446 za desnu kolonu | 792 k 594 za levu kolonu; 380 x 594 za desnu kolonu |
Rasporedi veb segmenta
Rasporedi u veb segmentima koje koristite utiču i na razmeru slika. Sledeći primeri prikazuju različite veb segmente i neke opcije i odnos širina/visina koje možete da koristite.
| Veb deo za baner | Sledeći odnosi širina/visina za rasporede pločica i slojeva su:
|
| Veb segment istaknutog sadržaja | 16:9 je odnos širina/visina za rasporede karusela, filmske trake i koordinatne mreže. Evo primera 16:9 odnosa širina/visina. Prva slika prikazuje raspored filmske trake, a druga prikazuje raspored koordinatne mreže: 
|
| Veb segment slike | Slike će se proširiti do širine odeljka koji sadrži veb segment. Evo primera slike u veb segmentu za sliku koja koristi 16:9 odnos širina/visina. 
Imate i opciju da promenite odnos širina/visina ili izrezivanje slobodnom rukom pomoću alatke za uređivanje slika ili da koristite regulatore za promenu veličine da biste povećali ili smanjili sliku. 
|
| Veb segment galerije slika | Sledeći odnosi širina/visina mogu da se koriste u različitim rasporedima:
|
| Veb segment "Vesti" | U zavisnosti od rasporeda, slike u veb segmentu "Vesti" mogu biti 4:3, 16:9 ili 21:9. Evo primera slika u rasporedu "Glavni sprat" i "Vrteška": 
|
| Oblast za naslov stranice | Slike najbolje izgledaju kada su položene, odnosa širina/visina 16:9 ili veće i kada su veličine najmanje 1 MB. Takođe obavezno postavite centralnu tačku da biste zadržali najvažniji deo slike u prikazu, naročito kada se slika koristi na sličicama, rasporedima vesti i rezultatima pretrage. Primer (originalna slika 16:9) sa žarišnom tačkom postavljenom na zvučnik: 
|
| Page thumbnail | Sličice stranica se prikazuju na mestima kao što su rezultati pretrage, rezultati istaknutog sadržaja, objave vesti i još mnogo toga. Sličica podrazumevano potiče iz oblasti za naslov stranice ili iz veb segmenta koji je prvog redosleda na stranici (na primer u gornjem levom uglu rasporeda na stranici). Možete da zamenite podrazumevanu opciju i promenite sličicu stranice. Kada to uradite, najbolje je da koristite sliku sa odnosom širina/visina 16:9. Primer (originalna slika 16:9): 
|
| Veb segment brzih veza | Veb segment brzih veza ima šest različitih rasporeda. Ovo su unapred podešeni odnosi širina/visina:
|
Savet
Kada dodate sliku u oblast naslova stranice ili veb segment za baner, takođe je najbolje da postavite žarišnu tačku u oblast slike koju želite uvek da prikažete. Da biste saznali više o postavljanju centralne tačke za ova dva scenarija, pogledajte članke "Korišćenje veb segmenta "Heroj" i "Kreiranje i korišćenje modernih stranica na SharePoint lokaciji".
Preporuke za slike zaglavlja sajta
Pored stranica, možda ćete želeti da dodate prilagođene logotipe ili slike u proširenom rasporedu. Evo preporuka veličine za te elemente.
| Element | Opis | Preporuka Širina x visina u pikselima |
|---|---|---|
| Logotip lokacije | Veći logotip koji može da bude nekvadratan i proziran, u zavisnosti od otpremljenog dizajna. | 192 x 64 Format: PNG, JPEG, SVG (SVG nije dozvoljen na sajtovima povezanim sa grupama) |
| Site logo thumbnail | Četvrtasta sličica logotipa koja se koristi ako nije otpremljen logotip lokacije ili na mestima gde je potreban kvadratni oblik. Ovaj element je neophodan. |
64 x 64 Format: PNG, JPEG, SVG (SVG nije dozvoljen na sajtovima povezanim sa grupama) |
| Logotip lokacije sa proširenim rasporedom | Raspored proširenog zaglavlja ima proširenu širinu logotipa lokacije. | 300 x 64 Format: JPEG, PNG, SVG |
| Slika u pozadini proširenog rasporeda | Nova slika u pozadini koja se može koristiti sa proširenim zaglavljem. | 2560 x 164 Format: JPEG, PNG |