Bildoptimering för SharePoint Online

En webbsidas inläsningshastighet beror på den kombinerade storleken av alla komponenter som behövs för att återge sidan, bland annat bilder, HTML, JavaScript och CSS. Bilder är ett bra sätt att göra webbplatsen mer tilltalande men bildernas storlek kan påverka prestandan. Genom att optimera bilderna med komprimering och ändrad storlek, och genom att använda sprites kan du förskjuta effekterna av mycket stora bilder. Med hjälp av SharePoint-bildåtergivningar kan du ladda upp en stor bild och visa delar av bilden så att den kan återanvändas i stället för att laddas in igen.

Använda sprites för snabbare bildinläsning i SharePoint Online

En bildsprite består av flera mindre bilder. Med CSS markerar du en del av den sammansatta bilden som ska visas på en viss plats på sidan med absolut placering. Istället för att läsa in flera bilder flyttar du bara runt en enda bild på sidan och gör en liten del av bilden synlig genom ett litet fönster där den nödvändiga delen av spritebilden visas för slutanvändaren. SharePoint Online använder sprites till att visa dess olika ikoner i spritefilen spcommon.png.

Det här tas upp

  • Bildkomprimering

  • Bildoptimering

  • SharePoint-bildåtergivningar

Skärmbild av spcommon

Det kan ge ökade prestanda i och med att du bara behöver ladda ned en bild istället för flera och sedan cachelagrar och återanvänder du den bilden. Med den här metoden cachelagras inte bilden, men genom att använda en enda bild istället för flera minskas det totala antalet HTTP-begäranden till servern vilket kortar ned inläsningstiderna för sidor. Det här är en form av bildsammanslagning. Det är en användbar teknik för bilder som inte byts ut ofta, till exempel ikoner, vilket du kan se i SharePoint-exemplet ovan. Det här gör du enkelt i Microsoft Visual Studio genom att använda Web Essentials, ett communitybaserat projekt från tredje part med öppen källkod. Mer information finns i Förminskning och sammanslagning i SharePoint Online.

Använda bildkomprimering och -optimering till att snabba på inläsningen av sidor i SharePoint

Bildkomprimering och -optimering handlar om att minska filstorleken för bilder som du använder på webbplatsen. Det bästa sättet att minska storleken på en bild är ofta att ändra storlek på bilden till det största måttet som den kommer att visas med på webbplatsen. Det finns ingen mening med att ha en bild som är större än den storlek som den kommer att visas i. Att kontrollera att bilder har rätt mått med hjälp av en bildredigerare är ett snabbt och enkelt sätt att minska sidans storlek.

När bilderna har rätt storlek är nästa steg att optimera komprimeringen av bilderna. Det finns olika verktyg som kan användas för komprimering och optimering, bland annat Fotogalleriet och verktyg från tredje part. Nyckeln till komprimering är att minska filstorleken så mycket som möjligt utan att någon urskiljbar kvalitet går förlorad för slutanvändarna. Testa de komprimerade filerna på en HD-skärm för att säkerställa att de fortfarande ser bra ut.

Använda SharePoint-bildåtergivningar till att snabba på nedladdningen av sidor

Bildåtergivningar är en funktion i SharePoint Online som gör att du kan skapa olika versioner av bilder utifrån fördefinierade bildmått. Det här är särskilt viktigt när det finns bildinnehåll som användare genererat eller om bildmåtten, t.ex. bredd och höjd, korrigeras med CSS på webbplatsen. Även om en bild korrigeras med CSS är det ändå bilden med full upplösning som läses in. I det här fallet kan du minska filstorleken genom att använda bildåtergivningar.

Obs!: Återgivningar är endast tillgängliga för SharePoint när publicering är aktiverat. Du kan aktivera publicering under Inställningar > Webbplatsinställningar > Hantera webbplatsfunktioner > SharePoint Server-publicering. Annars visas inte alternativet.

Storleksändringen av bildåtergivningen fungerar genom att ta det minsta måttet som du definierar, antingen bredd eller höjd, och sedan ändra storlek på bilden så att storleken på det andra måttet ändras automatiskt baserat på det låsta förhållandet. Som standard beskärs bilden från mitten med återstående mått. Om du t.ex. definierar en återgivning som är 100 bildpunkter bred och 50 bildpunkter hög, och den ursprungliga bilden är 1 000 bildpunkter bred och 800 bildpunkter hög, ändras storleken så att måttet på 800 bildpunkter nu blir 50 bildpunkter och måttet på 1 000 bildpunkter (nu 62,5 bildpunkter) beskärs från mitten av bilden.

Stegen är relativt enkla, men om återgivningar ska användas för bilder måste återgivningarna finnas på SharePoint-webbplatsen innan du lägger till bilderna. Dessutom måste funktionerna Infrastruktur för SharePoint Server-publicering (webbplatssamlingsnivå) och SharePoint Server-publicering (webbplatsnivå) vara aktiverade.

Snabba på sidinläsningen genom att lägga till en bildåtergivning

  1. Kontrollera att användarkontot som utför den här proceduren har åtminstone designbehörighet till webbplatsen på översta nivån i webbplatssamlingen, och att webbplatsen publiceras på en webbsida.

  2. I en webbläsare går du till webbplatsen på högsta nivån i publiceringswebbplatssamlingen.

  3. Välj ikonen för Inställningar.

  4. I avsnittet Utseende på sidan Webbplatsinställningar visas de inbyggda bildåtergivningarna.

    Du kan använda de förinställda återgivningarna eller välja Bildåtergivningar om du vill skapa en ny.

    Skärmbild av bildåtergivning
  5. På sidan Bildåtergivningar väljer du Lägg till nytt objekt.

    Skärmbild av Lägg till nytt objekt
  6. I rutan Namn på sidan Ny bildåtergivning anger du ett namn för återgivningen.

  7. I textrutorna Bredd och Höjd anger du återgivningens bredd och höjd i bildpunkter och väljer sedan Spara.

    Skärmbild av bildåtergivningen Namn

Anpassad beskärning med bildåtergivningar i SharePoint

Som standard genereras en bildåtergivning från mitten av bilden. Du kan justera bildåtergivningen för enskilda bilder genom att beskära den del av bilden du vill använda. Du kan beskära bilderna separat, per återgivning. När du beskär bilder blir sidinläsningen snabbare genom att SharePoints bloggcache används för att skapa en version av bilden för varje återgivning. På så sätt minskas serverbelastningen eftersom bildens storlek bara ändras en gång och sedan är klar att användas av användare flera gånger. Mer information om hur du beskär en bildåtergivning finns i Beskära en bildåtergivning.

Utöka dina 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.

×