Bildändring och skalning i moderna SharePoint-sidor

Moderna sidor och webbdelar är utformade för att svara helt på alla enheter, vilket innebär att bilder som används i webbdelar skalas olika beroende på var de visas, vilken layout som används och vilken enhet de visas på. Till exempel har moderna sidor utformats för att se bra ut på mobila enheter, och automatisk bildskalning skapar en snygg upplevelse.

Exempel på sidor på olika enheter

Vilka bildstorlekar fungerar bäst?

På grund av den responsiva siddesignen finns det inte någon viss höjd eller bredd i bildpunkter som säkerställer att en bild behåller en specifik form på alla enheter och layouter. Bilder storleksändras och beskärs automatiskt för att visa bästa möjliga resultat på olika enheter och layouter. Det finns dock vissa riktlinjer som kan hjälpa dig att se till att dina bilder ser bra ut på sidorna.

De här faktorerna avgör hur du hittar de bästa bildstorlekarna för sidan:

  • Proportioner:förhållandet mellan höjd och bredd på bilder

  • Kolumnlayout:typ och antal kolumner på sidan

  • Webbdelslayout:layouten du väljer för webbdelen där bilden används

Bredd-höjd-förhållande

Ett bredd–höjd-förhållande är förhållandet mellan bredd och höjd på bilder. Det uttrycks vanligtvis som två tal, t.ex. 3:2, 4:3 eller 16:9. Bredden är alltid det första talet. Som ett exempel kan förhållandet 16:9 vara 1 600 bildpunkter vid bredd och 900 bildpunkter i höjd. Eller så kan det vara 1920 x 1080, 1280 x 720 eller andra bredd-/höjdkombinationer som kan beräknas för att vara lika med 16:9. Du kan hitta kalkylatorer för proportioner online och i vissa fotoredigeringsverktyg för att avgöra proportionerna för bilderna. 

Exempel på bildförhållandet 16:9 och 4:3.

I de flesta fall fungerar bilder i moderna webbdelar bäst i layouter och enheter när de har ett bredd–höjd-förhållande på antingen 16:9 eller 4:3, beroende på layouten.

Kolumnlayouter

En sida kan anges med avsnitt som innehåller olika kolumntyper och layouter, till exempel helbreddskolumner, en kolumn, två kolumner, tre kolumner, en tredje vänstra och en tredje högra kolumnen. En allmän regel för bilder som förväntas fylla bredden på en kolumn är att de är minst lika breda som den kolumn de placeras i. En bild i en bildwebbdel i en kolumn ska till exempel vara minst 1 204 bildpunkter bred. Här följer riktlinjerna för bredd för varje kolumnlayout:

Layout

Bredd i bildpunkter

Kolumn med full bredd

1920

En kolumn

1204

Två kolumner

586 per kolumn

Tre kolumner

380 per kolumn

En tredje vänstra kolumn

380 för vänster kolumn; 792 för höger kolumn

En tredje högra kolumn

792 för vänster kolumn; 380 för höger kolumn

På grund av sidornas responsiva natur visas bilder i helbreddskolumner alltid med helbreddsbredd på skärmen med automatisk höjd baserat på skärmstorleken.

Höjden på bilder som placeras i andra kolumnlayouter beror på proportionerna. Här är riktlinjer för höjd/bredd för 16:9 och 4:3 proportioner (avrundade uppåt/nedåt till närmaste bildpunkt). Det här är användbart om du till exempel vill ha bilderna på en bredd och höjd som skalar på rätt sätt för mobila enheter.

PROPORTIONER

LAYOUT

16 x 9

Bredd x Höjd i bildpunkter

4 x 3

Bredd x Höjd i bildpunkter

En kolumn

1204 x 677

1204 x 903

Två kolumner

586 x 330

586 x 439

Tre kolumner

380 x 214

380 x 285

En tredje vänstra kolumn

380 x 446 för vänster kolumn; 792 x 446 för höger kolumn

380 x 594 för vänster kolumn; 792 x 594 för höger kolumn

En tredje högra kolumn

792 x 446 för den vänstra kolumnen; 380 x 446 för höger kolumn

792 x 594 för den vänstra kolumnen; 380 x 594 för höger kolumn

Webbdelslayouter

Layouterna i de webbdelar du använder påverkar också hur bilderna ska skalas. Följande exempel visar olika webbdelar och deras layouter i en kolumn, och de proportioner som används i var och en.

Tänk dig den här bilden som har det ursprungliga bredd–höjd-förhållandet 16:9:

Exempel på 16_9-bild

Följande är exempel på den här bilden som visas i en sidlayout med en kolumn, i olika webbdelar och layouter.

Webbdelen Hero

Följande proportioner för panel- och lagerlayouter är:

  • Paneler: webbdelens höjd skalas så att den följer bredd-höjd-förhållandet 8:3 och bilder inuti webbdelsskalan till ett bredd–höjd-förhållande på 4:3.

  • Lager: Ett enskilt lager skalas till ett bredd–höjd-förhållande på 8:3 och bilder i varje lager skala till ett bredd–höjd-förhållande nära 16:9.

  • På mobila enheter används en karuselllayout 16:9.

