Billedskalering og skalering på moderne sider i SharePoint

Moderne sider og webdele er designet til at være fuldt effektive på tværs af enheder, hvilket betyder, at de billeder, der bruges i webdele, skaleres forskelligt, afhængigt af hvor de vises, hvilket layout der bruges, og hvilken enhed de vises på. Moderne sider er f.eks. designet til at se godt ud på mobilenheder, og automatisk skalering af billeder er med til at skabe denne flotte oplevelse.

Eksempler på sider på tværs af enheder

Hvilke billedstørrelser fungerer bedst?

På grund af det hurtige sidedesign er der ikke en bestemt højde eller bredde i pixel, der sikrer, at et billede bevarer 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 række enheder og layout. Der er dog nogle retningslinjer, der kan hjælpe dig med at sikre, at dine billeder ser godt ud på dine sider.

Det afhænger af disse faktorer, om du finder de bedste billedstørrelser for din side:

  • Højde-bredde-forhold:relationen mellem højde og bredde af billeder

  • Kolonnelayout:typen og antallet af kolonner på siden

  • Layout for webdel:det layout, du vælger for den webdel, hvor billedet bruges

Højde-bredde-forhold

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

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

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 layouts med sektioner, der indeholder forskellige kolonnetyper og layout, f.eks. kolonner i fuld bredde, én kolonne, to kolonner, tre kolonner, en tredje venstre og en tredje højre kolonner. En generel regel for billeder, der forventes at udfylde bredden af en kolonne, er, at de er mindst lige så brede som den kolonne, de er placeret i. Eksempelvis skal et billede i webdelen Billede i én kolonne være mindst 1204 pixel bred. Følgende er retningslinjerne for bredde for hvert af kolonnelayoutene:

Layout

Bredde i pixel

Kolonne i fuld bredde

1920

Én kolonne

1204

To kolonner

586 pr. kolonne

Tre kolonner

380 pr. kolonne

En tredje kolonne til venstre

380 til venstre kolonne. 792 til højre kolonne

En tredje højre kolonne

792 for venstre kolonne; 380 til højre kolonne

På grund af sidernes hurtige karakter vises billeder i kolonner i fuld bredde altid i fuld bredde på skærmen med en automatisk højde baseret på skærmstørrelsen.

Højden på billeder, der er placeret i andre kolonnelayout, afhænger af højde-bredde-forholdet. Her er retningslinjer for højde/bredde for 16:9- og 4:3-højde-bredde-forhold (rundet op/ned til nærmeste pixel). Dette er nyttigt for at holde dine billeder i en bredde og en højde, der skaleres korrekt til f.eks. mobilenheder.

HØJDE-BREDDE-FORHOLD

LAYOUT

16 x 9

Bredde x højde i pixel

4 x 3

Bredde x højde i pixel

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

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

380 x 594 for venstre kolonne. 792 x 594 til højre kolonne

En tredje højre kolonne

792 x 446 for venstre kolonne. 380 x 446 til højre kolonne

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

Layout for webdel

Layoutene i de webdele, du bruger, påvirker også, hvordan dine billeder skaleres. Følgende eksempler viser forskellige webdele og deres layout inden for én kolonne og 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

Følgende er eksempler på dette billede, der vises i et sidelayout med én kolonne, i forskellige webdele og layout.

Hero-webdel

Følgende højde-bredde-forhold for layoutene Fliser og Lag er:

  • Felter: Højden på webdelen skaleres til at følge et højde-bredde-forhold på 8:3, og billeder inde i webdelens skalering til et højde-bredde-forhold på 4:3.

  • Lag: Et individuelt lag skalerer til et højde-bredde-forhold på 8:3 og billeder i hver lagskala til et højde-breddeforhold nær 16:9.

  • På mobilenheder bruges et karrusellayout kl. 16:9.

Her er et eksempel på et billede, der vises i layoutet Lag (øverst) og fliselayoutet (bund)

Eksempel på hero-webdelsbilleder i layoutet Lag og Felter

Fremhævet webdel til indhold

16:9 er højde-bredde-forholdet for layoutene Karrusel, Filmstrip og Kort.

