Moderne sider og webdele er designet til at være fuldt responsive 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 den enhed, de vises på. Moderne sider er f.eks. designet til at se godt ud på mobilenheder, og automatisk billedskalering hjælper med at skabe en attraktiv oplevelse.
Hvilke billedstørrelser fungerer bedst?
På grund af det dynamiske sidedesign er der ikke en bestemt højde eller bredde i pixel, der sikrer, at et billede bevarer en bestemt form på tværs af enheder og layouts. Billedernes størrelse tilpasses og beskæres automatisk for at vise det bedst mulige resultat på tværs af en række enheder og layouts. 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 til 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-breddeforhold 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 pixels 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 billedformatberegnere online og i nogle fotoredigeringsværktøjer, der kan hjælpe dig med at bestemme højde-bredde-forholdene for dine billeder.
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 arrangeres med sektioner, der omfatter forskellige kolonnetyper og -layout, f.eks. kolonner i fuld bredde, en kolonne, to kolonner, tre kolonner, en tredjedel venstre og en tredjedel 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 pixels bredt.
Følgende er bredderetningslinjerne 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 venstre kolonne | 380 for venstre kolonne; 792 for højre kolonne |
| En tredjedel højre kolonne | 792 for venstre kolonne; 380 for højre kolonne |
På grund af sidernes dynamiske karakter vises billeder i kolonner i fuld bredde altid i fuld bredde af skærmen med en automatisk højde baseret på skærmstørrelse.
Højden på billeder, der placeres i andre kolonnelayout, afhænger af dit højde-bredde-forhold. Her er retningslinjer for højde/bredde for højde-bredde-forhold 16:9 og 4:3 (rundet op/ned til nærmeste pixel). Dette er nyttigt for at bevare dine billeder i en bredde og højde, der skaleres passende til mobilenheder, f.eks.:
| 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 tredjedel venstre kolonne | 380 x 446 for venstre kolonne; 792 x 446 for højre søjle | 380 x 594 for venstre kolonne; 792 x 594 for højre søjle |
| En tredjedel højre kolonne | 792 x 446 for venstre kolonne; 380 x 446 for højre søjle | 792 x 594 for venstre kolonne; 380 x 594 for højre søjle |
Webdelslayout
Layoutene i de webdele, du bruger, påvirker også, hvordan billederne skaleres. Følgende eksempler viser forskellige webdele og nogle af de indstillinger og højde-bredde-forhold, du kan bruge.
| Webdel | Højde-bredde-forhold |
|---|---|
| Webdelen Hero | Følgende højde-bredde-forhold for layoutene Fliser og Lag er:
|
| Webdelen Fremhævet indhold | 16:9 er højde-bredde-forholdet for karrusel-, filmstrimmel- og gitterlayout. Her er et eksempel på højde-bredde-forholdet 16:9. Det første billede viser layoutet for billedstrimmel, og det andet viser gitterlayoutet: 
|
| 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. 
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 dit billede større eller mindre. 
|
| Webdelen Billedgalleri | Følgende højde-bredde-forhold kan bruges i forskellige layouts:
|
| 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 Top story og et karrusellayout: 
|
| Titelområ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 angive et fokuspunkt for at bevare den vigtigste del af billedet, især når billedet bruges i miniaturer, nyhedslayout og søgeresultater. Eksempel (originalt billede 16:9) med fokuspunktet indstillet på højttaleren: 
|
| Miniature af side | Sideminiaturer vises 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 første rækkefølge på siden (f.eks. øverst til venstre i et sidelayout). Du kan tilsidesætte standarden og ændre sideminiaturen. Når du gør dette, er det bedst at bruge et billede med højde-bredde-forhold på 16:9. Eksempel (oprindelig billede 16:9): 
|
| Webdelen Hurtige links | Webdelen Hurtige links har seks forskellige layout. Her er de forudindstillede højde-bredde-forhold:
|
Tip
Når du føjer et billede til en sidetitel eller webdelen Hero, er det også bedst at angive fokuspunktet i det område af billedet, du altid vil have vist. Du kan få mere at vide om at angive et fokuspunkt for disse to scenarier i Brug webdelen Hero og Opret og brug moderne sider på et SharePoint-websted.
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 uploadede design. | 192 x 64 Format: PNG, JPEG, SVG (SVG er ikke tilladt på gruppeforbundne websteder) |
| Miniature for webstedslogo | En kvadratisk logominiature, der bruges, hvis der ikke overføres et webstedslogo, eller på steder, hvor et kvadratisk format er påkrævet. Dette element er påkrævet. |
64 x 64 Format: PNG, JPEG, SVG (SVG er ikke tilladt på gruppeforbundne websteder) |
| Logo for websted med udvidet layout | Det udvidede sidehovedlayout har en udvidet logobredde. | 300 x 64 Format: JPEG, PNG, SVG |
| Baggrundsbillede for udvidet layout | Et nyt baggrundsbillede, der kan bruges sammen med det udvidede sidehoved. | 2560 x 164 Format: JPEG, PNG |