Latasit puhelimesta tusinan kuvia ja sivusto alkoi hidastella. Sivu avautuu kuudessa sekunnissa, Google pudottaa sijoituksiasi ja palveluntarjoajasi lähettää levyvaroituksia. Kuulostaako tutulta? HTTP Archiven datan mukaan vuonna 2026 kuvat muodostavat noin 45% keskimääräisen verkkosivun painosta. Sivustolle, jonka mediakirjasto kattaa useita gigatavuja, tämä tarkoittaa suoria tappioita: välittömiä poistumisia, romahtanutta hakukonenäkyvyyttä ja paisuneita varmuuskopioita. Voit korjata tämän yhdessä illassa.

💡 Pikaopas:

• Muunna JPEG- ja PNG-kuvat WebP- tai AVIF-muotoon: tiedostokoko putoaa neljänneksellä tai enemmän samalla visuaalisella laadulla.
• Ota käyttöön automaattinen koonmuutos Imsanityn tai Smushin avulla: jättimäiset puhelinlataukset jäävät historiaan.
• Ota käyttöön lazy loading: WordPress tekee tämän suoraan paketista versiosta 5.5 alkaen yhdellä valintaruudulla.
• Asenna pakkauslisäosa (Smush, ShortPixel tai EWWW): se pakkaa mediakirjastosi massana ja siivoaa vanhat tiedostot.
• Täytä alt-teksti jokaiselle kuvalle: hakukoneet näkevät kuvat vain sen kautta.

Kuvien valmistelu ennen latausta

4000 pikseliä leveän valokuvan lataaminen blogiin, jonka sisältöalue on 750 pikseliä, on turhaa. WordPress luo pienempiä kopioita, mutta alkuperäinen jää kuolleeksi painoksi. Ennen latausta muuta kuvan kooksi 1200-1600 pikseliä leveydeltä, jotta jätät tilaa retina-näytöille. Työkalut: sisäänrakennettu Paint, verkkopohjainen Easy Resize tai mikä tahansa kuvankäsittelyohjelma.

Muotosääntö: valokuvat JPEG-muotoon, logot ja tekstipitoiset kuvakaappaukset PNG-muotoon. 2020-luvulta lähtien WebP (25-34% kevyempi kuin JPEG, Googlen datan mukaan) ja AVIF (jopa 50% kevyempi) ovat vakiintuneet verkkostandardeiksi. Voit muuntaa kuvat Squooshilla tai antaa lisäosan hoitaa sen; lähes jokainen alla listattu lisäosa osaa luoda WebP-kopiot automaattisesti.

Laatu: JPEG:n pudottaminen 12:sta 8:aan (Photoshopin asteikolla) puolittaa tiedostokoon ilman näkyvää eroa. Verkkostandardi on 80-85%. Ilmainen TinyPNG tekee saman raahaamalla tiedoston selaimeesi.

Tiedostonimet: ei IMG_4827.jpg, vaan how-to-compress-wordpress-images.jpg. Ei välilyöntejä, ei erikoismerkkejä, sisällytä avainsana. Hakukoneet huomioivat tiedostonimet kuvien indeksoinnissa.

Metatiedot latauksen jälkeen

Tiedosto on ladattu, mutta työsi ei ole valmis. Alt-teksti: 4-8 sanaa, kuvaileva, sisältää avainsanan. Ei "photo1", vaan "WebP- ja JPEG-formaattien vertailu WordPressissä". Otsikko ja kuvaus auttavat mediakirjastossa ja edistävät hakukoneoptimointia. WordPressin sisäänrakennetulla editorilla voit kiertää, rajata ja skaalata heti latauksen jälkeen.

Jos vaihdoit teemaa tai rekisteröit uusia kokoja add_image_size()-funktiolla, Regenerate Thumbnails -lisäosa (miljoona asennusta) luo kaikki koot uudelleen yhdellä napsautuksella.

Pakkauslisäosat: vertailu

Manuaalinen valmistelu toimii erinomaisesti uusille latauksille. Mutta gigatavut jo ladattuja tiedostoja vaativat lisäosia: ne pakkaavat, muuntavat WebP/AVIF-muotoon ja käsittelevät mediakirjastosi massana.

Smush

Miljoona asennusta, arvosana 4,8. Ilmainen versio: pakkaus ilman näkyvää laadun heikkenemistä, automaattinen koon muutos, laiska lataus, Directory Smush mediakirjaston ulkopuolisille kansioille. Pro (6 $/kk): WebP, AVIF, CDN 119 palvelimella, automaattinen leveyden/korkeuden korjaus CLS:n poistamiseksi. Huono puoli: yli 5 Mt:n tiedostot ohitetaan ilmaisversiossa. 🔗 Smush WP.orgissa

