Kuvien optimointi SharePointin perinteisissä julkaisusivustoissa

Verkkosivun latausnopeus riippuu sivun hahmontamiseen tarvittavien kaikkien osien, kuten kuvien, HTML:n, JavaScriptin ja CSS:n, yhdistetystä koosta. Kuvat ovat erinomainen tapa tehdä sivustostasi houkuttelevampi, mutta niiden koko voi vaikuttaa suorituskykyyn. Optimoimalla kuvat pakkaamalla ja muuttamalla kokoa ja käyttämällä spritejä voit korvata suurten kuvien vaikutukset. SharePoint-kuvakäännöksien avulla voit ladata yhden suuren kuvan ja näyttää kuvan osat, jolloin sitä voidaan käyttää uudelleen lataamisen sijaan.

Huomautus

Tämä ohjeaihe koskee SharePointin perinteisiä julkaisusivustoja, ei moderneja portaalisivustoja. Lisätietoja kuvien optimoimisesta SharePointin moderneissa portaalisivustoissa on artikkelissa Kuvien optimointi SharePointin moderneilla portaalisivuilla.

Sprites-toiminnolla voit nopeuttaa kuvan lataamista

Sprite-kuva sisältää useita pienempiä kuvia. CSS:n avulla voit valita yhdistelmäkuvan osan näytettäväksi tietyssä sivun osassa absoluuttisella sijainnilla. Käytännössä siirrät yksittäisen kuvan sivun ympäri useiden kuvien lataamisen sijaan ja teet pienestä osasta kuvaa näkyvissä pienessä ikkunassa, jossa loppukäyttäjälle näytetään sprite-kuvan pakollinen osa. SharePoint näyttää sprite-kohteiden avulla eri kuvakkeet sprite-spcommon.png tiedostossa.

Tässä kuvatut tiedot:

• Kuvan pakkaus
• Kuvan optimointi
• SharePoint-kuvakäännökset

Tämä voi parantaa suorituskykyä, koska lataat vain yhden kuvan useiden sijasta ja tallennat sen sitten välimuistiin ja käytät kuvaa uudelleen. Vaikka kuvaa ei säilytetä välimuistissa, yksittäisen kuvan ottaminen useiden kuvien sijaan vähentää palvelimeen lähettävien HTTP-pyyntöjen kokonaismäärää, mikä lyhentää sivun latausaikoja. Tämä on todella kuvien niputtamisen muoto. Tämä on hyödyllinen tekniikka, jos kuvat eivät muutu usein, esimerkiksi kuvakkeet, kuten yllä olevassa SharePoint-esimerkissä. Näet, miten voit saavuttaa tämän helposti Microsoft Visual Studiossa käyttämällä web Essentials eli kolmannen osapuolen avoimen lähdekoodin yhteisöpohjaista projektia. Lisätietoja on artikkelissa Minification and bundling in SharePoint.

Kuvan pakkaamisen ja optimoinnin käyttäminen sivun lataamisen nopeuttamiseksi

Kuvien pakkaamisen ja optimoinnin avulla pienennetään sivustolla käyttämiesi kuvien tiedostokokoa. Usein paras tapa pienentää kuvan kokoa on muuttaa kuvan koko sivustossa tarkasteltavien enimmäisdimensioiden mukaiseksi. Ei ole mitään järkeä, että kuva on suurempi kuin mitä sitä koskaan tarkastellaan. Varmista, että kuvat ovat oikeat, käyttämällä kuvaeditoria on nopea ja helppo tapa pienentää sivun kokoa.

Kun kuvat ovat oikeassa koossa, seuraava vaihe on näiden kuvien pakkaamisen optimointi. Pakkaamiseen ja optimoinniin on käytettävissä useita työkaluja, kuten valokuvavalikoima ja kolmannen osapuolen työkalut. Pakkauksen avain on tiedoston koon pienentäminen mahdollisimman paljon menettämättä loppukäyttäjien havaittavaa laatua. Varmista, että testaat pakatut tiedostot teräväpiirtonäytöllä varmistaaksesi, että ne näyttävät edelleen hyvältä.

