Kuvan optimointi SharePoint Onlinea varten

Verkkosivun latautumisnopeus määräytyy kaikkien sivun hahmontamisessa tarvittavien osien, kuten kuvien, HTML:n, JavaScriptin ja CSS:n, yhteiskoosta. Kuvat ovat kätevä tapa lisätä sivustosi kiinnostavuutta, mutta niiden koko voi vaikuttaa suorituskykyyn. Voit välttää hyvin suurten kuvien vaikutukset optimoimalla kuvat pakkaamisen ja koon muuttamisen avulla ja käyttämällä sprite-grafiikkaa. SharePoint-kuvakäännösten avulla voit ladata yhden suuren kuvan ja näyttää kuvasta osia niin, että voit käyttää sitä uudelleen sen sijaan, että lataisit sen uudelleen.

Kuvien lataamisen nopeuttaminen sprite-grafiikan avulla SharePoint Onlinessa

Sprite-grafiikkakuva sisältää useita pienempiä kuvia CSS:n avulla voit valita osan yhdistelmäkuvasta näytettäväksi sivun tietyssä osassa absoluuttisessa sijainnissa. Periaatteessa siirrät yhtä kuvaa sivulla sen sijaan, että lataisit useita kuvia, ja näytät käyttäjälle tarvittavan osan sprite-grafiikkakuvasta pienessä ikkunassa. SharePoint Online käyttää eri kuvakkeidensa näyttämisessä tiedostossa spcommon.png olevia sprite-grafiikkakuvia.

Tämän ohjeen sisältö

  • Kuvan pakkaaminen

  • Kuvan optimointi

  • SharePoint-kuvakäännökset

Näyttökuva: spcommon

Tämä voi parantaa suorituskykyä, koska lataat vain yhden kuvan ja käytät sitä sitten uudelleen välimuistista. Vaikka kuva ei jäisi välimuistiin, yhden kuvan käyttäminen useiden sijaan vähentää palvelimeen lähetettävien HTTP-kutsujen kokonaismäärää, mikä vähentää sivun lataamiskertoja. Tämä on todellisuudessa kuvien niputtamista. Tämä on hyödyllinen tekniikka, jos kuvat eivät muut kovin usein, kuten kuvakkeet yllä olevassa SharePoint-esimerkissä. Voit toteuttaa tämän helposti Microsoft Visual Studiossa käyttämällä Web Essentials -laajennusta, joka on kolmannen osapuolen avoimen lähdekoodin yhteisöprojekti. Lisätietoja on artikkelissa Minimointi ja niputtaminen SharePoint Onlinessa.

Kuvien pakkaamisen ja optimoinnin käyttäminen sivun lataamisen nopeuttamiseen SharePointissa

Kuvan pakkaamisella ja optimoinnilla pienennetään sivulla käyttämiesi tiedostojen kokoa. Usein paras tekniikka kuvan pienentämiseen on sen koon muuttaminen enimmäiskooksi, jolla se näytetään sivustossa. Kuvan kokoa ei kannata pitää suurempana kuin sen näyttämisessä enintään käytetään. Kuvien oikeiden mittasuhteiden varmistaminen kuvaeditorissa on nopea ja helppo tapa pienentää sivun kokoa.

Kun kuvat ovat oikean kokoisia, seuraava vaihe on kyseisten kuvien pakkaaminen. Pakkaamisessa ja optimoinnissa on käytettävissä erilaisia työkaluja, kuten Valokuvavalikoima ja kolmannen osapuolen työkalut. Avain pakkaamiseen on pienentää tiedostokokoa mahdollisimman paljon niin, ettei käyttäjä silti huomaa laadun huononemista. Varmista kuvien hyvä ulkoasu testaamalla pakatut tiedostot tarkassa näytössä.

Sivun lataamisen nopeuttaminen SharePoint-kuvakäännösten avulla

Kuvakäännökset ovat SharePoint Onlinen ominaisuus, jonka avulla voit käyttää kuvien eri versioita esimääritettyjen kuvan mittasuhteiden perusteella. Tämä on erityisen tärkeää, jos sivulla on käyttäjän luomaa kuvasisältöä tai kuvan mittasuhteet, kuten leveys ja korkeus, määräytyvät sivuston CSS:n mukaan. Vaikka CSS määräisi kuvan mittasuhteet, täyden tarkkuuden kuva ladataan silti. Tällöin tiedostokokoa voidaan pienentää kuvakäännösten avulla.

