Sivuston nopeus ei riipu pelkästään hostingista ja koodista. Lataamasi kuvat muodostuvat usein pahimmaksi pullonkaulaksi: yksi "raskas" kameralla otettu valokuva voi painaa 5-8 Mt ja lisätä sivun latausaikaan sekunnin. Entä jos sinulla on kymmenen tällaista kuvaa?

Kuvamuoto määrittää, miten kuva pakataan, miten se toistaa värit ja miten selaimet näyttävät sen. Väärä valinta tarkoittaa sumeita kuvakaappauksia, jättimäisiä PNG-tiedostoja kompaktien WebP-tiedostojen sijaan ja sijoituksen laskua: Google huomioi Core Web Vitals -mittarit sijoituksissa.

Alla on tarkat suositukset kullekin tehtävälle: valokuvat, kuvakaappaukset, logot, animaatiot. Ja miten lisäät muotoja, joita WordPress ei hyväksy oletuksena.

💡 Nopea yleiskatsaus:

• Tunnista, mitä olet lataamassa: valokuva, kuvakaappaus, logo vai animaatio, sillä tämä ratkaisee muotovalinnan.
• Valokuvissa käytä AVIF- tai WebP-muotoa (pakkaus on merkittävästi JPEG:tä parempi samalla laadulla).
• Kuvakaappauksissa ja logoissa PNG (häviötön) tai AVIF (häviöllinen mutta huomattavasti pienempi koko).
• Animaatioissa WebP GIF:n sijaan (koko pienenee moninkertaisesti).
• Jos WordPress ei hyväksy tarvitsemaasi muotoa, lisää tuki functions.php-tiedoston tai lisäosan kautta.
• Täytä aina alt-teksti ja pakkaa kuvat ennen latausta tai automaattisesti optimointilisäosan kautta.

Miksi kuvatiedostomuoto on kriittinen WordPressissä

Muoto ei ole pelkkä tiedostopääte. Se on koodausalgoritmi, joka määrittää kolme asiaa: kuvanlaadun, tiedostokoon ja selainyhteensopivuuden. Kaikki kolme vaikuttavat suoraan sivustosi liiketoimintamittareihin.

Latausnopeus ja Core Web Vitals. 2 Mt:n JPEG-valokuva ja sama valokuva 400 kt:n AVIF-muodossa näyttävät identtisiltä mutta latautuvat viisi kertaa eri nopeudella. Google arvioi Largest Contentful Paint (LCP) -mittaria, ja kuvat ovat usein sivun raskain elementti. Lisäosat, kuten Smush, muuntavat tiedostot WebP- tai AVIF-muotoon automaattisesti, mutta oikean lähdemuodon valinta säästää palvelimen resursseja.

SEO-seuraukset. Sivun nopeus on suora Googlen sijoitusignaali. Raskaat kuvat laskevat Core Web Vitals -pisteitäsi, ja sivu menettää sijoituksia, vaikka teksti olisi täydellisesti optimoitu. Portentin tutkimus (2024) osoitti, että LCP:n lyhentäminen 4 sekunnista 2 sekuntiin kasvattaa aloitussivun konversiota keskimäärin 15-20% B2B-aloilla.

Visuaalinen laatu. Eri muodot käsittelevät liukuvärejä, tekstiä ja hienoja yksityiskohtia eri tavoin. JPEG tuottaa artefakteja terävien kontrastireunojen ympärille, mikä näyttää sotkuiselta kuvakaappauksissa. PNG säilyttää terävyyden mutta painaa moninkertaisesti enemmän. AVIF ratkaisee molemmat ongelmat: pakkaus on merkittävästi tehokkaampaa kuin JPEG vertailukelpoisella visuaalisella laadulla.

Mukautuvuus. Käyttäjät vierailevat sivustolla puhelimilla, tableteilla ja pöytäkoneilla eri selaimilla. AVIF-muotoa tukevat Chrome, Firefox ja Opera (vuodesta 2021-2022) sekä Safari versiosta 16 alkaen (syksy 2022). WebP on toiminut kaikkialla vuodesta 2020. JPEG ja PNG ovat yleinen varavaihtoehto, jota mikä tahansa selain viimeisen 20 vuoden ajalta ymmärtää.

