...
✅ WEB- ja WordPress -uutiset, -teemat, -laajennukset. Täällä jaamme vinkkejä ja parhaita verkkosivustoratkaisuja.

Kuvien optimointi parantamaan WordPressin suorituskykyä

11

Pelataan peli…

Jokainen sivustosi tiedosto vaikuttaa sivun kokonaispainoon kilotavuina/mb. Kuinka suuren osan sivusi painosta arvelet kuvista?

kymmenen%?

kaksikymmentä%?

HTTP-arkiston mukaan kuvat muodostavat 50 % sivuston keskimääräisestä sivupainosta (noin 800 kt).

Koska puolet tiedoista, jotka kävijöiden on ladattava, kun he katsovat sivustoasi, tulevat kuvista, kaikilla täällä tekemälläsi optimoinnilla voi olla valtava vaikutus sivustosi tehokkuuteen.

Itse asiassa, jos kuviasi ei ole optimoitu ollenkaan, voit vähentää kuviesi painoa 50–80 % tämän oppaan avulla.

Kolme tapaa optimoida kuvia

Mitä tulee kuvan optimointiin, on olemassa kolme yksinkertaista tekniikkaa.

Ensimmäinen ja tehokkain tapa optimoida kuvia on pakata ne.

Napsauta tätä kokeillaksesi ShortPixeliä itse

1 Pakkaa kuvat

Kuvan pakkaus on ensisijainen tapa optimoida grafiikkaa. Jos noudatit WP Rocketin optimointiopasta, tunnet siellä esitellyn minimointikonseptin. Kuvan pakkaus ei ole niin erilainen.

Kun pakkaat kuvaa, algoritmi periaatteessa kirjoittaa uudelleen kuvan koodin pienentääkseen tiedostokokoa. On olemassa kaksi päätyyppiä pakkausta.

Häviötön pakkaus

Häviötön pakkaus optimoi kuvat säilyttäen samalla täsmälleen saman pikseli-pikselin näytön. Ei ole mitään syytä ohittaa häviötöntä pakkausta, koska se pienentää tiedostokokoa, mutta sillä ei kirjaimellisesti ole visuaalista eroa.

Suosittelisin kuitenkin käyttämään häviöllistä pakkausta sen sijaan.

Häviöllinen pakkaus

Häviöinen pakkaus tarjoaa paljon paremman optimoinnin, mutta pienen laadun heikkenemisen kustannuksella. Laadun heikkeneminen on kuitenkin niin vähäistä, että se on usein huomaamaton.

Häviötön pakkaus on tärkeää lääketieteellisessä kuvantamisessa ja teknisissä piirustuksissa, mutta verkkosivuilla näytetyissä kuvissa häviöllinen täyttää helposti laatustandardimme.

Kuinka pakata kuviasi

Aion suositella ShortPixel- laajennusta kuvan optimointiin, jota käytän täällä Compete Themesissa. Se sisältää häviöllisen ja häviöttömän pakkauksen sekä "kiiltävän" pakkauksen, joka on tavallaan välivaihtoehto.

Kuvien optimointi parantamaan WordPressin suorituskykyä

ShortPixel pakkaa kuvat automaattisesti, kun lataat ne sivustollesi, mikä voi olla todella kätevää. Olen melko kärsimätön editoidessani, joten mieluummin poistan tämän vaihtoehdon käytöstä ja optimoin kuvat Media-valikosta myöhemmin.

Kuvien optimointi parantamaan WordPressin suorituskykyä

Automaattinen pakkaus latauksen yhteydessä voidaan kytkeä pois päältä

Voit käyttää TinyPNG:n kaltaista työkalua kuvien pakkaamiseen, mutta mielestäni on helpompi ladata kuvat sivustolleni kuten aina ja sitten optimoida ne ShortPixelillä.

Entä kuvat, jotka olet jo ladannut?

Tässä ShortPixel todella loistaa.

Jos käytät TinyPNG:n kaltaista työkalua kuviesi optimointiin, optimoit vain sivustollesi lataamasi uudet kuvat. Entä kaikki kuvat, jotka olet jo ladannut? Miten optimoit ne?

ShortPixelissä on mahtava joukkooptimointivaihtoehto, joka käy läpi kaikki kuvasi kerralla.

Kuvien optimointi parantamaan WordPressin suorituskykyä

Yllä oleva kuva on melko itsestään selvä, lukuun ottamatta "pienemmät pikkukuvat" -osaa. Miksi pienempiä pikkukuvia on 4x niin monta ja mitä ne edes ovat?

Optimoi kaikki kuvakoot

Et ehkä tiedä tätä, mutta aina kun lataat kuvan WordPressiin, se luo automaattisesti kolme lisäkokoa (jos kuva on tarpeeksi suuri):

  • Pikkukuva
  • Keskikokoinen
  • Suuri

Voit tarkastella ja muokata näiden kuvakokojen mittoja Asetukset > Media -valikosta.