ShortPixel

Yli 300 000 asennusta. Kolme pakkaustilaa (häviötön, häviöllinen, glossy), tekoälyn luoma alt-teksti yli 100 kielellä, taustatila ilman selainvälilehden auki pitämistä. Pakkaa JPEG, PNG, GIF, WebP, AVIF ja PDF. 100 krediittiä/kk ilmaiseksi, rajaton 9,99 $/kk. 🔗 ShortPixel WP.orgissa

EWWW Image Optimizer

Ainoa lisäosa, jossa on täysin paikallinen pakkaus (jpegtran, optipng, cwebp, palvelimesi työkalut). Ilmainen: rajaton pakkaus, WebP, laiska lataus automaattisella skaalauksella, WP-CLI. Pro: AVIF, CDN, vesileimat, PDF. Huono puoli: käyttöönotto on monimutkaisempi kuin kilpailijoilla. 🔗 EWWW WP.orgissa

TinyPNG

Sama panda tinypng.comista lisäosana. Pakkaa JPEG-, PNG- ja WebP-tiedostot, muuntaa AVIF-muotoon. 500 krediittiä kuukaudessa ilmaiseksi, mikä tarkoittaa noin 50-100 kuvaa WordPressin koot huomioiden. Käyttöliittymä on erittäin yksinkertainen, pakkaus tapahtuu ilman näkyvää laadun heikkenemistä. Huono puoli: ei CDN:ää eikä lazy loadingia. 🔗 TinyPNG WP.orgissa

Imsanity

Yli 200 000 asennusta, arvosana 4,9. Ei pakkaa, ainoastaan muuttaa kokoa. Aseta maksimileveys ja -korkeus, ja jokainen ladattu tiedosto skaalataan automaattisesti. Tekijä: Shane Bishop (sama kehittäjä kuin EWWW:n takana). Täydellinen pari: Imsanity automaattiseen koonmuutokseen ja EWWW pakkaamiseen. Täysin ilmainen. 🔗 Imsanity WP.orgissa

Optimus

Yli 30 000 asennusta KeyCDN-tiimiltä. Lisäosan koko on minimaalinen (0,19 Mt), palvelimet Saksassa ja tiedostot poistetaan välittömästi käsittelyn jälkeen. Ilmaisversio on rajoitettu 100 kilotavuun per tiedosto (käytännössä demo). HQ-versio poistaa rajoitukset ja lisää WebP-tuen. 🔗 Optimus WP.orgissa

Lazy loading

Versiosta 5.5 lähtien WordPress lisää natiivin loading="lazy" -attribuutin kaikkiin kuviin, joilla on leveys ja korkeus. Useimmille sivustoille tämä riittää. Jos tarvitset enemmän, tässä muutamia lisäosia:

Lazy Load for Videos korvaa YouTuben ja Vimeon soittimet klikattavalla pikkukuvalla. Video latautuu vasta klikkauksen jälkeen, joten JavaScript ei hidasta sivua.

BJ Lazy Load on kevyt lisäosa kuville, pikkukuville, gravatareille ja iframeille, ja se käyttää läpinäkyvää paikkamerkkiä.

a3 Lazy Load on mobiililähtöinen, ja siinä on ulkoasuefektejä (häivytys, liuku) sekä WooCommerce-tuki.

Rocket Lazy Load WP Medialta (WP Rocketin takana olevalta tiimiltä) korvaa kuvat ja iframe-elementit paikanvaraajalla. Ei tue videota, vain kuvat ja kehykset.

Käytännössä "natiivi lazy load + pakkauslisäosa, jossa on sisäänrakennettu lazy loading (Smush tai EWWW)" riittää. Asenna erillinen lisäosa vain, jos vakiotyökalut eivät riitä.

Edistyneemmät työkalut

Twenty Twenty on ilmainen ennen/jälkeen-liukusäädinlisäosa. Se asettaa kaksi kuvaa päällekkäin ja antaa lukijoille liukusäätimen niiden vertailuun [twentytwenty]-shortcoden kautta. Täydellinen optimoinnin tapaustutkimuksiin. 🔗 Twenty Twenty WP.orgissa

Draw Attention luo interaktiivisia hotspot-pisteitä minkä tahansa kuvan päälle.

Vie hiiri päälle nähdäksesi työkaluvihjeen, klikkaa seurataksesi linkkiä. Ilmaisversio: yksi interaktiivinen kuva. Pro (hinnoittelu kehittäjän verkkosivustolla): rajattomasti kuvia, lightboxit, 20 väripalettia.