Mitä kuvamuotoja WordPress tukee vuonna 2026

WordPress on muuttunut radikaalisti. Kun aiemmin vain JPEG, PNG, GIF ja ICO toimivat "suoraan paketista", WordPress 5.8 (2021) lisäsi natiivin WebP-tuen ja WordPress 6.5 (huhtikuu 2024) lisäsi täyden AVIF-tuen.

Täydellinen luettelo oletusarvoisesti käytettävissä olevista muodoista (WordPress ≥6.5):

SVG (vektorimuoto) ei ole WordPressin oletusarvoisesti hyväksymä tietoturvasyistä, sillä SVG-tiedostot voivat sisältää JavaScriptiä. Jos tarvitset SVG:tä logoille tai kuvakkeille, ota se käyttöön functions.php-tiedoston kautta suodattamalla tai käytä erikoistunutta lisäosaa, kuten Safe SVG WordPress.orgissa.

Muotojen vertailu: milloin mitäkin käytetään

JPEG (JPG)

Standardi vuodesta 1992, joka kattaa edelleen noin 77% kaikista internetin kuvista W3Techsin mukaan (2026). Häviöllinen pakkaus laatutason säädöllä; 85-92 on "sweet spot". Miljoonia värejä, erinomaiset liukuvärit.

Haittapuoli: ei tue läpinäkyvyyttä. Jokainen JPEG on suorakulmio. Ei sovellu logolle läpinäkyvällä taustalla. Lisäksi pakkausartefaktit terävillä, korkeakontrastisilla reunoilla, mikä tarkoittaa, että käyttöliittymäkuvakaappaukset näyttävät JPEG-muodossa sotkuisilta.

Milloin käyttää: valokuvat, suuret taustakuvat, blogikirjoitukset, joissa on valokuvasisältöä, jos et jostain syystä käytä WebP/AVIF-muotoa.

PNG

Muoto, joka luotiin ilmaiseksi vaihtoehdoksi GIF:lle. Häviötön pakkaus: yksikään pikseli ei katoa. Täysi alfa-läpinäkyvyys (256 tasoa) mahdollistaa pehmeät varjot ja puoliläpinäkyvät elementit.

Haittapuoli: koko. PNG-valokuva voi painaa 5-10 kertaa enemmän kuin JPEG-versio visuaalisesti identtisellä laadulla. Sisältökuville tämä on perusteetonta.

Milloin käyttää: käyttöliittymäkuvakaappaukset (tekstin terävyys on kriittistä), logot, infografiikat, kaaviot, kuvakkeet, tekstiä sisältävät kuvat.

GIF

Muoto, jossa on 256 väriä ja kuva kuvalta -animaatio. Varhaisen internetin legenda. Häviötön pakkaus, mutta rajoitettu paletti tekee siitä sopimattoman valokuville, sillä liukuvärit muuttuvat "portaiksi".

Haittapuoli: valtavat animaatiokoot. 5 sekunnin GIF voi painaa 10-15 Mt, kun sama pätkä WebP-animaationa painaa 1-2 Mt.

Milloin käyttää: vain silloin, kun tarvitset lyhyen animaation ilman ääntä ja WebP/AVIF-versiota ei ole saatavilla.

WebP

Google esitteli WebP:n vuonna 2010, mutta muoto "lähti lentoon" vasta vuoden 2020 jälkeen, kun kaikki merkittävät selaimet lisäsivät tuen. Se tukee sekä häviöllistä että häviötöntä pakkausta yhdessä muodossa. Läpinäkyvyys, kyllä. Animaatio, kyllä. WebP-kuvat ovat keskimäärin 25-35% pienempiä kuin PNG ja 25-34% pienempiä kuin JPEG vastaavalla laadulla.

Haittapuoli: kirjoitushetkellä se ei ole enää tehokkain muoto, sillä AVIF päihittää sen pakkauksessa. Mutta varavaihtoehtona WebP on korvaamaton.

Milloin käyttää: yleismuoto kaikkeen. Jos olet epävarma, valitse WebP. Valokuvat, kuvakaappaukset, animaatiot, grafiikka, se hoitaa kaiken.

AVIF

