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 različito prilagođavati mjestu na kojem se prikazuju, korištenom rasporedu i uređaju na kojem se prikazuju. Moderne stranice, primjerice, osmišljene su tako da izgledaju sjajno na mobilnim uređajima, a automatsko skaliranje slike pomaže u stvaranju tog privlačnog iskustva.
Koje veličine slika najbolje funkcioniraju?
Zbog responzivnog dizajna stranice nema određene visine ili širine u pikselima koja će osigurati da slika zadrži određeni oblik na svim uređajima i rasporedima. Slikama se automatski mijenja veličina i obrezuju se radi prikaza najboljeg mogućeg rezultata na raznim uređajima i rasporedima. No postoje neke smjernice koje će vam pomoći da osigurate sjajan izgled slika na stranicama.
Pronalaženje najboljih veličina slika za stranicu ovisi o sljedećim čimbenicima:
- Razmjer proporcija: odnos između visine i širine slika
- Raspored stupaca: vrsta i broj stupaca na stranici
- Izgled web-dijela: raspored koji odaberete za web-dio u kojem se slika koristi
Razmjer proporcija
Proporcije su odnos širine i visine slika. Obično se izražava kao dva broja, npr. 3:2, 4:3 ili 16:9. Širina je uvijek prvi broj. Na primjer, omjer 16:9 mogao bi biti 1600 piksela u širinu i 900 piksela u visinu. Može biti i dimenzija 1920 x 1080, 1280 x 720 ili pak bilo koja druga kombinacija širine i visine za koju je moguće izračunati veličinu 16:9. Kalkulatore za razmjer proporcija možete pronaći na internetu i u nekim alatima za uređivanje fotografija koji će vam pomoći u određivanju proporcija slika.
U većini slučajeva slike u modernim web-dijelovima najbolje funkcioniraju na svim rasporedima i uređajima kada imaju omjer proporcija 16:9 ili 4:3, ovisno o izgledu.
Rasporedi stupaca
Stranica može biti podijeljena pomoću odjeljaka koji obuhvaćaju različite vrste stupaca i rasporede, kao što su stupci pune širine, jedan stupac, dva stupca, tri stupca, jedna trećina lijevi i jedna trećina desni stupac. Općenito pravilo za slike za koje se očekuje da ispunjavaju širinu stupca jest da budu najmanje onoliko široke koliko i stupac u koji su smještene. Primjerice, slika u web-dijelu za slike u jednom stupcu trebala bi biti široka najmanje 1204 piksela.
Slijede smjernice širine za svaki raspored stupaca:
| Raspored | Širina u pikselima |
|---|---|
| Stupac pune širine | 1920 |
| Jedan stupac | 1204 |
| Dva stupca | 586 po stupcu |
| Tri stupca | 380 po stupcu |
| Jedna trećina lijevog stupca | 380 za lijevi stupac; 792 za desni stupac |
| Jedna trećina desnog stupca | 792 za lijevi stupac; 380 za desni stupac |
Zbog responzivnosti stranica slike u stupcima pune širine uvijek će se prikazivati na punoj širini zaslona uz automatsku visinu koja ovisi o veličini zaslona.
Visina slika postavljenih unutar ostalih rasporeda stupaca ovisit će o vašem omjeru proporcija. U nastavku su navedene smjernice za visinu/širinu za omjer proporcija 16:9 i 4:3 (zaokruženo gore/dolje na najbliži piksel). To je korisno da biste zadržali širinu i visinu slika koja se prilagođava mobilnim uređajima, na primjer:
| RAZMJER PROPORCIJA RASPORED |
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 |
| Jedna trećina lijevog stupca | 380 x 446 za lijevi stupac; 792 x 446 za desni stupac | 380 x 594 za lijevi stupac; 792 x 594 za desni stupac |
| Jedna trećina desnog stupca | 792 x 446 za lijevi stupac; 380 x 446 za desni stupac | 792 x 594 za lijevi stupac; 380 x 594 za desni stupac |
Rasporedi web-dijelova
Rasporedi u web-dijelovima koje koristite također će utjecati na skaliranje slika. Sljedeći primjeri prikazuju različite web-dijelove te neke mogućnosti i razmjere proporcija koje možete koristiti.
| Glavni web-dio | Sljedeći su razmjeri proporcija rasporeda pločica i slojeva:
|
| Web-dio istaknutog sadržaja | 16:9 omjer je proporcija za izglede rotirajućeg prikaza, filmske trake i rešetke. Evo primjera razmjera proporcija 16:9. Na prvoj je slici prikazan raspored filmske trake, a na drugoj raspored rešetke: 
|
| Web-dio za slike | Slike će se proširiti na širinu sekcije u kojoj se nalazi web-dio. Slijedi primjer slike u web-dijelu za slike koji koristi omjer proporcija 16:9. 
Imate i mogućnost promjene razmjera proporcija ili ručnog obrezivanja pomoću alata za uređivanje slike ili korištenja ručica za promjenu veličine da biste povećali ili smanjili sliku. 
|
| Web-dio galerije slika | U različitim rasporedima mogu se koristiti sljedeći razmjeri proporcija:
|
| Web-dio za novosti | Ovisno o rasporedu, slike u web-dijelu Novosti mogu biti 4:3, 16:9 ili 21:9. Evo primjera slika u rasporedu Gornji kat i rotirajući prikaz: 
|
| Područje naslova stranice | Slike najbolje izgledaju kada su u vodoravnom usmjerenju, u omjeru proporcija 16:9 ili veće i kada su veličine najmanje 1 MB. Uz to, obavezno postavite žarišnu točku da biste zadržali najvažniji dio slike na zaslonu, osobito kada se slika koristi u minijaturama, rasporedima vijesti i rezultatima pretraživanja. Primjer (izvorna slika 16:9) s žarišnom točkom postavljenom na zvučniku: 
|
| Minijatura stranice | Minijature stranica prikazuju se na mjestima kao što su rezultati pretraživanja, rezultati istaknutog sadržaja, objave vijesti i još mnogo toga. Minijatura po zadanom dolazi iz područja naslova stranice ili web-dijela koji se nalazi prvog redoslijeda na stranici (primjerice u gornjem lijevom kutu rasporeda stranice). Minijaturu stranice možete nadjačati i promijeniti. Kada to učinite, najbolje je koristiti sliku s proporcijama 16:9. Primjer (izvorna slika 16:9): 
|
| Web-dio brze veze | Web-dio Brze veze ima šest različitih rasporeda. Evo unaprijed postavljenih razmjera proporcija:
|
Savjet
Kada dodate sliku u područje naslova stranice ili u web-dio glavne slike, najbolje je postaviti žarišnu točku u područje slike koje želite da se uvijek prikazuje. Dodatne informacije o postavljanju središnje točke za ta dva scenarija potražite u člancima Korištenje glavnog web-dijela i Stvaranje i korištenje modernih stranica na web-mjestu sustava SharePoint.
Preporuke za sliku zaglavlja web-mjesta
Osim stranica možete dodati prilagođene logotipe ili slike u proširenom rasporedu. U nastavku ćete pronaći preporuke za veličinu tih elemenata.
| Element | Opis | Preporuka Širina x visina u pikselima |
|---|---|---|
| Logotip web-mjesta | Veći logotip koji može biti nekvadratan i proziran, ovisno o prenesenom dizajnu. | 192 x 64 Oblik: PNG, JPEG, SVG (SVG nije dopušten na web-mjestima povezanim s grupom) |
| Minijatura logotipa web-mjesta | Kvadratna minijatura logotipa koja se koristi ako nije prenesen nijedan logotip web-mjesta ili na mjestima gdje je potreban kvadratni oblik. Ovaj element je obavezan. |
64 x 64 Oblik: PNG, JPEG, SVG (SVG nije dopušten na web-mjestima povezanim s grupom) |
| Logotip web-mjesta s proširenim izgledom | Prošireni raspored zaglavlja ima proširenu širinu logotipa web-mjesta. | 300 x 64 Oblik: JPEG, PNG, SVG |
| Prošireni izgled pozadinska slika | Nova pozadinska slika koja se može koristiti s proširenim zaglavljem. | 2560 x 164 Oblik: JPEG, PNG |