Käyttötapauksia: interaktiiviset kartat, kaaviot, pohjapiirrokset, infografiikat. 🔗 Draw Attention WP.orgissa

Mukautetut kuvakoot koodilla

Rekisteröidäksesi mukautettuja kokoja lisää seuraava functions.php-tiedostoon:

1
function custom_image_sizes() {
2
    add_image_size( 'custom-medium', 480, 360, true );
3
    add_image_size( 'custom-large', 1200, 900, true );
4
}
5
add_action( 'after_setup_theme', 'custom_image_sizes' );
6
 
7
function show_custom_sizes( $sizes ) {
8
    return array_merge( $sizes, array(
9
        'custom-medium' => __( 'Средний (кастомный)', 'textdomain' ),
10
        'custom-large'  => __( 'Большой (кастомный)', 'textdomain' ),
11
    ));
12
}
13
add_filter( 'image_size_names_choose', 'show_custom_sizes' );

Koodin lisäämisen jälkeen uudet koot ilmestyvät pudotusvalikkoon kuvaa lisättäessä. Olemassa oleville tiedostoille aja Regenerate Thumbnails.

⁉️🤔 Usein kysytyt kysymykset

Mikä on paras pakkauslisäosa aloittelijalle?

Smush: asenna, aktivoi, unohda. Ilmainen versio pakkaa automaattisesti latauksen yhteydessä ja tarjoaa yhden napsautuksen massaoptimoinnin. WebP ja AVIF ovat Pro-versiossa, mutta perusominaisuudet riittävät alkuun pääsemiseksi.

Mikä on WebP:n ja AVIF:n ero, ja kumpi kannattaa valita?

WebP: säästöä JPEG:hen verrattuna (katso Googlen data formaatteja käsittelevästä osiosta), tuettu kaikissa selaimissa. AVIF: jopa 50% kevyempi kuin JPEG, Safari-tuki vuodesta 2023. Neuvo: WebP turvallisena oletuksena, AVIF maksimaaliseen kaistansäästöön.

WordPress pakkaa JPEG:t jo latauksen yhteydessä, miksi käyttää lisäosaa?

WordPressin sisäänrakennettu pakkaus käyttää perusalgoritmia kiinteällä laatutasolla. Lisäosat (Smush, ShortPixel, EWWW) käyttävät kehittyneitä algoritmeja ja puristavat lisää säästöjä samalla visuaalisella laadulla. Lisäksi muunnos WebP/AVIF-muotoon, mitä ydinohjelmisto ei tee.

Tarvitsenko lazy loadingia, jos sivustoni on nopealla hostingilla?

Lazy loading säästää ei palvelinaikaa, vaan kävijän kaistaa ja ensimmäisen ruudun renderöintinopeutta. Natiivi loading="lazy" WordPress 5.5+:ssa on jo käytössä eikä vaadi asetuksia.

Miten tarkistan, kuinka paljon kuvat hidastavat sivustoani?

GTmetrix näyttää yksittäiset tiedostot ja pakkaussuositukset. Googlen PageSpeed Insights tarjoaa erittelyn: "Serve images in next-gen formats", "Properly size images", "Efficiently encode images". Molemmat ovat ilmaisia.

Yhteenveto: mikä lisäosa valita

Kuvien pitäminen kunnossa ei ole kertaluonteinen siivous vaan asetelma, joka toimii vuosia. Käytä yksi ilta asennukseen, ja lisäosa hoitaa kaiken automaattisesti siitä eteenpäin.

• Uusi blogi, minimaalinen vaiva: Smush Free. Pakkaus latauksen yhteydessä, massaoptimointi, lazy loading yhdessä lisäosassa.
• WooCommerce-verkkokauppa: ShortPixel. Tekoäly tuottaa alt-tekstit sadoille tuotteille, taustatila ilman välilehden auki pitämistä.
• Itse ylläpidetty, täysi hallinta: EWWW. Paikallinen pakkaus ilman ulkoisia rajapintoja, rajoittamaton volyymi.
• Maksimaaliset säästöt: TinyPNG + Imsanity. Tämä yhdistelmä hoitaa sekä jättimäiset lataukset että paisuneet JPEG:t.
• Valokuvaaja/portfolio: EWWW tai ShortPixel häviöttömässä tilassa. Laatu säilyy, metatiedot siivotaan.

Aloita ilmaisella Smushilla: se näyttää, kuinka paljon tilaa jo tuhlaat. Minkä lisäosan valitsit? Jaa kommenteissa.