Tehokkain kuvamuoto vuonna 2026. Perustuu AV1-videokoodekkiin. AVIF-kuvat ovat 30-50% pienempiä kuin WebP samalla visuaalisella laadulla. Tukee HDR:ää, laajaa väriavaruutta, häviöllistä ja häviötöntä pakkausta, läpinäkyvyyttä ja animaatiota. WordPress 6.5+ tukee AVIF-muotoa natiivisti, joten voit ladata suoraan mediakirjastoon.

Haittapuoli: Safari lisäsi tuen vasta versiossa 16 (syksy 2022), joten vanhemmat iPhonet ja Macit vanhentuneilla versioilla eivät näytä AVIF-muotoa. Tämä ratkaistaan lisäämällä WebP/JPEG-varavaihtoehto <picture>-elementin tai optimointilisäosan kautta.

Milloin käyttää: ensisijainen muoto valokuville ja kuvakaappauksille. Jos sivustosi käyttää WordPress ≥6.5 -versiota, AVIF on päävalintasi ja WebP toimii varmistuksena.

Miten lisäät tuen muille muodoille

WordPress suodattaa ladatut tiedostot MIME-tyypin mukaan. Jos haluat sallia SVG:n, BMP:n tai muun muodon, lisää se upload_mimes-koukun kautta teemasi functions.php-tiedostossa:

1
add_filter( 'upload_mimes', 'techblog_add_mime_types' );
2
function techblog_add_mime_types( $mime_types ) {
3
    $mime_types['svg']  = 'image/svg+xml';
4
    $mime_types['bmp']  = 'image/bmp';
5
    $mime_types['webp'] = 'image/webp';   // WP 5.8+ not required
6
    $mime_types['avif'] = 'image/avif';   // WP 6.5+ not required
7
 
8
    return $mime_types;
9
}

Koodi lisätään aktiivisen teeman functions.php-tiedostoon tai Code Snippets -lisäosan kautta. Tee varmuuskopio ennen muokkausta, sillä PHP-virhe kaataa sivuston.

SVG:tä koskeva varoitus. SVG-tiedostot voivat sisältää JavaScriptiä. Jos sallit SVG-lataukset, käytä Safe SVG -lisäosaa (puhdistaa skriptit), joka desinfioi tiedostot ja poistaa skriptit ennen mediakirjastoon tallentamista.

Vaihtoehto on File Upload Types -lisäosa, joka lisää tuen kymmenille tiedostomuodoille käyttöliittymän kautta. Yhtä tai kahta muotoa varten upload_mimes-koukku on yksinkertaisempi.

Parhaat käytännöt: koko, hakukoneoptimointi ja optimointi

Optimaalinen kuvakoko

Lataa kuvat juuri siinä koossa, jota sivulla tarvitaan. Jos kuva on 800 px:n palstalla, ei ole mitään järkeä ladata 4000 px:n alkuperäisversiota. WordPress luo latauksen yhteydessä useita kokoja (pikkukuva, medium, large), mutta alkuperäinen tiedosto säilyy palvelimella ja voidaan toimittaa selaimeen, kun full-kokoa kutsutaan.

Sääntö: ennen lataamista muuta kuvan koko maksiminäyttöleveyteen (yleensä 1200-1600 px sisältöalueelle). Työkalut: Photoshop, Googlen ilmainen Squoosh, cwebp-komentorivityökalu.

Latausrajan nostaminen

Oletuksena WordPress rajoittaa ladattavan tiedoston koon 2 megatavuun. Nykyaikaiselle AVIF:lle tämä on harvoin ongelma (tiedostot ovat huomattavasti pienempiä kuin JPEG), mutta suurta PNG:tä tai animoitua WebP:tä ladattaessa raja voi tulla vastaan.

Monilla hosting-palveluntarjoajilla rajaa voi muuttaa hallintapaneelin kautta. Esimerkiksi Cloudwaysissa mene kohtaan Server Management → Settings and Packages. GoDaddyssa cPanelin kautta, Media Templessä muokkaamalla php.ini-tiedostoa, ja WP Enginessä sinun on otettava yhteyttä tukeen. Jos sinulla ei ole suoraa pääsyä palvelimen asetuksiin, lisää tämä wp-config.php-tiedostoon:

1
define( 'WP_MEMORY_LIMIT', '256M' );

