Billedstørrelse og skalering på SharePoint-moderne sider

Billedstørrelse og skalering på SharePoint-moderne sider

Moderne sider og webdele er designet til at svare fuldt ud på tværs af enheder, hvilket betyder, at billeder, der bruges i webdele, skal skaleres forskelligt, alt efter hvor de vises, hvilket layout der bruges, og den enhed, de vises på. F. eks. er moderne sider udviklet til at se flot ud på mobilenheder, og automatisk billed skalering hjælper dig med at skabe den flotte oplevelse.

Eksempler på sider på tværs af enheder

Hvilke billedstørrelser fungerer bedst?

På grund af det sidedesign, der svarer til, er der ikke en bestemt højde eller bredde i pixel, der sikrer, at et billede vil bevare en bestemt figur på tværs af enheder og layout. Billeder tilpasses og beskæres automatisk for at vise det bedst mulige resultat på tværs af en lang række enheder og layout. Der er dog nogle retningslinjer, der kan hjælpe dig med at sikre, at dine billeder ser flot ud på dine sider.

Hvis du vil finde de bedste billedstørrelser for din side, afhænger af disse faktorer:

  • Højde-bredde-forhold: forholdet mellem højde og bredde på billeder

  • Kolonnelayout: typen og antallet af kolonner på siden

  • Layoutfor webdel: det layout, du vælger til den webdel, hvor billedet bruges

Højde-bredde-forhold

Et højde-bredde-forhold er forholdet mellem bredden og højden af billeder. Det udtrykkes normalt som to tal, f. eks 3:2, 4:3 eller 16:9. Bredden er altid det første tal. Et eksempel kan et forhold på 16:9 være 1600 pixel i bredden med 900 pixel i højden. Eller det kan være 1920 x 1080, 1280 x 720 eller andre kombinationer af bredde/højde, der kan beregnes til samme 16:9. Du kan finde højde-bredde-forhold i Lommeregner online og i nogle fotoredigeringsværktøjer, som kan hjælpe dig med at bestemme størrelsesforhold for dine billeder. 

Eksempler på 16:9-og 4:3-højde-bredde-forhold.

I de fleste tilfælde fungerer billeder i moderne webdele bedst på tværs af layout og enheder, når de har et højde-bredde-forhold på enten 16:9 eller 4:3, afhængigt af layoutet.

Kolonnelayout

En side kan udformes med sektioner, der omfatter forskellige kolonnetyper og layout, f. eks kolonner i fuld bredde, én kolonne, to kolonner, tre kolonner, en tredjedel til venstre og en tredjedel til højre-kolonner. En generel regel for billeder, der forventes at fylde bredden af en kolonne, er, at de er mindst lige så brede som den kolonne, de er placeret i. For eksempel bør et billede i en webdel af typen billede i én kolonne være mindst 1204 pixel bredt. Følgende er retningslinjerne for bredden for hvert kolonnelayout:

Layout

Bredde i pixel

Kolonne i fuld bredde

1920

Én kolonne

1204

To kolonner

586 pr. kolonne

Tre kolonner

380 pr. kolonne

En tredjedel til venstre-kolonne

380 til venstre kolonne; 792 til højre kolonne

En tredjedel til højre-kolonne

792 til venstre kolonne; 380 til højre kolonne

På grund af de sider, der svarer til, vises billeder i kolonner i fuld bredde altid i fuldskærms bredden med en automatisk højde baseret på skærmstørrelse.

Højden af billeder, der er placeret i andre kolonneformater, afhænger af dit højde-bredde-forhold. Her er retningslinjerne for højde/bredde for 16:9-og 4:3-højde-forholdet (rundet op/ned til nærmeste pixel). Dette er nyttigt, hvis du vil bevare dine billeder i en bredde og højde, der kan skaleres til mobilenheder, f. eks.

HØJDE-BREDDE-FORHOLD

16 x 9

4 x 3

É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 til venstre-kolonne

380 x 446 til venstre kolonne; 792 x 446 til højre kolonne

380 x 594 til venstre kolonne; 792 x 594 til højre kolonne

En tredjedel til højre-kolonne

792 x 446 til venstre kolonne; 380 x 446 til højre kolonne

792 x 594 til venstre kolonne; 380 x 594 til højre kolonne

Webdels layout

Layoutene i de webdele, du bruger, påvirker også, hvordan dine billeder skal skaleres. I følgende eksempler vises forskellige webdele og deres layout i en kolonne og det højde-bredde-forhold, der bruges i hver.

Overvej dette billede, som har et oprindeligt højde-bredde-forhold på 16:9:

Eksempel på 16_9-billede

Følgende er eksempler på dette billede, der vises i en kolonne-sidelayout, i forskellige webdele og layout.

