Näin optimoit kuvat WordPressiin

Valmistele uutta WordPress-artikkelia varten sopivan kokoinen kopio, lataa se mediakirjastoon ja valitse se Kuva-lohkoon. Valitse lohkon kuvakoko, kirjoita hyödyllinen alt-teksti ja tarkista julkaistu sivu puhelimella. Täysikokoinen tarkoittaa liitteen täysikokoista versiota, jota WordPress on voinut jo pienentää. Valinta ei siis pelkästään levennä lohkoa. WordPressin ohje selittää eron muuttamattomaan alkuperäistiedostoon.

Valmistele kuva ennen lataamista

Säilytä alkuperäinen valokuva erillään julkaistavista kopioista. Päätä, onko kyse koko sivun kansikuvasta, artikkelin kuvituksesta vai pienestä kortista. Eri käyttökohteisiin tarvitaan yleensä erikokoiset kuvat. Rajaa tarpeeton tila ja valitse suurimpaan aiottuun näyttökokoon sopivat mitat.

Esimerkiksi 600 pikselin levyiselle artikkelikuvitukselle voi kokeilla 1200 pikselin versiota tiheäpikselisiä näyttöjä varten. Se on tähän käyttökohteeseen sopiva kokeilu, ei WordPressin vaatimus. Tarkista tulos ja vertaa sen tiedostokokoa pienempään vaihtoehtoon.

Sommittele rajaustyökalulla ja aseta lopulliset mitat koonmuutostyökalulla. Säilytä alkuperäinen kuvasuhde leveyttä ja korkeutta syöttäessäsi, ellet tarkoituksella muuta muotoa.

Valitse sivustollesi sopiva kuvamuoto

Kokeile WebP:tä oman sivustosi valokuviin. Säilytä PNG, kun grafiikan on säilyttävä täysin muuttumattomana, ja käytä JPG:tä, kun toinen järjestelmä sitä vaatii. Pelkkä läpinäkyvyys ei edellytä PNG:tä: myös WebP tukee sitä.

Testaa yhden kuvan toimivuus omalla WordPress-sivustollasi ennen koko kirjaston muuntamista. Palvelimen kuvankäsittelyohjelmistot, lisäosat ja teema voivat vaikuttaa latauksen jälkeiseen käsittelyyn. Katso WordPressin koko- ja laatuohje. Vältä jo optimoitujen kuvien toistuvaa pakkaamista useilla lisäosilla tarkistamatta tulosta.

Tarkista kuva sivulla

Lisää kuva oikeaan artikkeliin tai sivulle ja tarkista kuvakoon valinnat. Älä valitse täysikokoista versiota vain siksi, että se kuulostaa laadukkaammalta. Valitse sijoitteluun riittävän tarkka versio ja tarkista, minkä tiedoston sivu oikeasti toimittaa. Virallinen Kuva-lohkon ohje kertoo asetuksista.

Kirjoita vaihtoehtoinen teksti kuvan tehtävän mukaan. Tuotteen yksityiskohtaa esittävä kuva tarvitsee sitä kuvaavan tekstin. Pelkästään koristeellisen kuvan vaihtoehtoisen tekstin voi jättää tyhjäksi. Älä täytä kenttää hakusanalistalla tai viereisen kappaleen toistolla.

Varmista julkaistu sivu

1. Avaa julkaistu osoite uloskirjautuneena myös kapealla näytöllä.
2. Tarkista rajaus, terävyys ja välit oikeassa asettelussa.
3. Avaa sivulla näkyvä kuva erikseen, jos haluat tarkistaa sivun käyttämän version.
4. Tarkista ladatun kuvan mitat ja tiedostokoko. Selaimen Network-näkymää tarvitaan vasta latauksen tai pyydetyn tiedoston tarkempaan tutkimiseen.
5. Jos vanha tiedosto näkyy edelleen, tarkista sivun, lisäosan tai CDN:n välimuisti ja testaa uudelleen.

Luo toistettava julkaisurutiini

Kirjaa teeman tavalliset kansi-, artikkeli- ja pikkukuvakoot. Tallenna kopiot kuvaavilla nimillä ja tarkista mobiiliesikatselu ennen julkaisua. Arvioi asetukset uudelleen teemaa vaihtaessa: kapeaan palstaan tehty kuva ei välttämättä sovi koko sivun levyiseen asetteluun.

Esimerkki: artikkelikuva valmistelusta julkaisuun

Oletetaan, että artikkelin tekstipalsta on 720 pikseliä leveä ja alkuperäinen kuva 3600 × 2400. Säilytä alkuperäinen ja tee samalla rajauksella versiot 720 × 480 ja 1440 × 960. Nämä ovat esimerkkikokoja, eivät WordPressin oletuksia. Vertaa kuvia niiden käyttökoossa ja valitse suurempi vain, jos lisätarkkuudesta on hyötyä. Anna valitulle tiedostolle kuvaava nimi ennen mediakirjastoon lataamista.

Lisää kuva luonnokseen Kuva-lohkolla. Tarkista kuvan tarkkuusasetus erikseen näkyvästä leveydestä: lohkon kaventaminen ei vielä osoita, että ladattava tiedosto pienenee. Tarkista sekä tekstin yhteydessä oleva kuva että mahdollinen artikkelikuva esimerkiksi etusivun nostossa, sillä teema voi rajata ne eri tavoin. Julkaise testisivu ja tarkista todellinen kuvapyyntö puhelimella ja tietokoneella uloskirjautuneena.

Jos korvattu kuva näyttää edelleen väärältä

Jos uusi kuva on sumea, vertaa ladatun version mittoja sen näyttökokoon ennen pakkauslaadun nostamista. Jos vanha kuva näkyy yhä, tarkista pyydetty osoite: eri osoite voi tarkoittaa vanhaa kuvaviittausta, sama osoite puolestaan ohjaa tutkimaan kuvan tai sivun välimuistia. Jos vain yksi pikkukuva on väärä, tarkista juuri sen muodostettu versio.

Varmuuskopioi kuvat ja tietokanta ennen laajoja muutoksia ja kokeile korvaamista yhdellä artikkelilla. Valitse yksi järjestelmä hoitamaan kuvien pakkaaminen ja selvitä, mitä lisäosat tai sisällönjakeluverkko (CDN) tekevät kuville. Säilytä alkuperäinen, valittu julkaisuversio ja lopullinen osoite yhdessä, jotta voit perua huonon tuloksen ilman uusia häviöllisiä muunnoksia.