Moderne sider og nettdeler er utformet for å være fullstendig responsive på tvers av enheter, noe som betyr at bilder som brukes i nettdeler, skaleres forskjellig avhengig av hvor de vises, hvilket oppsett som brukes og enheten de vises på. Moderne sider er for eksempel utformet for å se bra ut på mobile enheter, og automatisk bildeskalering bidrar til å skape en attraktiv opplevelse.
Hvilke bildestørrelser fungerer best?
På grunn av den responsive sideutformingen er det ikke en bestemt høyde eller bredde i piksler som sikrer at et bilde beholder en bestemt form på tvers av enheter og oppsett. Bildestørrelsen endres og blir beskåret automatisk for å vise best mulig resultat på tvers av en rekke enheter og oppsett. Det finnes imidlertid noen retningslinjer som kan hjelpe deg med å sikre at bildene ser flotte ut på sidene dine.
Å finne de beste bildestørrelsene for siden avhenger av disse faktorene:
- Størrelsesforhold: forholdet mellom høyden og bredden på bilder
- Kolonneoppsett: typen og antall kolonner på siden
- Nettdeloppsett: oppsettet du velger for nettdelen der bildet brukes
Størrelsesforhold
Et størrelsesforhold er forholdet mellom bredden og høyden på bilder. Det uttrykkes vanligvis som to tall, for eksempel 3:2, 4:3 eller 16:9. Bredden er alltid det første tallet. Et forhold på 16:9 kan for eksempel være 1600 piksler i bredden og 900 piksler i høyden. Det kan også være 1920 x 1080, 1280 x 720 eller andre kombinasjoner av bredde/høyde som kan beregnes til å være lik 16:9. Du finner størrelseskalkulatorer på nettet og i noen bilderedigeringsverktøy for å hjelpe deg med å bestemme størrelsesforholdet til bildene dine.
I de fleste tilfeller fungerer bilder i moderne nettdeler best på tvers av oppsett og enheter når de har et størrelsesforhold på enten 16:9 eller 4:3, avhengig av oppsettet.
Kolonneoppsett
En side kan ordnes med inndelinger som inneholder ulike spaltetyper og oppsett, for eksempel spalter med full bredde, én spalte, to spalter, tre spalter, én tredjedel venstre og en tredjedel høyre spalter. En generell regel for bilder som forventes å fylle bredden på en kolonne, er at de er minst like brede som kolonnen de er plassert i. Et bilde i en bildenettdel i én kolonne bør for eksempel være minst 1204 piksler bredt.
Følgende er bredderetningslinjene for hvert av kolonneoppsettene:
| Oppsett | Bredde i piksler |
|---|---|
| Kolonne med full bredde | 1920 |
| Én kolonne | 1204 |
| To kolonner | 586 per kolonne |
| Tre kolonner | 380 per kolonne |
| En tredjedels venstre kolonne | 380 for venstre kolonne; 792 for høyre kolonne |
| En tredjedels høyrekolonne | 792 for venstre kolonne; 380 for høyre kolonne |
Siden sidene er responsive, vises bilder i kolonner i full bredde alltid i full bredde på skjermen med en automatisk høyde basert på skjermstørrelsen.
Høyden på bilder som er plassert i andre kolonneoppsett, avhenger av størrelsesforholdet. Her er retningslinjer for høyde/bredde for størrelsesforholdet 16:9 og 4:3 (avrundet opp/ned til nærmeste piksel). Dette er nyttig for å holde bildene i en bredde og høyde som skaleres riktig for mobile enheter, for eksempel:
| STØRRELSESFORHOLD OPPSETT |
16 x 9 piksler Bredde x Høyde i piksler |
4 x 3 Bredde x Høyde i piksler |
|---|---|---|
| Én kolonne | 1204 x 677 | 1204 x 903 |
| To kolonner | 586 x 330 piksler | 586 x 439 piksler |
| Tre kolonner | 380 x 214 piksler | 380 x 285 piksler |
| En tredjedels venstre kolonne | 380 x 446 for venstre kolonne; 792 x 446 for høyre kolonne | 380 x 594 for venstre kolonne; 792 x 594 for høyre kolonne |
| En tredjedels høyrekolonne | 792 x 446 for venstre kolonne; 380 x 446 for høyre kolonne | 792 x 594 for venstre kolonne; 380 x 594 for høyre kolonne |
Webdel-oppsett
Oppsettene i nettdelene du bruker, påvirker også hvordan bildene skaleres. Eksemplene nedenfor viser forskjellige nettdeler og noen av alternativene og størrelsesforholdene du kan bruke.
| Nettdel | Størrelsesforhold |
|---|---|
| Nettdel for hovedbanner | Følgende størrelsesforhold for oppsettene Fliser og Lag er:
|
| Uthevet innholdsnettdel | 16:9 er størrelsesforholdet for Karusell-, Filmstripe- og Rutententen-oppsettene. Her er et eksempel på et størrelsesforhold på 16:9. Det første bildet viser filmstripeoppsettet, og det andre viser rutenettoppsettet: 
|
| Nettdel for bilde | Bilder utvides til bredden på inndelingen som inneholder nettdelen. Her er et eksempel på et bilde i bildenettdelen som bruker størrelsesforholdet 16:9. 
Du har også muligheten til å endre størrelsesforholdet eller frihåndsbeskjæring ved hjelp av bilderedigeringsverktøyet eller bruke skaleringshåndtakene til å gjøre bildet større eller mindre. 
|
| Nettdel for bildegalleri | Følgende størrelsesforhold kan brukes i forskjellige oppsett:
|
| nettdel for nyheter | Avhengig av oppsettet kan bildene i nettdelen for nyheter være 4:3, 16:9 eller 21:9. Her er et eksempel på bilder i en topphistorie og et Karusell-oppsett: 
|
| Sidetittelområde | Bildene blir best når de er liggende eller har et størrelsesforhold på 16:9 eller mer, og når de er minst 1 MB. Pass også på å angi et fokuspunkt for å holde den viktigste delen av bildet synlig, spesielt når bildet brukes i miniatyrbilder, nyhetsoppsett og søkeresultater. Eksempel (originalbilde 16:9) med fokuspunktet på høyttaleren: 
|
| Miniatyrbilde av side | Sideminiatyrbilder vises på steder som søkeresultater, uthevede innholdsresultater, nyhetsinnlegg og mer. Som standard kommer miniatyrbildet fra sidetittelområdet eller fra nettdelen som er i første orden på siden (for eksempel øverst til venstre på et sideoppsett). Du kan overstyre standarden og endre miniatyrbildet for siden. Når du gjør dette, er det best å bruke et bilde med et størrelsesforhold på 16:9. Eksempel (opprinnelig bilde 16:9): 
|
| Webdel for Hurtigkoblinger | Nettdelen for hurtigkoblinger har seks forskjellige oppsett. Her er de forhåndsinnstilte størrelsesforholdene:
|
Tips
Når du legger til et bilde i et sidetittelområde eller bannernettdel, er det også best å angi fokuspunktet i området av bildet som du alltid vil vise. Hvis du vil finne ut mer om å angi et samlingspunkt for disse to scenarioene, kan du se Bruke nettdelen for hovedbanner og Opprette og bruke moderne sider på et SharePoint-nettsted.
Anbefalinger for topptekst for område
I tillegg til sider vil du kanskje legge til egendefinerte logoer eller bilder i et utvidet oppsett. Her er anbefalinger for størrelse for disse elementene.
| Element | Beskrivelse | Anbefaling Bredde x Høyde i piksler |
|---|---|---|
| Områdelogo | Større logo som kan være ikke-firkantet og gjennomsiktig, avhengig av utformingen som lastes opp. | 192 x 64 piksler Format: PNG, JPEG, SVG (SVG er ikke tillatt på gruppetilkoblede nettsteder) |
| Miniatyrbilde av områdelogo | Et kvadratisk logominiatyrbilde som brukes hvis ingen nettstedslogo lastes opp eller på steder der et kvadratisk format er obligatorisk. Dette elementet er nødvendig. |
64 x 64 Format: PNG, JPEG, SVG (SVG er ikke tillatt på gruppetilkoblede nettsteder) |
| Nettstedslogo med utvidet oppsett | Det utvidede topptekstoppsettet har en utvidet logobredde for nettstedet. | 300 x 64 piksler Format: JPEG, PNG, SVG |
| Bakgrunnsbilde for utvidet oppsett | Et nytt bakgrunnsbilde som kan brukes med den utvidede toppteksten. | 2560 x 164 piksler Format: JPEG, PNG |