Tämä kasvattaa PHP:n muistirajaa ja nostaa epäsuorasti latauskynnystä.

Kuvien hakukoneoptimointi: alt-tekstit ja tiedostonimet

Hakukoneet eivät "näe" kuvia, vaan ne lukevat niiden attribuutteja. Alt-teksti on kuvaus kuvasta, jonka hakukoneet indeksoivat ja ruudunlukijat lukevat.

Hyvän alt-tekstin säännöt:

• Kuvaile, mitä kuvassa on julkaisun kontekstissa. Ei "kuvakaappaus", vaan "Cloudwaysin hallintapaneeli, jossa Upload Size -kenttä on korostettuna."
• 4-8 sanaa, englanniksi, osion avainsana mukana.
• Älä aloita sanoilla "Kuva…" tai "Valokuva…"
• Koristeellisille kuville jätä alt="".

Myös tiedostonimellä on merkitystä. IMG_20241015_142302.jpg ei kerro hakukoneelle mitään. wordpress-image-format-comparison-chart.png kertoo. Nimeä tiedostot uudelleen ennen lataamista.

Kuvien optimointilisäosat

Jokaisen tiedoston manuaalinen optimointi vie aikaa. Lisäosat automatisoivat prosessin: ne pakkaavat, muuntavat WebP/AVIF-muotoon ja tarjoilevat selaimeen optimaalisen formaatin. WPShoutin testien (2025) mukaan neljä parasta ovat:

Kattavampi katsaus optimointilisäosiin on erillisessä artikkelissamme.

Analytiikkaan perustuva strategia

Google Analytics (tai Matomo) näyttää, millä laitteilla ja selaimilla kävijät liikkuvat. Tämä ratkaisee, minkä formaatin tulisi olla ensisijainen. Jos esimerkiksi suurin osa yleisöstäsi käyttää uusimpia Chrome- ja Safari-versioita, AVIF on perusteltu, ja voit asettaa WebP-varavaihtoehdon lisäosan kautta muille.

Jos monilla kävijöillä on iPhone, jossa on iOS 15 tai vanhempi, AVIF ei toimi, ja ensisijaisen formaatin tulisi olla WebP JPEG varmistuksena. Meillä on yksityiskohtainen opas, jossa on kolme tapaa tarjoilla WebP-kuvia WordPressissä, CDN:stä manuaaliseen <picture>-elementtiin.

Video: AVIF ja WebP WordPressissä käytännössä

Tämä lyhyt video näyttää prosessin, jossa kuvia muunnetaan AVIF- ja WebP-muotoon suoraan WordPressin hallintapaneelissa, ja vertaa kokoja ennen ja jälkeen:

AVIF-formaatti pakkaa huomattavasti WebP:tä tehokkaammin, ja ero näkyy erityisesti valokuvissa, joissa on pehmeitä liukuvärejä ja paljon yksityiskohtia. WordPress 6.5+ tukee AVIF:ää natiivisti, ilman lisäosia.

⁉️🤔 Usein kysytyt kysymykset

Mitä eroa on häviöllisellä ja häviöttömällä pakkauksella?

Häviölliset algoritmit poistavat dataa, jota silmä ei havaitse (JPEG, AVIF häviöllinen, WebP häviöllinen). Tiedosto on pieni, mutta laatu heikkenee jokaisella uudelleentallennuksella. Häviötön säilyttää jokaisen pikselin sellaisenaan (PNG, GIF, AVIF häviötön, WebP häviötön). Tiedosto on suurempi, mutta ihanteellinen tekstiä sisältävälle grafiikalle. Sisältökuvissa käytä häviöllistä (AVIF-laatu 50-70 tai WebP-laatu 75-85), jolloin koko pienenee moninkertaisesti. Jätä häviötön logoille ja kuvakaappauksille, joissa terävyydellä on väliä.

Mikä formaatti kannattaa valita kuvakaappauksille vuonna 2026?

AVIF häviöttömässä tilassa tai laadulla 90+. Kuvakaappauksissa tarvitaan luettavaa tekstiä, ja häviötön AVIF säilyttää terävyyden PNG-tasolla, mutta tiedosto painaa huomattavasti vähemmän. Jos sivustosi pyörii WordPressillä, joka on vanhempi kuin 6.5, käytä häviötöntä WebP:tä ensisijaisena ja PNG:tä varavaihtoehtona.

