Billedstørrelse og -skalering på moderne sider i SharePoint

Moderne sider og webdele er designet til at være fuldt lydhøre på tværs af enheder, hvilket betyder, at 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 billedskalering er med til at skabe den 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 automatisk og beskæres 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.

At finde de bedste billedstørrelser for din side afhænger af disse faktorer:

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

  • Kolonnelayout: typen og antallet af kolonner på siden

  • Webdelslayout: det layout, du vælger til den webdel, som billedet bruges i

Højde-bredde-forhold

Et højde-bredde-forhold er forholdet 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. Et forhold på 16:9 kan f.eks. være 1600 pixel i bredden og 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 at svare til 16:9. Du kan finde højde-bredde-forholdsberegnere online og i nogle fotoredigeringsværktøjer, der kan hjælpe dig med at bestemme højde-bredde-forholdet 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 placeres med sektioner, der indeholder 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 på en kolonne, er, at de er mindst lige så brede som den kolonne, de er placeret i. Et billede i webdelen Billede i én kolonne skal f.eks. være mindst 1204 pixel bredt.

Følgende er retningslinjerne for bredden 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 tredjedel til venstre-kolonne

380 for 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 reaktionsevne vises billeder i kolonner i fuld bredde altid i fuld bredde på skærmen med en automatisk højde baseret på skærmstørrelse.

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

STØRRELSESFORHOLD

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

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

380 x 594 for venstre kolonne. 792 x 594 for 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

Webdelslayout

Layoutene i de webdele, du bruger, påvirker også, hvordan dine billeder skaleres. Følgende eksempler viser forskellige webdele og nogle af de indstillinger og højde-bredde-forhold, du kan bruge.

Webdelen Hero

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

  • Felter: Webdelens højde skaleres til at følge et højde-bredde-forhold på 8:3 og billeder inde i webdelens skala 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 inde i hver lagskala til et højde-bredde-forhold 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 Fliser (bund):

Eksempel på hero-webdelsbilleder i layoutene Lag og Felter

Fremhævet webdel til indhold

16:9 er højde-bredde-forholdet for karrusel-, filmserie- og gitterlayout.

Her er et eksempel på 16:9 højde-bredde-forhold. Det første billede viser layoutet Filmstrip, og det andet viser gitterlayoutet:

Webdelen Fremhævet indhold ved hjælp af layoutet Filmserie.

Layoutet Fremhævet indholdsgitter med udvidede billeder vist.

Webdelen Billede

Billederne udvides til bredden af den sektion, der indeholder webdelen. 

Her er et eksempel på et billede i webdelen Billede, der bruger højde-bredde-forholdet 16:9.

Et billede i webdelen Billede ved hjælp af karruselforholdet 16:9.

Du har også mulighed for at ændre højde-bredde-forholdet eller frihåndsbeskæring ved hjælp af billedredigeringsværktøjet eller bruge størrelseshåndtagene til at gøre billedet større eller mindre.

Et foto, der er åbent i SharePoint-redigeringsværktøjet.

Webdelen Billedgalleri

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

  • Layoutene Mursten og Karrusel respekterer højde-bredde-forholdet for alle billeder: 16:9, 1:1, 4:3 osv. 

  • Gitterlayoutet tillader tre højde-bredde-forhold: 1:1 firkantet, 16:9 bred og 4:3 standard.

Det første billede viser murstenslayoutet i webdelenBilledgalleri (med højde-bredde-forholdet 16:9 og 1:1). Det andet billede viser gitterlayoutet (ved hjælp af højde-bredde-forholdet 1:1).

Webdelen Billedgalleri ved hjælp af indstillingen Murstenslayout.

Webdelen Billedgalleri ved hjælp af indstillingen Gitterlayout.

Webdelen 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 historie og et karrusellayout:

Billedeksempler på nyhedslayout

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

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

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

Sideminiature

Sideminiaturer vises på steder som f.eks. søgeresultater, fremhævede indholdsresultater, nyhedsindlæg og meget mere. Miniaturen kommer som standard fra sidens titelområde eller fra webdelen, der er i første rækkefølge på siden (f.eks. øverst til venstre på 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 højde-bredde-forhold på 16:9.

Eksempel (originalt billede 16:9):

Eksempel på sideminiaturebillede i webdelen Fremhævet indhold

Webdelen Hurtige links

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

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

  • Filmstrip, gitter, knap: 16:9

Det første billede viser layoutet Kompakt i webdelenHurtige links. Det andet billede viser den samme webdel hurtige links ved hjælp af layoutet Filmstrip.

Webdelen Hurtige links, der viser miniaturebilleder for links.

Webdelen Hurtige links, der viser forholdet 16:9 for billeder.

Tip!: 

Anbefalinger til webstedsheaderbillede

Ud over sider kan det være en god ide at tilføje brugerdefinerede logoer eller billeder i et udvidet layout. Her er størrelsesanbefalinger til 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 overførte design.

192 x 64 

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

Miniature for webstedslogo

En firkantet logominiature, der bruges, hvis intet webstedslogo uploades, eller på steder, hvor der kræves et firkantet format.

Dette element er påkrævet.

64 x 64 

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

Webstedslogo med udvidet layout

Det udvidede sidehovedlayout har en udvidet bredde på webstedets logo.

300 x 64

Format: JPEG, PNG, SVG

Udvidet layoutbaggrundsbillede

Et nyt baggrundsbillede, der kan bruges sammen med det udvidede sidehoved.

2560 x 164

Format: JPEG, PNG

Har du brug for mere hjælp?

Vil du have flere indstillinger?

Udforsk abonnementsfordele, gennemse kurser, få mere at vide om, hvordan du sikrer din enhed og meget mere.

Communities hjælper dig med at stille og besvare spørgsmål, give feedback og høre fra eksperter med omfattende viden.