Kuinka asettaa paras WordPress-kuvakoko nopeaa la­taa­mis­ta varten

Si­säl­lön­hal­lin­ta­jär­jes­tel­mä WordPress tarjoaa mah­dol­li­suu­den käyttää yk­sit­täi­siä ku­va­muo­to­ja va­kio­ku­va­ko­ko­jen lisäksi. Esit­te­lem­me tärkeät vaiheet ku­va­ko­ko­jen mu­kaut­ta­mi­seen WordPress 6.0.3:n pe­rus­teel­la.

WordPres­sin ole­tus­ku­va­koot

Verk­ko­si­vus­tol­le upo­tet­tu­jen kuvien tie­dos­to­ko­ko vaikuttaa suuresti sivuston la­taus­no­peu­teen. Op­ti­maa­li­set ku­va­muo­dot ly­hen­tä­vät la­tausai­kaa ja vä­hen­tä­vät pal­ve­li­men muis­ti­kuor­mi­tus­ta. WordPress-si­säl­lön­hal­lin­ta­jär­jes­tel­mä tarjoaa joukon stan­dar­doi­tu­ja ku­va­ko­ko­ja pal­ve­li­mel­la mediaa la­dat­taes­sa.

Tallenna WordPress-kuvat taustalla ja säädä niiden kokoa

Nämä kuvakoot mää­ri­tel­lään WordPress-ase­tuk­sis­sa, joissa niitä voi säätää tietyissä rajoissa. Voit tehdä tämän siir­ty­mäl­lä hal­lin­ta­pa­nee­lis­sa kohtaan Asetukset > Media.

Median la­taa­mi­sen jälkeen me­dia­kir­jas­tos­sa on li­sä­tie­to­ja. Hakemisto on https://mydomain.com/wp-content/uploads/ tai https://mydomain.com/wp-content/uploads/2022/11/ (jos kuukausi- ja vuo­si­pe­rus­tei­set kansiot on otettu käyttöön). Esi­mer­kik­si kuva on seu­raa­vis­sa tie­dos­tois­sa:

• sample-image-1024x683.jpg
• sample-image-150x150.jpg
• näytekuva-1536x1024.jpg
• näytekuva-2048x1365.jpg
• näytekuva-300x200.jpg
• näytekuva-620x413.jpg
• näytekuva-skaalattu.jpg (2 560 x 1 707 pikseliä)
• samplei­ma­ge.jpg (al­ku­pe­räi­nen)

Tämä tarjoaa parhaat kuvakoot useim­mil­le WordPress-sivuille tai -vies­teil­le. Me­dia­kir­jas­toon la­dat­ta­vien kuvien pituus ei saa olla yli 1 920 pikseliä kuvan pitkällä reunalla. Niiden kokoa voidaan muuttaa ennen la­taa­mis­ta il­mai­sil­la ku­van­kä­sit­te­ly­oh­jel­mil­la, jotta vältytään ikäviltä yl­lä­tyk­sil­tä. Tämä koskee WebP-ku­va­muo­toa, jota kaikki selaimet eivät tue na­tii­vis­ti.

Nämä ovat suo­si­tel­tu­ja ku­va­ko­ko­ja WordPress-teemoissa:

Kuvien tarkat mitat riippuvat WordPress-teeman kom­po­nen­teis­ta ja ra­ken­tees­ta. Ne löytyvät kyseisen teeman do­ku­men­taa­tios­ta.

Kuvien koon muut­ta­mi­nen WordPress-me­dia­kir­jas­tos­sa

WordPress-kuvien kokoa voidaan myös säätää. Al­ku­pe­räis­ten kuvien mittojen muut­ta­mi­sen lisäksi kuvia voidaan rajata, kiertää ja kääntää. Jos haluat esi­mer­kik­si luoda liu­kusää­ti­men kuvan me­dia­kir­jas­tos­sa olevasta suu­rem­mas­ta kuvasta, toimi seu­raa­vas­ti:

Vaihe 1: Valitse kuva me­dia­kir­jas­tos­ta ja napsauta ”Muokkaa kuvaa”.

Vaihe 2: Aseta muok­kaus­me­ne­tel­mä ja koko

On syytä huomata, että ra­jaus­pai­ni­ket­ta on käy­tet­tä­vä kahdesti: ensin toiminnon ak­ti­voi­mi­sek­si ja sitten toisen kerran kuvan mittojen aset­ta­mi­sen jälkeen toiminnon suo­rit­ta­mi­sek­si.

Vaihe 3: Tallenna kuva me­dia­kir­jas­toon

Skaalatun kuvan tal­len­ta­mi­sen jälkeen la­taus­kan­sio sisältää tiedoston

• esi­kat­se­lu­ku­va-skaalattu-e1667121439976.jpg

