Hidas verkkosivusto on turhauttava. Mutta vielä ärsyttävämpää on, kun pullonkaulana ei ole koodisi tai palvelinympäristösi, vaan kuvat, joita kukaan ei ole vaivautunut pakkaamaan. Googlen PageSpeed Insights nostaa "optimoi kuvat" -kohdan punaisella jokaisessa tarkastuksessa, ja menetät hakusijoituksia samalla kun kävijöiden kärsivällisyys loppuu.

Vuodesta 2015 lähtien Google on käyttänyt nopeutta sijoitustekijänä. Kuvat muodostavat yli puolet keskimääräisen sivun painosta, joten niiden pakkaaminen antaa nopeimman ja huomattavimman suorituskyvyn parannuksen. Yksi lisäosa hoitaa tämän tehtävän kokonaan.

EWWW Image Optimizer, ilmainen työkalu, jolla on yli miljoona aktiivista asennusta, pakkaa JPG-, PNG-, GIF- ja WebP-tiedostot suoraan palvelimellasi ilman kolmannen osapuolen rajapintoja tai rajoituksia. Tämä opas käy läpi asennuksen vaihe vaiheelta, aina asennuksesta massapakkaukseen ja tulosten todentamiseen.

💡 Nopea yleiskatsaus:

• Asenna EWWW Image Optimizer ja tarkista palvelimen yhteensopivuus; lisäosa näyttää, mitä puuttuu
• Määritä pakkaustasot: häviötön PNG/GIF:lle, JPG-laatu 80; PageSpeed lakkaa valittamasta kuvista
• Ota WebP-muunnos käyttöön ja lisää uudelleenkirjoitussäännöt; Googlen formaatti pienentää kokoa 60% ilman laadun heikkenemistä
• Suorita massapakkaus kaikille olemassa oleville kuville ja tarkista tulos PageSpeed Insightsissa

1. Asennus ja palvelimen yhteensopivuuden tarkistus

Asenna lisäosa WordPressin hallintapaneelin kautta tai lataamalla ZIP-tiedosto wordpress.orgista. Siirry heti aktivoinnin jälkeen kohtaan Asetukset → EWWW Image Optimizer.

Ensimmäisenä näet "Lisäosan tila" -lohkon. Vihreät valintamerkit tarkoittavat, että kaikki tarvittava on asennettu. Puuttuvat moduulit on korostettu punaisella: jpegtran JPG-pakkausta varten, optipng PNG:lle, gifsicle GIF:lle ja cwebp WebP-muunnosta varten. Useimmat palveluntarjoajat sallivat ne oletuksena, mutta jos jotain puuttuu, ota yhteyttä palveluntarjoajasi tukeen. Lisäosa tarjoaa myös pilvioptimoinnin Compress API:n kautta, kun paikalliset työkalut eivät ole käytettävissä.

Tässä vaiheessa kannattaa vilkaista osiota WordPressin latausnopeudesta; kuvien optimointi on vain yksi 21 tekniikasta, jotka yhdessä nostavat sinut PageSpeedin vihreälle vyöhykkeelle.

2. Lisäosan perusasetukset

"Perusasetukset"-välilehdellä määrität perustan sille, miten lisäosa toimii.

API-avain pilvioptimointia varten. Valinnainen. Kehittäjä tarjoaa ilmaisia krediittejä pilvitilan testaamiseen vastineeksi suostumuksestasi lähettää anonyymejä käyttötilastoja. Paikalliset työkalut toimivat yhtä hyvin ilman rajoituksia, ja useimmille sivustoille se riittää.

Poista metatiedot. Ota tämä käyttöön. Älypuhelimet ja kamerat upottavat tiedostoihin EXIF/IPTC-tageja: kuvauskoordinaatit, laitemalli, päivämäärä. Se on ylimääräistä painoa ja mahdollinen tietosuojavuoto. Asiakkaat eivät usein tiedä, että heidän valokuvansa tallentavat GPS-koordinaatteja.

Pakkaustasot. Valitse JPG-, PNG- ja GIF-tiedostoille "Lossless". Kehittäjän mukaan keskimääräinen säästö häviöttömällä pakkauksella on 8% alkuperäisestä koosta. Jätä PDF-tiedostot pakkaamatta: ensinnäkin se on premium-ominaisuus, ja toiseksi PDF-tiedostoja tarjotaan yleensä ladattavaksi, eikä niiden koko vaikuta sivun latausnopeuteen.

3. Lisäasetukset ja JPG-laatu

