Bild storlek och skalning i moderna SharePoint-sidor

Bild storlek och skalning i moderna SharePoint-sidor

Obs!: Vi vill kunna erbjuda dig bästa möjliga supportinnehåll så fort som möjligt och på ditt språk. Den här sidan har översatts med hjälp av automatiserad översättning och kan innehålla grammatiska fel eller andra felaktigheter. Vår avsikt är att den här informationen ska vara användbar för dig. Vill du berätta för oss om informationen är till hjälp längst ned på sidan? Här är artikeln på engelska som referens.

Moderna sidor och webb delar är avsedda att besvaras fullt ut på olika enheter, vilket innebär att bilder som används i webb delar skalas olika beroende på var de visas, vilken layout som används och vilken enhet som visas. Moderna sidor är till exempel anpassade för att se bra ut på mobila enheter och automatisk bild skalning gör det lätt att skapa den snygga upplevelsen.

Exempel på sidor på flera enheter

Vilka bild storlekar fungerar bäst?

På grund av sidans svars design finns det inte en viss höjd eller bredd i bild punkter som säkerställer att en bild behåller en speciell form på olika enheter och layouter. Bilder ändrar storlek och beskärs automatiskt för att visa bästa möjliga resultat för olika enheter och layouter. Men det finns några rikt linjer som hjälper dig att se till att bilderna ser bra ut på dina sidor.

Hur du hittar de bästa bild storlekarna för sidan beror på dessa faktorer:

  • Höjd-breddförhållandet: förhållandet mellan höjd och bredd på bilder

  • Kolumnlayout: typen och antalet kolumner på sidan

  • Webb dels layout: den layout du väljer för den webbdel som bilden används för

Bredd-höjd-förhållande

Höjd-breddförhållandet är förhållandet mellan bildens bredd och höjd. Den uttrycks vanligt vis som två tal, till exempel 3:2, 4:3 eller 16:9. Bredden är alltid det första talet. Som ett exempel kan ett förhållande på 16:9 vara 1600 pixlar bredd per 900 bild punkter. Eller så kan det vara 1920 x 1080, 1280 x 720 eller andra kombinationer av bredd och höjd som kan beräknas till samma 16:9. Du kan hitta bild förhållande online och i vissa foto redigerings verktyg för att bestämma bildens proportioner. 

Exempel på 16:9-och 4:3-proportioner.

I de flesta fall fungerar bilder i moderna webb delar bäst mellan layouter och enheter när de har proportionerna antingen 16:9 eller 4:3, beroende på layouten.

Kolumnlayouter

En sida kan utformas med avsnitt som innehåller olika kolumn typer och layouter, till exempel spalter, en kolumn, två kolumner, tre kolumner, en tredjedel av vänster och en tredjedel av de högra kolumnerna. En allmän regel för bilder som förväntas fylla ut bredden på en kolumn är att de är åtminstone lika breda som de olika kolumnerna. En bild i en webbdel för en bild i en kolumn bör vara minst 1204 bild punkter bred. Här följer rikt linjerna för varje kolumnlayout:

Layout

Bredd i bild punkter

Hel bredds kolumn

1920

En kolumn

1204

Två kolumner

586 per kolumn

Tre kolumner

380 per kolumn

En tredjedels vänstra kolumn

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

En tredjedels högra kolumn

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

På grund av sidornas svars tider visas bilder i kolumnerna i full bredd i hel skärms läge med en automatisk höjd baserad på skärm storleken.

Höjden på bilder som placeras i andra kolumnlayouter beror på ditt höjd-breddförhållande. Här följer rikt linjer för höjd och bredd för 16:9-och 4:3-proportionerna (avrundade uppåt/nedåt till närmaste pixlar). Det här är praktiskt om du vill att bilderna ska ha en bredd och höjd som kan anpassas efter mobila enheter.

HÖJD-BREDDFÖRHÅLLANDET

16 x 9

