Bildeoptimalisering for klassiske SharePoint-publiseringsområder

Innlastingshastigheten for en nettside avhenger av den kombinerte størrelsen på alle komponentene som kreves for å gjengi siden, inkludert bilder, HTML, JavaScript og CSS. Bilder er en flott måte å gjøre nettstedet mer tiltalende på, men størrelsen kan påvirke ytelsen. Ved å optimalisere bildene med komprimering og endring av størrelse, og ved hjelp av sprites, kan du oppveie effekten av store bilder. Ved hjelp av SharePoint-bildegjengivelser kan du laste opp ett enkelt stort bilde og vise deler av bildet slik at det kan brukes på nytt i stedet for å lastes inn på nytt.

Obs!

Dette emnet gjelder for klassiske SharePoint-publiseringsområder, ikke moderne portalområder. Hvis du vil ha informasjon om bildeoptimalisering i moderne SharePoint-portalområder, kan du se Optimalisere bilder i moderne SharePoint-portalsider.

Bruke sprites til å øke hastigheten på bildeinnlasting

Et bilde sprite inneholder mange mindre bilder. Ved hjelp av CSS velger du en del av det sammensatte bildet som skal vises på en bestemt del av siden med absolutt plassering. I utgangspunktet flytter du et enkelt bilde rundt på siden i stedet for å laste inn flere bilder, og gjør en liten del av bildet synlig gjennom et lite vindu der den nødvendige delen av sprite-bildet vises for sluttbrukeren. SharePoint bruker sprites til å vise de ulike ikonene i sprite spcommon.png-filen.

Hva er dekket her:

• Bildekomprimering
• Bildeoptimalisering
• Bildegjengivelser for SharePoint

Dette kan øke ytelsen fordi du laster ned bare ett bilde i stedet for flere, og deretter bufrer og bruker bildet på nytt. Selv om bildet ikke forblir bufret, reduserer denne metoden det totale antallet HTTP-forespørsler til serveren ved å ha ett enkelt bilde i stedet for flere bilder, noe som reduserer innlastingstidene for siden. Dette er virkelig en form for bildebunting. Dette er en nyttig teknikk hvis bildene ikke endres ofte, for eksempel ikoner, som vist i SharePoint-eksemplet ovenfor. Du kan se hvordan du bruker Web Essentials, et tredjeparts fellesskapsbasert prosjekt med åpen kildekode for å oppnå dette enkelt i Microsoft Visual Studio. Hvis du vil ha mer informasjon, kan du se Minification og bunting i SharePoint.

Bruke bildekomprimering og optimalisering for å øke hastigheten på innlasting av sider

Bildekomprimering og optimalisering handler om å redusere filstørrelsen på bildene du bruker på nettstedet. Ofte er den beste teknikken for å redusere størrelsen på et bilde å endre størrelsen på bildet til maksimale dimensjoner som det vil bli vist på nettstedet. Det er ingen mening i å ha et bilde større enn det noensinne vil bli sett. Å sørge for at bildene har riktige dimensjoner ved hjelp av et bilderedigeringsprogram, er en rask og enkel måte å redusere størrelsen på siden på.

Når bildene har riktig størrelse, er neste trinn å optimalisere komprimeringen av disse bildene. Det finnes ulike verktøy som kan brukes til komprimering og optimalisering, inkludert Fotogalleri og tredjepartsverktøy. Nøkkelen til komprimering er å redusere filstørrelsen så mye som mulig uten å miste noen merkbar kvalitet for sluttbrukere. Kontroller at du tester de komprimerte filene på en HD-skjerm for å sikre at de fortsatt ser bra ut.

Øke hastigheten på nedlastinger av sider ved hjelp av Bildegjengivelser i SharePoint

Bildegjengivelser er en funksjon i SharePoint som gjør at du kan bruke forskjellige versjoner av bilder basert på forhåndsdefinerte bildedimensjoner. Dette er spesielt viktig når det er brukergenerert bildeinnhold eller bildedimensjonene, for eksempel bredde og høyde, er fastsatt av CSS på nettstedet. Selv om et bilde er løst av CSS, er bildet i full oppløsning fremdeles lastet inn. I dette tilfellet kan filstørrelsen reduseres ved hjelp av bildegjengivelser.

Obs!

Gjengivelser er bare tilgjengelige for SharePoint når publisering er aktivert. Du kan aktivere publisering under Innstillinger > for områdeinnstillinger > Behandle områdefunksjoner > For sharePoint Server-publisering. Alternativet vises ikke ellers.

Størrelsen på bildegjengivelsen fungerer ved å ta den minste dimensjonen du definerer, enten bredde eller høyde, og deretter endre størrelsen på bildet slik at den andre dimensjonen automatisk endrer størrelse basert på det låste størrelsesforholdet. Som standard vil bildet beskjæres fra midten av de gjenværende dimensjonene. Hvis du for eksempel definerer en gjengivelse på 100 px bred og 50 piksler høy og det opprinnelige bildet er 1000 piksler bredt og 800 piksler høyt, endres størrelsen slik at 800px-dimensjonen nå er 50px og 1000px-dimensjonen (nå 62,5 px) beskåret fra midten av bildet.

Trinnene er relativt enkle, men for at bilder skal kunne bruke gjengivelsene, må gjengivelsene være på SharePoint-nettstedet før du legger til bildene. I tillegg må du også ha sharePoint Server-publiseringsinfrastruktur (områdesamlingsnivå) og SharePoint Server-publiseringsfunksjoner (områdenivå) aktivert.

Legge til en bildegjengivelse for å øke hastigheten på innlasting av siden

1. Kontroller at brukerkontoen som utfører denne prosedyren, i det minste har utformingstillatelser til området på øverste nivå i områdesamlingen, og at området publiseres på en nettside.

2. Gå til nettstedet på øverste nivå i nettstedssamlingen for publisering i en nettleser.

3. Velg Innstillinger-ikonet .

4. På siden Innstillinger for nettsted ser du de innebygde bildegjengivelsene under Utseende og funksjonalitet.

   Du kan bruke gjengivelsene i boksen, eller velge Bildegjengivelser for å opprette en ny.

   

5. Velg Legg til nytt element på bildegjengivelser-siden.

   

6. Skriv inn et navn for gjengivelsen i Navn-boksen på siden Ny bildegjengivelse.

7. Skriv inn bredden og høyden i piksler på gjengivelsen i tekstboksene Bredde og Høyde , og velg deretter Lagre.

   

Egendefinert beskjæring med bildegjengivelser

Som standard genereres en bildegjengivelse fra midten av bildet. Du kan justere bildegjengivelsen for individuelle bilder ved å beskjære den delen av bildet du vil bruke. Du kan beskjære bildene enkeltvis, per gjengivelse. Hvis du beskjærer bildene, økes sidelastingen raskere ved hjelp av Blob-bufferen i SharePoint for å opprette en versjon av bildet for hver gjengivelse. På denne måten reduseres serverbelastningen fordi bildet bare endres én gang og deretter er klar til å betjene sluttbrukerne flere ganger. Hvis du vil ha mer informasjon om hvordan du beskjærer en bildegjengivelse, kan du se Beskjære en bildegjengivelse.