Billedoptimering for klassiske SharePoint-udgivelseswebsteder

Indlæsningshastigheden for en webside afhænger af den kombinerede størrelse af alle de komponenter, der kræves for at gengive siden, herunder billeder, HTML, JavaScript og CSS. Billeder er en fantastisk måde at gøre dit websted mere tiltalende på, men deres størrelse kan påvirke ydeevnen. Ved at optimere dine billeder med komprimering og tilpasning af størrelsen og ved hjælp af sprites kan du forskyde effekten af store billeder. Ved hjælp af SharePoint-billedgengivelser kan du uploade et enkelt stort billede og få vist sektioner af billedet, så det kan genbruges i stedet for genindlæses.

Bemærk!

Dette emne gælder for klassiske SharePoint-udgivelseswebsteder, ikke moderne portalwebsteder. Du kan finde oplysninger om billedoptimering på moderne SharePoint-portalwebsteder under Optimer billeder på moderne SharePoint-portalsider.

Brug af sprites til at fremskynde indlæsningen af billeder

En billedsprite indeholder mange mindre billeder. Ved hjælp af CSS vælger du en del af det sammensatte billede, der skal vises på en bestemt del af siden med absolut placering. Grundlæggende flytter du et enkelt billede rundt på siden i stedet for at indlæse flere billeder og gør en lille del af dette billede synligt gennem et lille vindue, hvor den påkrævede del af sprite-billedet vises for slutbrugeren. SharePoint bruger sprites til at vise de forskellige ikoner i filen sprite spcommon.png.

Hvad er beskrevet her:

• Billedkomprimering
• Billedoptimering
• SharePoint-billedgengivelser

Dette kan øge ydeevnen, fordi du kun downloader ét billede i stedet for flere og derefter cachelagrer og genbruger billedet. Selvom billedet ikke forbliver cachelagret ved at have et enkelt billede i stedet for flere billeder, reducerer denne metode det samlede antal HTTP-anmodninger til serveren, hvilket reducerer indlæsningstiden for siden. Dette er virkelig en form for billed bundling. Dette er en nyttig teknik, hvis billederne ikke ændres ofte, f.eks. ikoner, som vist i SharePoint-eksemplet ovenfor. Du kan se, hvordan du bruger Web Essentials, der er et communitybaseret projekt med åben kildekode, til nemt at opnå dette i Microsoft Visual Studio. Du kan finde flere oplysninger under Minification and bundling in SharePoint (Minification and bundling in SharePoint).

Brug af billedkomprimering og -optimering til at fremskynde sideindlæsning

Billedkomprimering og -optimering handler om at reducere filstørrelsen på de billeder, du bruger på dit websted. Den bedste teknik til at reducere størrelsen på et billede er ofte at tilpasse størrelsen på billedet til de maksimale dimensioner, som det kan ses på webstedet. Der er ingen mening i at have et billede større end det nogensinde vil blive vist. At sikre, at billeder har de korrekte dimensioner ved hjælp af en billededitor, er en hurtig og nem måde at reducere størrelsen på din side på.

Når billederne har den rigtige størrelse, er det næste trin at optimere komprimeringen af disse billeder. Der findes forskellige værktøjer til komprimering og optimering, herunder Photo Gallery og tredjepartsværktøjer. Nøglen til komprimering er at reducere filstørrelsen så meget som muligt uden at miste nogen mærkbar kvalitet for slutbrugerne. Sørg for at teste dine komprimerede filer på en high-definition-skærm for at sikre, at de stadig ser godt ud.

Gør downloads af sider hurtigere ved hjælp af SharePoint-billedgengivelser

Billedgengivelser er en funktion i SharePoint, der giver dig mulighed for at levere forskellige versioner af billeder, der er baseret på foruddefinerede billeddimensioner. Dette er især vigtigt, når der er brugergenereret billedindhold, eller billeddimensionerne, f.eks. bredde og højde, er fastsat af CSS på webstedet. Selvom et billede er fastgjort af CSS, indlæses billedet i fuld opløsning stadig. I dette tilfælde kan filstørrelsen reduceres ved hjælp af billedgengivelser.

Bemærk!

Gengivelser er kun tilgængelige for SharePoint, når publicering er aktiveret. Du kan aktivere publicering under Indstillinger > Indstillinger Indstillinger for > websted Administrer webstedsfunktioner > SharePoint Server-udgivelse. Ellers vises indstillingen ikke.

Tilpasningen af størrelsen på billedgengivelsen fungerer ved at tage den mindste dimension, du definerer, enten bredde eller højde, og derefter tilpasse størrelsen på billedet, så den anden dimension automatisk tilpasses på baggrund af det låste højde-bredde-forhold. Som standard beskæres billedet fra midten af de resterende dimensioner. Hvis du f.eks. definerer en gengivelse på 100px bred og 50px høj, og dit oprindelige billede er 1000 pixel bredt og 800 pixel højt, tilpasses størrelsen, så dimensionen 800px nu er 50px, og dimensionen 1000px (nu 62,5px) beskæres fra midten af billedet.

Trinnene er relativt enkle, men hvis billeder skal bruge gengivelserne, skal gengivelserne være på SharePoint-webstedet, før du tilføjer billederne. Derudover skal du også have funktionerne SharePoint Server Publishing Infrastructure (niveau for gruppe af websteder) og SharePoint Server Publishing (webstedsniveau) aktiveret.

Tilføj en billedgengivelse for at fremskynde sideindlæsningen

1. Kontrollér, at den brugerkonto, der udfører denne procedure, som minimum har designtilladelser til webstedet på øverste niveau for gruppen af websteder, og at webstedet publiceres på en webside.

2. Gå til webstedet på øverste niveau i gruppen af udgivelseswebsteder i en webbrowser.

3. Vælg ikonet Indstillinger .

4. På siden Indstillinger for websted i afsnittet Udseende og funktionalitet kan du se de indbyggede billedgengivelser.

   Du kan bruge de køreklare gengivelser eller vælge Billedgengivelser for at oprette en ny.

   

5. Vælg Tilføj nyt element på siden Billedgengivelser.

   

6. Angiv et navn til gengivelsen i feltet Navn på siden Ny billedgengivelse.

7. I tekstfelterne Bredde og Højde skal du angive bredden og højden i pixel for gengivelsen og derefter vælge Gem.

   

Brugerdefineret beskæring med billedgengivelser

Der genereres som standard en billedgengivelse fra midten af billedet. Du kan justere billedgengivelsen for individuelle billeder ved at beskære den del af billedet, du vil bruge. Du kan beskære billederne individuelt pr. gengivelse. Hvis du beskærer billederne, fremskyndes sideindlæsningen ved hjælp af SharePoints blobcache for at oprette en version af billedet for hver gengivelse. På denne måde reduceres serverbelastningen, fordi billedet kun tilpasses én gang og derefter er klar til at betjene slutbrugerne flere gange. Du kan få flere oplysninger om, hvordan du beskærer en billedgengivelse, under Beskær en billedgengivelse.