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 flotte ut på mobile enheter, og automatisk bildeskalering bidrar til å skape den flotte opplevelsen.
Hvilke bildestørrelser fungerer best?
På grunn av den responsive sideutformingen finnes det ikke en bestemt høyde eller bredde i piksler som sikrer at et bilde opprettholder en bestemt figur på tvers av enheter og oppsett. Bilder skaleres og beskjæres 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.
Å 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
-
Oppsett for webdel: 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. Som et eksempel kan et forhold på 16:9 være 1600 piksler i bredde med 900 piksler i høyde. Det kan også være 1920 x 1080, 1280 x 720 eller andre kombinasjoner av bredde/høyde som kan beregnes til lik 16:9. Du kan finne kalkulatorer for størrelsesforhold på nettet og i noen bilderedigeringsverktøy for å hjelpe deg med å bestemme størrelsesforholdene for bildene.
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 plasseres med inndelinger som inneholder ulike kolonnetyper og oppsett, for eksempel kolonner med full bredde, én kolonne, to kolonner, tre kolonner, én tredjedel til venstre og én tredjedel kolonner til høyre. 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 retningslinjene for bredde for hvert kolonneoppsett:
|
Oppsett |
Bredde i piksler |
|
Kolonne med full bredde |
1920 |
|
Én kolonne |
1204 |
|
To kolonner |
586 per kolonne |
|
Tre kolonner |
380 per kolonne |
|
En tredjedel venstre kolonne |
380 for venstre kolonne; 792 for høyre kolonne |
|
En tredjedel kolonne til høyre |
792 for venstre kolonne; 380 for høyre kolonne |
På grunn av sidenes responsive karakter vil bilder i kolonner med full bredde alltid vises i full bredde på skjermen med automatisk høyde basert på skjermstørrelse.
Høyden på bilder som er plassert i andre kolonneoppsett, avhenger av størrelsesforholdet. Her er retningslinjer for høyde/bredde for størrelsesforholdene 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 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 |
586 x 439 |
|
Tre kolonner |
380 x 214 |
380 x 285 |
|
En tredjedel 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 tredjedel kolonne til høyre |
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 |
Oppsett for webdeler
Oppsettene i nettdelene du bruker, vil også påvirke hvordan bildene skaleres. Eksemplene nedenfor viser ulike nettdeler og noen av alternativene og størrelsesforholdene du kan bruke.
|
Følgende størrelsesforhold for fliser og lagoppsett er:
Her er et eksempel på et bilde som vises i lagoppsettet (øverst) og flisoppsettet (nederst):
|
|
|
16:9 er størrelsesforholdet for karusell-, filmstripe- og rutenettoppsett. Her er et eksempel på størrelsesforholdet 16:9. Det første bildet viser filmstripeoppsettet, og det andre viser rutenettoppsettet:
|
|
|
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 for å gjøre bildet større eller mindre.
|
|
|
Følgende størrelsesforhold kan brukes i ulike oppsett:
Det første bildet viser mursteinsoppsettet ibildegallerinettdelen (beholder størrelsesforholdene 16:9 og 1:1). Det andre bildet viser rutenettoppsettet (med størrelsesforholdet 1:1).
|
|
|
Bilder i nyhetsnettdelen kan være 4:3, 16:9 eller 21:9, avhengig av oppsettet. Her er et eksempel på bilder i en topphistorie og et karuselloppsett:
|
|
|
Bilder ser best ut når de er liggende eller 16:9 eller større i størrelsesforhold, og når de er minst 1 MB i størrelse. Pass også på å sette et fokuspunkt til å holde den viktigste delen av bildet i visning, spesielt når bildet brukes i miniatyrbilder, nyhetsoppsett og søkeresultater. Eksempel (originalbilde 16:9) med fokuspunkt satt på høyttaleren:
|
|
|
Miniatyrbilder av sider vises på steder som søkeresultater, uthevede innholdsresultater, nyhetsinnlegg og mer. Som standard kommer miniatyrbildet fra sidetittelområdet eller fra nettdelen som er i den første rekkefølgen på siden (for eksempel øverst til venstre i et sideoppsett). Du kan overstyre standard 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):
|
|
|
Nettdelen for hurtigkoblinger har seks forskjellige oppsett. Her er de forhåndsinnstilte størrelsesforholdene:
Det første bildet viser komprimert oppsett inettdelen for hurtigkoblinger. Det andre bildet viser den samme webdelen for hurtigkoblinger ved hjelp av filmstripeoppsettet.
|
Tips!:
-
Når du legger til et bilde i et sidetittelområde eller en bannernettdel, er det også best å angi fokuspunktet i området på bildet du alltid vil vise. Hvis du vil lære mer om hvordan du angir et samlingspunkt for disse to scenariene, kan du se Bruke bannernettdelen og opprette og bruke moderne sider på et SharePoint-nettsted.
-
Anbefalinger for områdeoverskriftsbilde
I tillegg til sider vil du kanskje legge til egendefinerte logoer eller bilder i et utvidet oppsett. Her er størrelsesanbefalinger 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 hvilken utforming som er lastet opp. |
192 x 64 Format: PNG, JPEG, SVG (SVG er ikke tillatt på gruppetilkoblede områder) |
|
Miniatyrbilde av områdelogo |
Et miniatyrbilde av en firkantet logo som brukes hvis ingen områdelogo er lastet opp, eller på steder der et firkantet format er nødvendig. Dette elementet er nødvendig. |
64 x 64 Format: PNG, JPEG, SVG (SVG er ikke tillatt på gruppetilkoblede områder) |
|
Utvidet områdelogo for oppsett |
Det utvidede topptekstoppsettet har en utvidet områdelogobredde. |
300 x 64 Format: JPEG, PNG, SVG |
|
Bakgrunnsbilde for utvidet oppsett |
Et nytt bakgrunnsbilde som kan brukes med den utvidede toppteksten. |
2560 x 164 Format: JPEG, PNG |