viidessä muussa muodossa, joille on annettu au­to­maat­ti­ses­ti tunnus …-e1667121439976. Uudet kuvakoot voidaan valita Gutenberg-editorin me­dia­kir­jas­tos­ta, kun niitä lisätään tai vaih­de­taan. Kuvan pik­se­li­mi­tat ovat myös saa­ta­vil­la siellä.

Säädä kuvan kokoa, kun lisäät sen WordPress-sisältöön

WordPress-me­dia­kir­jas­ton kuvat lisätään sisältöön. Tämä mah­dol­lis­taa koon sää­tä­mi­sen jäl­ki­kä­teen laajasti. WordPress Gutenberg -editori tarjoaa paljon laajemmat mah­dol­li­suu­det kuin klassinen TinyMCE-editori.

Jos haluat tallentaa mu­kau­te­tut ase­tuk­se­si myöhempää käyttöä varten, voit käyttää Gu­ten­ber­gin “Lisää uu­del­leen­käy­tet­tä­viin lohkoihin” -osiota ja myös lukita sen va­hin­gos­sa ta­pah­tu­via muutoksia vastaan. Tämä säästää huo­mat­ta­vas­ti työtä, jos julkaiset usein uusia viestejä.

Am­mat­ti­koh­tai­sil­la si­vus­toil­la, kuten va­lo­ku­vaa­jan verk­ko­si­vuil­la, saatetaan tarvita muita ku­va­muo­to­ja, jotta visiosi tulee täy­del­li­ses­ti esiin. Op­paas­sam­me”Kuvien pak­kaa­mi­nen”on li­sä­oh­jei­ta kuvien koon sää­tä­mi­seen, esi­mer­kik­si WordPress-galleria-laa­jen­nuk­sia varten.

Poista WordPres­sin ole­tus­ku­va­koot käytöstä

Helpoin tapa poistaa ole­tus­ku­va­koot käytöstä on käyttää Disable Media Sizes - laa­jen­nus­ta. Sen ase­tuk­sis­sa on lueteltu myös kaikki seitsemän luotua ku­va­muo­toa.

Pluginin asetusten mukaan va­lit­se­mat­to­mat formaatit eivät tule lainkaan tuo­te­tuik­si. Al­ku­pe­räi­sen kuvan la­taa­mis­ta ei voi “sammuttaa”. Tämä on etu, jos haluat myöhemmin tuottaa muita for­maat­te­ja.

Optimoi kuvat WordPres­sil­le en­ti­ses­tään laa­jen­nuk­sil­la

Käy­tän­nös­sä kuvia käytetään pää­asias­sa JPG- ja PNG-muodoissa. Näiden ku­va­muo­to­jen tie­dos­to­ko­ko­ja voidaan säätää edelleen ku­van­kä­sit­te­ly­oh­jel­mil­la. Pho­tos­ho­pis­sa on laatuun liittyvä kysely tal­len­net­taes­sa tai viedessä. Tämän me­ne­tel­män haittana on, että jokainen kuva on kä­si­tel­tä­vä erikseen ja ladattava sitten. Laa­jen­nuk­set ovat tyy­lik­kääm­pi ratkaisu. Niissä on usein laaja valikoima toi­min­to­ja, joten on suo­si­tel­ta­vaa tutustua käytetyn laa­jen­nuk­sen do­ku­men­taa­tioon tarkasti.

Suuri asen­nus­mää­rä ja hyvät arviot ovat esi­mer­kik­si seu­raa­vil­la WordPress-laa­jen­nuk­sil­la, joilla voi säätää WordPress-tie­dos­to­jen ja kuvien kokoa:

• EWWW Image Optimizer: Tukee seuraavia tie­dos­to­muo­to­ja: JPG, PNG, GIF, PDF, WebP, SVG
• TinyPNG: Tukee JPG-, PNG- ja WebP-tie­dos­to­muo­to­ja
• Imagify: Tukee JPG-, PNG-, PDF-, GIF- ja WebP-tie­dos­to­muo­to­ja
• Re­ge­ne­ra­te Thumb­nails: ei ole päi­vi­tet­ty jo jonkin aikaa
• Image Re­ge­ne­ra­te & Select Crop: samoin

Muista ennen pluginien ko­kei­le­mis­ta: WordPress-var­muus­ko­pio suojaa tietojen me­ne­tyk­sel­tä, jos jokin menee todella pieleen.

Yh­teen­ve­to: Optimoi WordPress-kuvien koot

WordPres­sin si­sään­ra­ken­ne­tuil­la työ­ka­luil­la voidaan jo saavuttaa monia op­ti­maa­li­sia ku­va­ko­ko­ja. Plugin-laa­jen­nus­ten avulla on saa­ta­vil­la vielä laajempia mah­dol­li­suuk­sia. WordPress-sivuston PHP-koodiin puut­tu­mi­nen tulisi jättää oh­jel­moin­nin am­mat­ti­lai­sil­le. Ja lopuksi: pidä kuvien ha­ku­ko­neop­ti­moin­ti mielessä op­ti­moin­tia teh­des­sä­si.