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.
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.
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.
|
Sljedeći razmjeri proporcija za rasporede pločica i slojeva su:
Evo primjera slike prikazane u rasporedu Slojevi (vrh) i Raspored pločica (dno):
|
|
|
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:
|
|
|
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.
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.
|
|
|
Sljedeći razmjeri proporcija mogu se koristiti u različitim rasporedima:
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).
|
|
|
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:
|
|
|
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:
|
|
|
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):
|
|
|
Web-dio Brze veze ima šest različitih rasporeda. Evo unaprijed postavljenih razmjera proporcija:
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.
|
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.
-
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 |