Her er et eksempel på et billede, der vises i layoutet Filmklip (øverst) og kortlayoutet (nederst).

Fremhævede eksempler på billede af webdelen Indhold

Webdelen Billede

Billederne udvides til bredden af den sektion, der indeholder webdelen. Du har mulighed for at ændre højde-bredde-forholdet eller beskære frihånd ved hjælp af værktøjslinjen Billede eller bruge størrelseshåndtagene til at gøre billedet større eller mindre.

Her er et eksempel, der viser billedafskæringsmærker (blå linjer) kl. 4:3

Billede, der viser skæremærker kl. 4:3

Webdelen Billedgalleri

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

  • Layoutet Teglsten respekterer højde-bredde-forholdet for alle viste billeder: 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 Teglsten (bund)

Eksempel på fliser og tegllayout for webdelen Billedgalleri

Webdelen Nyheder -

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

Eksempler på billede af nyhedslayout

Området Sidetitel

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. Sørg også for at angive et fokuspunkt for at bevare den vigtigste del af billedet i visningen, især når billedet bruges i miniaturer, nyhedslayout og søgeresultater.

Eksempel (oprindeligt billede 16:9) med fokuspunkt indstillet på højttaleren.

Eksempel på et 16:9-billede i sidetitelområdet.

Sideminiaturebillede

Sideminiaturer vises på steder som søgeresultater, fremhævede indholdsresultater, nyhedsindlæg og meget mere. Som standard kommer miniaturen fra sidetitelområdet 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 dette, er det bedst at bruge et billede med et højde-bredde-forhold på 16:9.

Eksempel (oprindeligt billede 16:9)

Eksempel på sideminiaturebillede i webdelen Fremhævet indhold

Webdelen Hurtige links 

Webdelen Hurtige links har seks forskellige layout. Her anbefales højde-bredde-forhold:

  • Filmklip, Gitter, knap: 16:9

  • Komprimer, Liste, Felter: 1:1, 4:3

Her er et eksempel på et billede, der vises i et kompakt layout (øverst) og et filmklip-layout (bund)

Eksempler på billeder i layoutet Hurtige links

Tip!: 

  • Når du føjer et billede til et sidetitelområde eller en hero-webdel, er det også bedst at angive fokuspunktet i det område af billedet, som du altid vil have vist. Hvis du vil vide mere om at angive et fokuspunkt for disse to scenarier, skal du se Ændre fokuspunktet for et billede i webdelen Hero og tilpasse titelområdet på en side.

  • Fokuspunkt

Anbefalinger til webstedsoverskrifter

Ud over sider kan det være en ide at tilføje brugerdefinerede logoer eller billeder i et udvidet layout. Her er anbefalinger til størrelsen af disse elementer.

Element

Beskrivelse

Anbefaling

Bredde x højde i pixel

Webstedslogo

Større logo, der kan være ikke-firkantet og gennemsigtigt, afhængigt af det uploadede design

192 x 64 

Format: PNG, JPEG, SVG (SVG er ikke tilladt på gruppeforbundne websteder)

Miniaturebillede af webstedslogo

En firkantet logominiature, der bruges, hvis der ikke overføres et webstedslogo eller på steder, hvor der kræves et kvadratisk format

Dette element er påkrævet.

64 x 64 

Format: PNG, JPEG, SVG (SVG er ikke tilladt på gruppeforbundne websteder)

Logo for udvidet layoutwebsted

Det udvidede sidehovedlayout har en udvidet logobredde på webstedet.

300 x 64 p

Format: JPEG, PNG, SVG

Baggrundsbillede med udvidet layout

Et nyt baggrundsbillede, der kan bruges med den udvidede sidehoved.

2560 x 164

Format: JPEG, PNG

Har du brug for mere hjælp?

Udvid dine færdigheder
Gå på opdagelse i kurser
Få nye funktioner først
Deltag i Microsoft insiders

Var disse oplysninger nyttige?

Hvor tilfreds er du med kvaliteten af oversættelsen?
Hvad påvirkede din oplevelse?

Tak for din feedback!

×