"Advanced Settings" -välilehti sisältää parametrit, jotka vaikuttavat suoraan PageSpeed Insights -tuloksiin.

JPG-laatu. WordPress pakkaa JPG-tiedostot oletuksena tasolla 82. Suosittelen asettamaan sen arvoon 80; eroa ei näe silmällä, ja PageSpeed lakkaa valittamasta "optimoimattomista kuvista". Kymmenillä sivustoilla tämä asetus ei ole koskaan tuottanut väärää hälytystä.

Rinnakkainen ja ajastettu optimointi. Jos sinulla on yrityssivusto, jonne ladataan kuvia harvoin, voit jättää nämä asetukset rauhaan. Bulk Optimizerin ajaminen manuaalisesti tarpeen mukaan on riittävä työnkulku. Tehokkaalla palvelimella, jossa julkaistaan usein, ota ajastettu optimointi käyttöön.

Optimoitavat kansiot. Massa-ajojen aikana lisäosa skannaa kaksi uusinta mediakirjaston kansiota. Se on melkein aina riittävästi. Jos löydät kansioita, jotka jäivät huomaamatta, lisää ne manuaalisesti, mutta klikkaa "Save" heti sen jälkeen. Toiselle välilehdelle siirtyminen ennen tallentamista nollaa syöttämäsi polut; tämä on lisäosan tunnettu ominaispiirre.

Asetukset "Enable embedded help" ja "Allow usage tracking" ovat oman harkintasi varassa.

4. Kuvien koon muuttaminen

Tärkein käyttöönotettava asetus on "Enable resizing of existing images". Jos 2000 pikseliä leveä kuva lisätään 480 pikselin palstaan, CSS skaalaa sen visuaalisesti, mutta selain lataa silti täysikokoisen tiedoston. Tämä asetus rajaa todelliset mitat tarvittavaan kokoon.

Image Detective on hyödyllinen ominaisuus auditointiin. Kun se on käytössä, näet (sisäänkirjautuneena) sivustolla kuvat, jotka latautuvat suuremmalla resoluutiolla kuin millä ne näytetään. Se on nopea tapa löytää rajausehdokkaat ilman, että joudut käymään mediakirjastoa manuaalisesti läpi.

5. Muuntaminen WebP-muotoon

WebP on Googlen kehittämä formaatti, joka painaa 25-35% vähemmän kuin JPG ja jopa 60% vähemmän kuin PNG vastaavalla laadulla. Kaikki modernit selaimet tukevat sitä. EWWW voi luoda automaattisesti WebP-versiot jokaisesta ladatusta kuvasta.

Ota käyttöön "JPG/PNG to WebP" -asetus. Jätä Force WebP, WebP URLs ja Alternative WebP Rewriting tyhjiksi; vakiomekanismi riittää useimpiin konfiguraatioihin.

Keskeinen vaihe on klikata "Insert Rewrite Rules". Lisäosa lisää .htaccess-tiedostoon direktiivejä, jotka tarjoilevat selaimelle WebP-version tiedostosta, kun selain tukee formaattia. Onnistuneen lisäyksen jälkeen ilmaisin vaihtuu punaisesta "PNG"-merkinnästä vihreäksi "WEBP"-merkinnäksi.

"Conversion"-välilehdellä suosittelen ottamaan käyttöön "Preserve original images" -asetuksen. Lisäosa korvaa tiedoston optimoidulla versiolla vain, jos se on alkuperäistä pienempi. Muutama kymmenen megatavua varmuuskopioita varten on kohtuullinen vakuutus virheitä vastaan.

6. Massaoptimointi Bulk Optimizerilla

Kaikki asetukset on määritetty; nyt pakkaamme olemassa olevan mediakirjaston.

Siirry kohtaan Media → Bulk Optimizer. Ensimmäisellä ajokerralla et tarvitse force re-optimization- tai pause-between-images-lippuja. Klikkaa "Scan for unoptimized images", jolloin edistymispalkki tulee näkyviin.

Lisäosa käy läpi mediakirjaston, teemakansion ja mahdolliset ennalta määritetyt hakemistot. Muutaman sadan kuvan sivustolla prosessi kestää minuutteja. Näet säästöt jokaisen tiedoston kohdalla ja kumulatiivisen kokonaissumman.

Jos PageSpeed merkitsee edelleen tiettyjä tiedostoja ajon jälkeen, kopioi kansion polku ja lisää se optimoitavien kansioiden listalle ja suorita skannaus sitten uudelleen.

7. Tuloksen varmentaminen