Sivun latausten nopeuttaminen SharePoint-kuvakäännöksillä

Kuvakäännökset ovat SharePointin ominaisuus, jonka avulla voit tarjota kuvien eri versioita esimääritettyjen kuvadimensioiden perusteella. Tämä on erityisen tärkeää, kun käytössä on käyttäjän luomaa kuvasisältöä tai kun sivuston CSS korjaa kuvan mitat, kuten leveyden ja korkeuden. Vaikka CSS olisi korjannut kuvan, koko resoluutiokuva ladataan edelleen. Tässä tapauksessa tiedoston kokoa voidaan pienentää kuvakäännöksillä.

Huomautus

Käännökset ovat käytettävissä SharePointissa vain, kun julkaiseminen on käytössä. Voit ottaa julkaisemisen käyttöön kohdassa Asetukset > Sivustoasetukset > Sivuston ominaisuuksien > hallinta SharePoint Server Publishing. Vaihtoehto ei näy muussa tapauksessa.

Kuvakäännöksen koon muuttaminen toimii ottamalla pienimmän määrittämäsi ulottuvuuden, joko leveyden tai korkeuden, ja muuttamalla sitten kuvan kokoa siten, että toisen ulottuvuuden kokoa muutetaan automaattisesti lukitun kuvasuhteen perusteella. Oletusarvoisesti se rajaa kuvan keskeltä jäljellä olevien mittojen mukaan. Jos esimerkiksi määrität 100 piksun levyisen ja 50 piksksun korkeuden käännöksen ja alkuperäinen kuva on 1000 pikseliä leveä ja 800 pikseliä korkea, sen koko muutetaan niin, että 800 piksksan dimensio on nyt 50px ja 1000px-mitta (nyt 62,5 pikseliä) rajataan kuvan keskeltä.

Vaiheet ovat melko yksinkertaisia, mutta jotta kuvat voivat käyttää käännöksiä, luovutusten on oltava SharePoint-sivustossa, ennen kuin lisäät kuvat. Lisäksi sharePoint Server -julkaisuinfrastruktuurin (sivustokokoelman taso) ja SharePoint Serverin julkaisutason (sivustotason) ominaisuudet on otettava käyttöön.

Lisää kuvakäännös sivun lataamisen nopeuttamiseksi

1. Varmista, että tätä toimintosarjaa suorittavalla käyttäjätilillä on vähintään rakenteen käyttöoikeudet sivustokokoelman ylimmän tason sivustoon ja että sivusto julkaistaan verkkosivulle.

2. Siirry selaimessa julkaisusivustokokoelman ylimmän tason sivustoon.

3. Valitse Asetukset-kuvake .

4. Näet Sivuston asetukset -sivun Ulkoasu-osassa valmiit kuvakäännökset.

   Voit luoda uuden ruudun käännöksissä tai valitsemalla Kuvakäännökset .

   

5. Valitse Kuvakäännökset-sivullaLisää uusi kohde.

   

6. Kirjoita Uusi kuvakäännös -sivun Nimi-ruutuun käännöksen nimi.

7. Kirjoita Leveys- ja Korkeus-tekstiruutuihin käännöksen leveys ja korkeus kuvapisteinä ja valitse sitten Tallenna.

   

Mukautettu rajaus ja kuvakäännökset

Kuvakäännös luodaan oletusarvoisesti kuvan keskeltä. Voit säätää yksittäisten kuvien kuvakäännöstä rajaamalla haluamasi kuvan osan. Voit rajata kuvat yksittäin käännöskohtaisesti. Kuvien rajaaminen nopeuttaa sivun lataamista SharePointin blob-välimuistin avulla, jotta kustakin käännöksestä luodaan versio. Näin palvelimen kuormitusta vähennetään, koska kuvan kokoa muutetaan vain kerran ja se on sen jälkeen valmis palvelemaan loppukäyttäjiä useita kertoja. Lisätietoja kuvakäännöksen rajaamisesta on kohdassa Kuvakäännöksen rajaaminen.