4 x 3

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 tredjedels 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 tredjedels högra kolumn

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

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

Webb dels layouter

Layouterna i de webb delar du använder påverkar också hur bilderna skal för änd ras. I följande exempel visas olika webb delar och deras layouter i en kolumn och proportionerna som används i var och en av dem.

Titta på den här bilden med ett ursprungligt proportioner på 16:9:

Exempel på 16_9-bild

Följande är exempel på den här bilden som visas i en layout för en kolumnlayout, i olika webb delar och layouter.

Webb delen hjälte

Följande proportioner för plattor och lager layouter är:

  • Brickor: webb delens höjd skal för änd ras så att den följer proportionerna 8:3 och bilder i webb delen skalas till ett bild förhållande på 4:3.

  • Lager: en individuell nivå skalas till ett höjd-breddförhållandet 8:3 och bilder i varje lager skalas till ett höjd-breddförhållande nära 16:9.

  • På mobila enheter används en karusell-layout på 16:9.

Här är ett exempel på en bild som visas i layouten lager (överkant) och paneler (längst ned)

Exempel på webb delen hjälte i layouter för lager och paneler

Webb delen markerat innehåll

16:9 är höjd-breddförhållandet för layouterna karusell, film remsa och kort.

Här är ett exempel på en bild som visas i layouten film remsa (överst) och kort (längst ned).

Exempel på webb delen innehålls webbdel

Webb delen bild

Bilder utökas till bredden på avsnittet som innehåller webb delen. Du kan ändra bredd-och beskära-breddförhållandet genom att använda verktygsfältet bild.

Här är ett exempel som visar bild skär märken (blå linjer) på 4:3

Bild som visar skär märken på 4:3

Webb delen bild galleri

Följande proportioner används i olika layouter:

  • Med funktionen brickor ser du proportionerna för alla bilder som visas: 16:9, 1:1, 4:3 och så vidare. 

  • Brickor, kort: 4:3

Här är ett exempel på en bild som visas i layouten för paneler (överkant) och brickor (längst ned)

Exempel på layouter för paneler och brickor för webb delen bild galleri

Webb delen nyheter

Beroende på layouten kan bilder i webb delen nyheter vara 4:3, 16:9 eller 21:9. Här är ett exempel på bilder i en Top berättelse och en karusell-layout.

Bild av exempel på nyheter

Sid rubrik området

Bilder ser bäst ut när de är liggande eller 16:9 eller högre i proportioner och när de har minst 1 MB stor storlek. Se också till att ange en fokus punkt för att behålla den viktigaste delen av bilden, särskilt när bilden används i miniatyrer, nyhets formulär och Sök resultat.

Exempel (ursprunglig bild 16:9) med brännvidd.

Exempel på en 16:9-bild i sid rubrik området.

Sid miniatyr

Sid miniatyrer visas på platser som Sök resultat, markerade innehålls resultat, nyheter och nyhets inlägg. Miniatyr bilden kommer som standard från sid rubrik området eller från webb delen som befinner sig i den första ordningen på sidan (till exempel längst upp till vänster i en sidlayout). Du kan åsidosätta standardinställningen och ändra sid miniatyren. När du gör det är det bäst att använda en bild med ett 16:9-höjd-förhållande.

Exempel (ursprunglig bild 16:9)

Exempel på en miniatyr bild för en sida i webb delen markerat innehåll

Webb delen snabb länkar 

Webb delen snabb länkar har sex olika layouter. Här är de proportionerna som rekommenderas:

  • Film remsa, rutnät, knapp: 16:9

  • Kompakt, lista, brickor: 1:1, 4:3

Här är ett exempel på en bild som visas i en kompakt layout (överst) och en film remsa (längst ned)

Exempel på bilder i snabb länkar

Tips: 

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

Hade du nytta av den här informationen?

Tack för din feedback!

Tack för din feedback! Det låter som att det kan vara bra att koppla dig till en av våra Office-supportrepresentanter.

×