Testaa itse: ota kuvakaappaus hallintapaneelista, tallenna se PNG:nä, häviöttömänä WebP:nä ja häviöttömänä AVIF:nä. Visuaalinen ero: nolla. Mutta sivulla, jolla on puolitoista tusinaa kuvakaappausta, megatavun ero tuntuu jo LCP:ssä.

Tarvitsenko optimointilisäosaa, jos WordPress itse tukee WebP:tä ja AVIF:ää?

WordPress tukee WebP:n ja AVIF:n lataamista, mutta ei muunna JPEG/PNG:tä automaattisesti nykyaikaisiin formaatteihin. Jos lataat valmiita WebP/AVIF-tiedostoja, et tarvitse lisäosaa. Jos lähdemateriaalisi on JPEG/PNG-muodossa, lisäosa muuntaa ne latauksen yhteydessä ja tarjoilee selaimelle optimaalisen formaatin.

Lisäksi lisäosat ratkaisevat varavaihtoehtotehtävän: ne tuottavat <picture>-elementin, jossa on useita lähteitä eri selaimille. Ilman lisäosaa sinun pitäisi tehdä tämä manuaalisesti tai toivoa, että kaikki kävijät käyttävät selaimia, jotka tukevat AVIF:ää (mikä ei vielä pidä paikkaansa).

WebP vai AVIF: kumpi kannattaa valita juuri nyt?

AVIF ensisijaiseksi, WebP varavaihtoehdoksi. AVIF voittaa pakkauksessa (huomattavasti WebP:tä parempi), laadussa (HDR, laaja väriavaruus) ja selaintuessa, joka kattaa nyt Chrome 85+, Firefox 93+, Safari 16+ ja Opera 71+. Ainoa "mutta" on vanhemmat iOS-laitteet: iPhone X ja vanhemmat iOS 15:llä eivät näytä AVIF:ää. Mutta niiden osuus laskee, ja lisäosat kuten EWWW ja Optimole tarjoilevat niille automaattisesti WebP:tä.

Jos analytiikkasi näyttää huomattavaa iOS 15:n ja vanhempien osuutta, tee WebP:stä ensisijainen formaatti ja AVIF:stä vaihtoehto "niille, jotka pystyvät". Kaikille muille: AVIF nyt, WebP varalla.

Voinko käyttää SVG:tä logolle WordPressissä?

SVG on ihanteellinen formaatti logoille: ääretön skaalautuvuus ja mikroskooppinen koko (2-5 kt). Mutta WordPress estää SVG:n XSS-hyökkäysriskin vuoksi (SVG voi sisältää upotettua JavaScriptiä). Käytä Safe SVG -lisäosaa (turvallinen lataus), joka puhdistaa jokaisen ladatun tiedoston ja poistaa mahdollisesti vaarallisen koodin. Sen jälkeen SVG:n voi ladata suoraan mediakirjastoon ja käyttää kuten mitä tahansa muuta formaattia.

Mitä käyttää WordPressissä vuonna 2026: lopputulos

Formaatin valinta kiteytyy kolmeen sääntöön. Valokuvat ja kuvakaappaukset: AVIF (ensisijainen) tai WebP, häviöllinen pakkaus laadulla 70-85. Logot ja kuvakkeet: PNG tai häviötön AVIF + SVG Safe SVG:n kautta. Animaatiot: WebP GIF:n sijaan, koko pienenee moninkertaisesti.

Älä laita kaikkia munia samaan formaattikoriin. Ihanteellinen strategia: AVIF → WebP → alkuperäinen JPEG/PNG, kolme kerrosta <picture>-elementin tai lisäosan kautta. Lähes kaikki kävijät saavat AVIF/WebP:n, loput saavat klassisen formaatin, eikä kukaan näe rikkinäistä kuvaketta.

Määritä automaattinen optimointi kerran (EWWW:llä paikalliseen käsittelyyn tai Optimolella pilvipalveluun CDN:llä) ja unohda manuaalinen pakkaus. Tarkista analytiikka neljännesvuosittain: vanhojen selainten osuus laskee, ja pian AVIF on formaatti ilman varauksia.