Webdelen helt

Følgende højde-bredde-forhold for fliser og lag layout er:

  • Fliser: højden af webdelen skaleres for at følge et højde-bredde-forhold på 8:3 og billeder i webdelens skala til et højde-bredde-forhold på 4:3.

  • Lag: et enkelt lag skaleres til et højde-bredde-forhold på 8:3, og billeder i hver lag skala til et højde-bredde-forhold i nærheden af 16:9.

  • På mobilenheder bruges et karrusel layout på 16:9.

Her er et eksempel på et billede, der vises i layoutene for lagene (øverst) og fliser (nederst)

Eksempel på webdels billeder i lag-og flise layout

Webdel af typen fremhævet indhold

16:9 er højde-bredde-forholdet for karrusel-, film-og kortlayout.

Her er et eksempel på et billede, der vises i layoutet for billedserie (øverst) og kortlayout (nederst).

Eksempler på billede af webdelen fremhævet indhold

Webdelen Billede

Billeder udvides til bredden af den sektion, der indeholder webdelen. Du har mulighed for at ændre højde-bredde-forholdet eller den frie beskæring ved hjælp af værktøjslinjen billede eller bruge størrelseshåndtagene til at skabe billedet større eller mindre.

Her er et eksempel, der viser billed skæremærker (blå linjer) ved 4:3

Billede, der viser skæremærker på 4:3

Webdelen Billedgalleri

Følgende højde-bredde-forhold bruges i forskellige layout:

  • Murstens layout respekterer højde-bredde-forholdet for alle billeder, der vises: 16:9, 1:1, 4:3 osv. 

  • Fliser, kort: 4:3

Her er et eksempel på et billede, der vises i layoutet fliser (øverst) og murstens layout (nederst)

Eksempel på flise-og murstens layout for webdelen Billedgalleri

Webdel til nyheder

Afhængigt af layoutet kan billeder i webdelen Nyheder være 4:3, 16:9 eller 21:9. Her er et eksempel på billeder i en øverste historie og et karrusel layout.

Billedeksempler for nyheds layout

Sidetitel område

Billeder ser bedst ud, når de er liggende eller 16:9 eller større i højde-bredde-forhold, og når de er mindst 1 MB i størrelse. Du skal også sørge for, at du angiver et indgangspunkt til Behold den vigtigste del af billedet i visningen, især når billedet bruges i miniaturer, nyheds layout og søgeresultater.

Eksempel (oprindeligt billede 16:9) med et optisk punkt angivet på højttaler.

Eksempel på et 16:9-billede i sidens titelområde.

Sideminiaturebillede

Sideminiaturebilleder vises på steder som søgeresultater, Fremhævede indholds resultater, nyheds indlæg og meget mere. Som standard kommer miniaturen fra sidens titelområde eller fra webdelen, der er i den første rækkefølge på siden (f. eks øverst til venstre i et sidelayout). Du kan tilsidesætte standardindstillingen og ændre sideminiaturen. Når du gør det, er det bedst at bruge et billede med et 16:9-højde-bredde-forhold.

Eksempel (oprindeligt billede 16:9)

Eksempel på sideminiaturebillede i fremhævet indhold-webdel

Webdel til hurtige links 

Webdelen hurtige links har seks forskellige layout. Her er anbefalede højde-bredde-forhold:

  • Billedserie, gitter, knap: 16:9

  • Komprimer, liste, felter: 1:1, 4:3

Her er et eksempel på et billede, der er vist i et kompakt layout (øverst) og et billedserie layout (nederst)

Eksempler på billeder i layoutet hurtige links

Tip!: 

  • Når du føjer et billede til et Sidetitel område eller en webdele, er det også bedst at angive det sted, hvor du vil have vist det i det område af billedet, du vil have vist. Du kan få mere at vide om, hvordan du angiver et indgangspunkt for disse to scenarier, under ændre et billedes indgangs punkt i webdelen helt og tilpasse titelområdet på en side.

  • Knudepunkt

Bemærk!:  Denne side er oversat ved hjælp af automatisering og kan indeholde grammatiske fejl og unøjagtigheder. Det er vores hensigt, at dette indhold skal være nyttigt for dig. Var disse oplysninger nyttige? Her er artiklen på engelsk, så du kan sammenligne.

Har du brug for mere hjælp?

Udvid dine Office-færdigheder
Gå på opdagelse i kurser
Få nye funktioner først
Bliv Office Insider

Var disse oplysninger nyttige?

Tak for din feedback!

Tak for din feedback! Det lyder, som om det vil kunne hjælpe, hvis du bliver sat i forbindelse med en af vores Office-supportteknikere.

×