We couldn’t sign you in
Select the account you want to use.
Bildeskalering og skalering i moderne sider i SharePoint

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 hvilken enhet de vises på. Moderne sider er for eksempel utformet for å se flotte ut på mobile enheter, og automatisk bildeskalering bidrar til en flott opplevelse.

Eksempler på sider på tvers av enheter

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 opprettholder en bestemt figur på tvers av enheter og oppsett. Bilder skaleres og beskjæres automatisk for å vise det beste mulige resultatet 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.

Det å finne de beste bildestørrelsene for siden avhenger av disse faktorene:

  • Størrelsesforhold:forholdet mellom høyde og bredde på bilder

  • Spalteoppsett:type og antall spalter på siden

  • Nettdeloppsett:oppsettet du velger for nettdelen der bildet brukes

Størrelsesforhold

Et størrelsesforhold er forholdet mellom bildebredde og -høyde. 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 bredde med 900 piksler. Det kan også være 1920 x 1080, 1280 x 720 eller andre kombinasjoner av bredde/høyde som kan beregnes slik at de er lik 16:9. Du kan finne kalkulatorer for størrelsesforhold på Internett og i noen bilderedigeringsverktøy som hjelper deg med å bestemme størrelsesforholdene for bildene. 

Eksempler på størrelsesforholdene 16:9 og 4:3.

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 vises med inndelinger som inneholder ulike kolonnetyper og oppsett, for eksempel kolonner med full bredde, én kolonne, to kolonner, tre kolonner, en tredje til venstre og en tredje 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 bildewebdel i én kolonne må for eksempel være minst 1204 piksler bredt. Nedenfor finner du 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øyre kolonne

792 for venstre kolonne. 380 for høyre kolonne

På grunn av sidenes responsive natur vil bilder i kolonner i full bredde alltid vises i full bredde av skjermen med automatisk høyde basert på skjermstørrelsen.

Høyden på bilder som plasseres 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

LAYOUT

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 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øyre kolonne

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

Nettdeloppsett

Oppsettene i nettdelene du bruker, påvirker også hvordan bildene skaleres. Eksemplene nedenfor viser ulike nettdeler og oppsettene i én kolonne, og størrelsesforholdene som brukes i hver.

Vurder dette bildet som har det opprinnelige størrelsesforholdet på 16:9:

Eksempel på bilde av 16_9

Nedenfor finner du eksempler på dette bildet som vises i et sideoppsett med én kolonne, i ulike nettdeler og oppsett.

Nettdel for hoveddel

Følgende størrelsesforhold for oppsettene Delark og Lag er:

  • Fliser: Høyden på nettdelen skaleres slik at den følger et størrelsesforhold på 8:3, og bilder i nettdelskalaen til et størrelsesforhold på 4:3.

  • Lag: Et individuelt lag skaleres til et størrelsesforhold på 8:3, og bilder i hver lagskala til et størrelsesforhold nær 16:9.

  • På mobile enheter brukes et karuselloppsett kl. 16:9.

Her er et eksempel på et bilde som vises i oppsettet Lag (øverst) og Fliser (nederst)

Eksempel på nettdelbilder for hoveddel i lag- og flisoppsett

Uthevet innholdswebdel

16:9 er størrelsesforholdet for oppsettene Karusell, Filmstripe og Kort.

Her er et eksempel på et bilde som vises i filmstripeoppsettet (øverst) og kortoppsettet (nederst).

Bildeeksegreringer for uthevet innhold for nettdel

Bildewebdel

Bilder utvides til bredden på inndelingen som inneholder nettdelen. Du kan endre størrelsesforholdet eller frihåndsbeskjæringen ved hjelp av bildeverktøylinjen, eller bruke skaleringshåndtakene til å gjøre bildet større eller mindre.

Her er et eksempel som viser beskjæringsmerker for bilder (blå linjer) kl. 04:3

Bilde som viser beskjæringsmerker ved 4:3

Nettdel for bildegalleri

Følgende størrelsesforhold brukes i ulike oppsett:

  • Stensoppsettet respekterer størrelsesforholdet for alle bilder som vises: 16:9, 1:1, 4:3 og så videre. 

  • Fliser, Kort: 4:3

Her er et eksempel på et bilde som vises i oppsettet fliser (øverst) og fysiske oppsett (nederst)

Eksempel på oppsett for flis og fysiske bilder for nettdelen bildegalleri

Nyhetswebdel -

Avhengig av oppsettet, kan bildene i Nyheter-nettdelen være 04:3, 16:9 eller 21:9. Her er et eksempel på bilder i en toppartikkel og et karuselloppsett.

Eksempler på bilde for nyhetsoppsett

Sidetittelområde

Bildene 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å å angi et samlingspunkt til den viktigste delen av bildet i visningen, spesielt når bildet brukes i miniatyrbilder, nyhetsoppsett og søkeresultater.

Eksempel (opprinnelig bilde 16:9) med fokuspunkt angitt på høyttaler.

Eksempel på et bilde på 16:9 i sidetittelområdet.

Sideminiatyrbilde

Sideminiatyrer 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 standardvalget og endre miniatyrbildet for siden. Når du gjør det, er det best å bruke et bilde med størrelsesforhold 16:9.

Eksempel (opprinnelig bilde 16:9)

Eksempel på miniatyrbilde av side i webdelen Uthevet innhold

Nettdel for hurtigkoblinger 

Nettdelen for hurtigkoblinger har seks forskjellige oppsett. Her er anbefalte størrelsesforhold:

  • Filmstripe, rutenett, knapp: 16:9

  • Kompakt, liste, fliser: 1:1, 4:3

Her er et eksempel på et bilde som vises i et kompakt oppsett (øverst) og et Filmstripeoppsett (nederst)

Eksempler på bilder i oppsett for hurtigkoblinger

Tips!: 

  • Når du legger til et bilde i et sidetittelområde eller en hovedavdel, er det også best å angi fokuspunktet i det området av bildet du alltid vil vise. Hvis du vil lære mer om hvordan du angir et fokuspunkt for disse to scenariene, kan du se Endre fokuspunktet for et bilde i nettdelen for hovedavn og Tilpasse tittelområdet på en side.

  • Fokuspunkt

Anbefalinger for bilde av nettstedsoverskrift

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 er lastet opp

192 x 64 

Format: PNG, JPEG, SVG (SVG er ikke tillatt på gruppetilknyttede nettsteder)

Miniatyrbilde av områdelogo

Et kvadratisk logominiatyrbilde som brukes hvis ingen nettstedslogo er lastet opp eller på steder der et kvadratisk format er nødvendig

Dette elementet er obligatorisk.

64 x 64 

Format: PNG, JPEG, SVG (SVG er ikke tillatt på gruppetilknyttede nettsteder)

Logo for utvidet oppsett for område

Det utvidede topptekstoppsettet har en utvidet bredde for nettstedslogoen.

300 x 64p

Format: JPEG, PNG, SVG

Utvidet oppsett-bakgrunnsbilde

Et nytt bakgrunnsbilde som kan brukes med den utvidede toppteksten.

2560 x 164

Format: JPEG, PNG

Trenger du mer hjelp?

Utvid ferdighetene dine
Utforsk opplæring
Vær først ute med de nye funksjonene
Bli med i Microsoft Office Insider-deltakere

Var denne informasjonen nyttig?

Hvor fornøyd er du med språkkvaliteten?
Hva påvirket opplevelsen din?

Takk for tilbakemeldingen!

×