Avaa Google PageSpeed Insights ja syötä muutaman sivusi URL-osoite. Tarkastusten "Serve images in next-gen formats" ja "Efficiently encode images" pitäisi näyttää vihreää tilaa.

Luvut voivat näyttää vaatimattomilta: 16-30 kt säästöä kuvaa kohden. Mutta kerro se 50 kuvalla sivua kohden ja tuhansilla sivunäytöillä kuukaudessa, ja kumulatiivinen vaikutus mitataan megatavuina liikennettä ja sekunteina latausaikaa. Mobiilikävijälle hitaalla yhteydellä se on ero "pysyä" ja "sulkea välilehti" välillä.

Jos haluat kaivaa syvemmältä, tässä on 21 tekniikkaa WordPressin nopeuttamiseen, jotka kattavat kuvien lisäksi myös välimuistin, skriptit, fontit ja tietokannan.

Alla oleva video näyttää käytännönläheisesti EWWW Image Optimizerin asennuksen ja käyttöönoton 8 minuutissa.

⁉️🤔 Usein kysytyt kysymykset

Pakkauttaako lisäosa alkuperäiset tiedostot vai luoko se kopioita?

Oletuksena EWWW korvaa alkuperäisen tiedoston optimoidulla versiolla, mutta vain jos se on PIENEMPI kuin alkuperäinen. Lisäosa ei koskaan tee kuvasta raskaampaa. "Muunnos"-välilehdellä voit ottaa käyttöön varmuuskopioinnin; alkuperäiset säilyvät erillisessä kansiossa wp-content/ewww/backup/.

Entä jos palvelimeni ei tue paikallisia pakkaustyökaluja?

Ota käyttöön pilvipakkauksen Compress API. Se on ilmainen häviöttömään JPG-pakkaukseen ja WebP-muunnokseen. Sinun tarvitsee vain sallia anonyymit käyttötilastot asetuksissa. Jos tämäkään vaihtoehto ei toimi, harkitse vaihtoehtoja kuten ShortPixel tai Smush.

Miten varmistan, että selain vastaanottaa WebP-kuvia?

Avaa DevTools (F12) → Network-välilehti → suodata tyypillä Img. Sivustosi kuvien Type-sarakkeessa pitäisi näkyä webp. Vaihtoehtoisesti avaa selaimen osoiteriville suora linkki johonkin sivuston kuvaan; Chrome ja Firefox näyttävät WebP-version, jos se on olemassa.

Massapakkaus jämähti puoliväliin. Mitä teen?

Päivitä sivu ja aloita uudelleen. Lisäosa muistaa edistymisen ja jatkaa samasta kohdasta. Jos ongelma toistuu, suurenna asetuksissa kuvien välistä taukoa ja kokeile sulkea erityisen suuria tiedostoja pois jonosta ewww_image_optimizer_timeout-suodattimella.

Tarvitsenko EWWW:tä, jos minun hostini pakkaa kuvat jo valmiiksi?

Host-tason pakkaus toimii yleensä lennossa eikä muokkaa alkuperäistä tiedostoa; se tarjoilee välimuistissa olevan version CDN:nsä kautta. EWWW optimoi itse tiedostot mediakirjastossa. Ne toimivat parhaiten yhdessä: EWWW pienentää alkuperäiset tiedostot, ja hostin välimuisti toimittaa ne nopeasti. Poista päällekkäiset ominaisuudet käytöstä (esimerkiksi kaksinkertainen WebP-muunnos), jos ne ovat ristiriidassa.

Mikä on muuttunut EWWW:ssä vuoteen 2026 mennessä?

Lisäosaa kehitetään aktiivisesti. Versiossa 8.x ilmestyi natiivi AVIF-tuki. Tämä seuraavan sukupolven formaatti AVIF-kehittäjien testien mukaan tarjoaa jopa 50% pienemmän tiedostokoon verrattuna WebP:hen samalla laadulla. AVIF-muunnos on kuitenkin tällä hetkellä premium-ominaisuus Easy IO CDN -tilauksen kautta.

Lazy Load automaattisella skaalauksella on nyt sisäänrakennettu ilmaisversioon ja se varaa oikein tilan kuville, mikä poistaa Cumulative Layout Shiftin (josta PageSpeed myös rankaisee).

Jos tarvitset yksinkertaisen, suoraan käyttövalmiin ratkaisun kuvien optimointiin, EWWW Image Optimizer on edelleen yksi parhaista ilmaisista vaihtoehdoista. Määritä se kerran tämän oppaan ohjeiden mukaan ja unohda punaiset varoitukset PageSpeedissä.

🔗 EWWW Image Optimizer WordPress.orgissa