Huomautus: Kuvakäännökset ovat käytettävissä SharePointissa vain, kun julkaiseminen on käytössä. Voit ottaa julkaisemisen käyttöön valitsemalla Asetukset > Sivuston asetukset > Sivuston ominaisuuksien hallinta >SharePoint Server -julkaiseminen. Vaihtoehto ei muutoin ole näkyvissä.

Kuvakäännöksen koon muuttaminen toimii niin, että kuvan kokoa muutetaan pienemmän määrittämäsi mitan, joko leveyden tai korkeuden, avulla niin, että toista mittaa muutetaan lukitun kuvasuhteen mukaan automaattisesti. Oletusarvon mukaan toiminto rajaa kuvaa keskeltä alkaen jäljellä olevien mittojen mukaan. Jos esimerkiksi määrität käännöksen, jonka leveys on 100 kuvapistettä ja korkeus 50 kuvapistettä, ja alkuperäisen kuvan leveys on 1 000 kuvapistettä ja korkeus 800 kuvapistettä, kuvan kokoa muutetaan niin, että mitasta 800 kuvapistettä tulee mitta 50 kuvapistettä ja mitta 1 000 kuvapistettä (muunnettuna mitaksi 62,5 kuvapistettä) rajataan kuvan keskeltä alkaen.

Menettely on melko yksinkertainen, mutta jotta kuvat voivat käyttää käännöksiä, käännösten on oltava SharePoint-sivustossa ennen kuvien lisäämistä. Lisäksi SharePoint Server -julkaisuinfrastruktuurin (sivustokokoelmatason ) ja SharePoint Server -julkaisemisen (sivustotason) on oltava käytössä.

Sivun lataamisen nopeuttaminen kuvakäännöksen lisäämisellä

  1. Varmista, että tämän toimenpiteen suorittavalla käyttäjätilillä on vähintään suunnitteluoikeudet sivustokokoelman pääsivustoon ja että sivusto julkaistaan verkkosivulle.

  2. Siirry selaimessa julkaisusivustokokoelman pääsivustoon.

  3. Valitse Asetukset-kuvake.

  4. Sisäiset kuvakäännökset näkyvät Sivuston asetukset -sivun Ulkoasu-osassa.

    Voit käyttää valmiita käännöksiä tai luoda uuden valitsemalla Kuvakäännökset.

    Näyttökuva: kuvakäännös
  5. Valitse Kuvakäännökset-sivulla Lisää uusi kohde.

    Näyttökuva uuden kohteen lisäämisestä
  6. Kirjoita Uusi kuvakäännös -sivun Nimi-ruutuun kuvakäännöksen nimi.

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

    Näyttökuva kuvakäännöksen nimestä

Mukautettu rajaus kuvakäännösten avulla SharePointissa

Oletusarvon mukaan kuvakäännös luodaan kuvan keskeltä alkaen. Voit muuttaa yksittäisten kuvien kuvakäännöstä rajaamalla osan kuvasta, jota haluat käyttää. Voit rajata kuvat yksittäin jokaista kuvakäännöstä varten. Kuvien rajaaminen nopeuttaa sivun lataamista luomalla SharePointin blogivälimuistin avulla kuvasta version jokaista käännöstä varten. Näin palvelimen kuormitusta vähennetään, koska kuvan kokoa muutetaan vain kerran, minkä jälkeen se on valmis palvelemaan käyttäjiä useita kertoja. Katso lisätietoja kuvakäännöksen rajaamisesta on artikkelissa Kuvakäännöksen rajaaminen.

Kehitä taitojasi
Tutustu koulutusmateriaaliin
Saat uudet ominaisuudet ensimmäisten joukossa
Liity Office Insider -käyttäjiin

Oliko näistä tiedoista hyötyä?

Kiitos palautteesta!

Kiitos palautteestasi! Näyttää siltä, että Office-tukiedustajamme avusta voi olla sinulle hyötyä.

×