Här är ett exempel på en bild som visas i layouten Lager (överkant) och Paneler (nederkant)

Exempel på herowebbdelsbilder i layouterna Lager och paneler

Webbdelen Markerat innehåll

16:9 är bredd–höjd-förhållandet för Karusell-, Filmtrip- och Kort-layouter.

Här är ett exempel på en bild som visas i layouten Filmremsa (överst) och Kort (nederst).

Bildexempel för webbdelen Markerat innehåll

Bildwebbdel

Bilder utökas till bredden på avsnittet som innehåller webbdelen. Du kan ändra bredd-höjd-förhållandet eller frihands beskära med hjälp av verktygsfältet Bild, eller använda storlekshandtagen för att göra bilden större eller mindre.

Här är ett exempel som visar skärmärken för bilder (blå linjer) kl. 4:3

Bild som visar skärmärken vid 4:3

Webbdelen Bildgalleri

Följande proportioner används i olika layouter:

  • Bricklayouten respekterar bredd-höjd-förhållandet för alla bilder som visas: 16:9, 1:1, 4:3 och så vidare. 

  • Paneler, kort: 4:3

Här är ett exempel på en bild som visas i layouten Paneler (överkant) och Brickor (nederkant)

Exempel på layouter för paneler och brickor för webbdelen Bildgalleri

Webbdelen Nyheter

Beroende på layouten kan bilder i webbdelen Nyheter vara 4:3, 16:9 eller 21:9. Här är ett exempel på bilder i en berättelse och en karuselllayout.

Bildexempel för nyhetslayouter

Sidrubriksområde

Bilder ser bäst ut när de är liggande eller 16:9 eller större i proportionerna, och när de är minst 1 MB stora. Se också till att skapa en fokuspunkt för att se till att den viktigaste delen av bilden visas, särskilt när bilden används i miniatyrer, nyhetslayouter och sökresultat.

Exempel (originalbild 16:9) med fokuspunkt inställt på högtalaren.

Exempel på en bild med 16:9 i sidans rubrikområde.

Sidminiatyr

Sidminiatyrer visas på platser som sökresultat, markerade innehållsresultat, nyhetsinlägg med mera. Som standard kommer miniatyren från sidans rubrikområde eller från webbdelen i den första ordningen på sidan (t.ex. längst upp till vänster i en sidlayout). Du kan åsidosätta standardinställningen och ändra sidans miniatyrbild. När du gör det är det bäst att använda en bild med bildförhållandet 16:9.

Exempel (originalbild 16:9)

Exempel på sidminiatyrbild i webbdelen Markerat innehåll

Webbdelen Snabblänkar 

Webbdelen Snabblänkar har sex olika layouter. Här är rekommenderade proportioner:

  • Filmremsa, Rutnät, knapp: 16:9

  • Komprimera, lista, paneler: 1:1, 4:3

Här är ett exempel på en bild som visas i en komprimerad layout (överkant) och en Filmtrip-layout (nederkant)

Exempel på bilder i snabblänkarslayouter

Tips: 

  • När du lägger till en bild i ett sidrubrikområde eller en webbdel av en hero-sida är det också bäst att ställa in fokuspunkten i det område i bilden som du alltid vill visa. Mer information om hur du anger en fokuspunkt för dessa två scenarier finns i Ändra fokuspunkten för en bild i webbdelen Fokusbild och Anpassa rubrikområdet på en sida.

  • Fokuspunkt

Rekommendationer om bildrubriker för webbplatser

Förutom sidor kanske du vill lägga till anpassade logotyper eller bilder i en utökad layout. Här är storleksrekommendationer för dessa element.

Element

Beskrivning

Rekommendation

Bredd x Höjd i bildpunkter

Webbplatslogotyp

Större logotyp som kan vara icke-fyrkantig och transparent beroende på vilken design som laddats upp

192 x 64 

Format: PNG, JPEG, SVG (SVG tillåts inte på gruppanslutna webbplatser)

Miniatyrbild för webbplatslogotyp

En fyrkantslogotyp som används om ingen webbplatslogotyp laddas upp eller på platser där ett fyrkantsformat krävs

Det här elementet är obligatoriskt.

64 x 64 

Format: PNG, JPEG, SVG (SVG tillåts inte på gruppanslutna webbplatser)

Webbplatslogotyp för utökad layout

Den utökade sidhuvudlayouten har utökad webbplatslogotypsbredd.

300 x 64p

Format: JPEG, PNG, SVG

Bakgrundsbild för utökad layout

En ny bakgrundsbild som kan användas med det utökade sidhuvudet.

2 560 x 164

Format: JPEG, PNG

Behöver du mer hjälp?

Utöka dina kunskaper
Utforska utbildning
Få nya funktioner först
Anslut till Microsoft Insiders

Hade du nytta av den här informationen?

Hur nöjd är du med översättningskvaliteten?
Vad påverkade din upplevelse?

Tack för din feedback!

×