Kuvien optimointi parantamaan WordPressin suorituskykyä

Tässä on kysymys…

Oletetaan, että pakkaat kuvan ja lataat sen sitten sivustollesi. "Täysi" versio on täysin optimoitu, mutta kolme lisäkokoa eivät. Jos lisäät kuvan "keskikokoisen" version viestiin, kuva on pakkaamaton. ShortPixel optimoi lataamasi alkuperäiset kuvat ja kaikki WordPressin luomat lisäkoot.

Pelkästään pakkaaminen parantaa suorituskykyä, mutta on olemassa kaksi muuta yksinkertaista tapaa optimoida sivustosi kuvia entisestään.

2 Muuta kuvien kokoa

Oletetaan, että lataat sivustollesi kuvan, jonka koko on 5 000 x 2 500 pikseliä. Lisäät sen sitten viestiin, jossa se näkyy 800 x 400 pikseliä. Huolimatta siitä, että kuva on vain 800 pikseliä leveä vierailijan näytöllä, heidän on silti ladattava 5 000 pikselin versio.

Sanomattakin on selvää, että 5 000 pikseliä leveä kuva on massiivinen, ja sen lataaminen kestää todennäköisesti kauemmin kuin kaikkien muiden sivustosi tiedostojen yhteensä.

On kaksi tapaa välttää tämä.

Lataa pienempiä kuvia

Yleisenä nyrkkisääntönä on, että älä lataa kuvia, jotka ovat suurempia kuin 2 000 pikseliä. Käytätpä Windowsia tai Macia, sinulla on yksinkertainen kuvankäsittelyohjelma, jonka avulla voit nopeasti muuttaa liian suurien kuvien kokoa ennen niiden lataamista.

Toinen vinkki on välttää "täysi" versio, kun lisäät ylisuuria kuvia viestiin. Valitse sen sijaan suuri koko, joka on oletuksena 1024 kuvapistettä.

Kuvien optimointi parantamaan WordPressin suorituskykyä

Muuta mediakirjastossasi olevien kuvien kokoa

Kuvien kokoa on helppo muuttaa ennen niiden lataamista, mutta entä ne, jotka ovat jo sivustossasi?

ShortPixelissä on asetus, jonka avulla voit asettaa kuvillesi suurimman leveyden ja korkeuden.

Kuvien optimointi parantamaan WordPressin suorituskykyä

Voit määrittää tämän asetuksen niin, että kuvia ei koskaan rajata, kun niiden kokoa muutetaan. Kun olet ottanut tämän asetuksen käyttöön, voit suorittaa joukkooptimointityökalun, jolloin ShortPixel muuttaa kohtaamiensa liian suurten kuvien kokoa. Se muuttaa myös uusien kuvien kokoa, kun lataat niitä.

Jos olet käyttänyt paljon suuria kuvia, tämä saattaa olla hyödyllisin askel sivustollesi. On vain yksi optimointitekniikka lisää, ja se on vielä helpoin.

3 Poista EXIF-tiedot

Kuvatiedostot voivat sisältää EXIF-tiedoksi kutsuttua lisätietoa, joka ei näy itse kuvassa. EXIF voi olla melko hyödyllinen ja sisältää tietoja, kuten kameran valmistajan, valokuvan päivämäärän ja kellonajan sekä jopa GPS-koordinaatit.

Sinun ei tarvitse liittää näitä tietoja sivustollesi julkaisemiisi kuviin. Puhumattakaan, on luultavasti parasta tietosuojasyistä, että valokuvasi eivät sisällä GPS-koordinaatteja!

Jälleen kerran, ShortPixel hoitaa tämän helposti puolestamme. Oletusarvoisesti käytössä on asetus, joka poistaa EXIF-tiedot kaikista kuvista optimointiprosessin aikana.

Kuvien optimointi parantamaan WordPressin suorituskykyä

Keskimäärin tämä johtaa 8,5 %:n lisävähennykseen tiedostokokoa.

Pienemmät kuvat = nopeammat sivustot

Jos et ole optimoinut kuviasi ollenkaan, tästä tulee mahtava päivä sivustollesi!

Kaikki puhuvat isännöinnistä ja tiedostojen optimoinnista, mutta jostain syystä kuvien optimointi jää usein huomiotta. Se on hullua, koska on valtavia voittoja.

Käytän ShortPixeliä hoitamaan kaikki tässä oppaassa kuvatut kuvan optimointikäytännöt ja suosittelen sitä kaikille muille, jotka välittävät WordPress-sivustonsa toiminnasta.

Napsauta tätä kokeillaksesi ShortPixeliä nyt

Nyt kun olet matkalla superoptimoituun mediakirjastoon, sinun kannattaa harkita WP Enginen kaltaista premium-isäntää, joka lataa kuvat entistä nopeammin. Ja sinun tulee katsoa WP Rocket -oppaasta erityisesti osa laiskasta lataamisesta lisäkuvan optimointia varten.

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja