miten kuvien oikea koko WordPress (PageSpeed Insights + GTmetrix Item)

jos suoritit sivustosi PageSpeed Insightsin tai Gtmetrixin kautta, saatat nähdä suosituksen kuvien oikeasta koosta.

jos haluat koota kuvat oikein WordPressissä, laajenna kohde PageSpeed Insightsiin ja katso, mitkä kuvat ovat liian suuria. Kokoa ne oikeisiin mittoihin (löytyy GTmetrix legacy-raportistasi). Korvaa lopuksi vanha kuva uudella. Testaa sivustosi uudelleen ja sen pitäisi olla 100%.

oikean kokoiset kuvat

koska PageSpeed Insights näyttää vain optimoimattomia kuvia testattavalta yksittäiseltä sivulta, Aloita muokkaamalla sivustossasi näkyvien sitewide-kuvien kokoa (logo, sivupalkki ja alatunnistekuvat). Seuraavaksi suorita muut sivut PageSpeed Insightsin kautta ja kokoa kuviasi niillä.

Voinko käyttää liitännäistä kuvien muuttamiseen automaattisesti?
Ei todennäköistä. Voit asettaa enimmäisleveyden + korkeuden useimmissa kuvan optimointilaajennuksissa. Mutta sivustosi eri alueet vaativat erityisiä ulottuvuuksia (kuvien kokoa on muutettava vastaavasti).

luo image dimension lunttilappu.
paras tapa välttää oikean kokoiset kuvavirheet on opetella verkkosivustosi eri alueiden mitat (liukusäätimet, widgetit, logo, Täysleveät blogikuvat jne.). Seuraavaksi luo kuva ulottuvuus lunttilappu kunkin alueen mitat. Jos seuraat Kuvan mitat lunttilappu ja kokoa kuvia ennen lähettämistä, sinun ei pitäisi koskaan olla oikein koko kuvan virheitä.

Etsi Ylisuuret kuvat GTmetrix Legacy-raporteista

GTmetrix legacy-raportit näyttävät oikeat mitat suurille kuvillesi.

Luo ilmainen GTmetrix-tili ja siirry tileille > oletusarvo vanhoille raporteille > Ota käyttöön.

aja sivu Gtmetrixin läpi ja katso ”palvele skaalattuja kuvia” – osio. Laajentaa suosituksia ja näet oikeat mitat nämä kuvat pitäisi pienentää.

tarjoile skaalattuja kuvia GTmetrix

voit myös manuaalisesti tarkistaa, ovatko kuvat liian suuria. Napsauta hiiren oikealla painikkeella kuvaa > kopioi kuvaosoite.

Kopioi Kuvaosoite

liitä kuvan URL seuraavaksi uuteen selaimen välilehteen. Jos vertaat kuvan näkyy sivustossasi kuvan URL, näet on huomattava ero niiden koot. Se tarkoittaa, että kuvaa pitää skaalata. Vertaamalla kahta kuviesi variaatiota vierekkäin, näet kuinka suuri kuva todellisuudessa on (ja miksi sivu, jolla se on, saattaa latautua hitaasti).

skaalattu vs Muokkaamaton Kuva

kokoa kuvat korjataksesi mitat

Lataa vanha kuva ja avaa se valitsemassasi kuvankäsittelytyökalussa (käytän GIMP). Muuta kuvan kokoa ja / tai rajaa se Gtmetrixin suosittelemiin mittoihin. Joidenkin kuvankäsittelytyökalujen avulla voit pakata kuvia ja poistaa EXIF-tietoja, jotka tekevät kuvan latauksesta entistä nopeampaa.

skaalaus Image GIMP

voit rajata ja muuttaa kuvia myös suoraan WordPressissä:

skaalaus Kuva WordPress Media Editor

korvaa vanha Kuva uudella

Lataa uusi kuva WordPress, korvaa vanha kuva uudella.

ehjä Vekotinkuva

Scaled Widget Kuva

testaa sivu GTmetrix

testaa sivu GTmetrix (tai PageSpeed Insights) ja virhe on korjattava.

palvele skaalattuja kuvia WordPress

oikean kokoisia kuvia mobiilissa

kuvien oikea mitoitus on erilainen mobiilissa.

jos rekisteröidyt premium GTmetrix-tilille, voit testata mobiilinopeuttasi Androidilla. Mahdollisuudet ovat näet enemmän palvella skaalattu kuva virheitä, jos sivusto ei käytä mukautuvia kuvia, mikä tarkoittaa automaattisesti koon kuvia mobiililaitteille (tämä tapahtuu yleensä plugin).

Vaihe 1: Suorita sivustosi Gtmetrixin Android-testin kautta:

GTmetrix-Mobiilitesti

palvele skaalattuja kuvia mobiililaitteella

Vaihe 2: Etsi mobiilitaustan mitat Gtmetrixin avulla:

suurin Taustaleveys

Vaihe 3: Asenna Adaptiivinen kuvanliitännäinen (suosittelen Shortpixeliä tai adaptiivisia kuvia).

ShortPixel Adaptiiviset kuvat

Vaihe 4: Aseta Gtmetrixin antamat mitat taustan enimmäisleveydeksi.

taustan maksimileveys

Vaihe 5: Tarkista sivustosi Gtmetrixin mobiilitestillä, ettei siinä ole virheitä.

GTmetrix Mobile Test

Vaihe 5: Määritä muut asetukset adaptiivisten kuvien liitännäisessä (ShortPixel sisältää WebP-tuen, laiskat latauskuvat, älykkään rajauksen ja EXIF-tietojen poistamisen). Nämäkin voivat auttaa.

muuta kuvien kokoa useilla sivuilla

jos käytät samaa kuvaa useilla sivuilla/viroissa ja se on korjattava, voit muuttaa kuvan kokoa, kopioida sen HTML: n ja korjata sen sitten käyttämällä parempaa Hakukorvausliitännäistä useilla sivuilla.

Vaihe 1: Asenna parempi Hakukorvausliitännäinen.

Vaihe 2: Kopioi vanhan kuvan HTML ja liitä se ”Etsi” – kenttään paremman haun korvaa-liitännäisessä. Voit käyttää WordPress tekstieditori nähdä kuvan HTML. Huomautus: Parempi haku korvaa vain korvaa kuvan, jos se sisältää tarkan HTML syötät plugin.

parempi haku korvaa kuvat

Vaihe 3: Kopioi uuden kuvan HTML ja liitä se ”Korvaa” – kenttään.

palvele skaalattu Kuva HTML

Vaihe 4: Valitse taulukot (esim. viestit) haluat skannattu ja poista ”suorita kuiva skannaus.”

Vaihe 5: Klikkaa ”Search / Replace” ja liitännäinen korvaa vanhan kuvan uudella.

luo Image Dimensions Cheat Sheet

kuten aiemmin mainitsin, sinun pitäisi mitata kaikkien verkkosivustosi alueiden mitat, jotta voit muuttaa kuvien kokoa ennen niiden lähettämistä. Löydät nämä mitat GTmetrix (vain jos sinulla on oikein koko kuvan virheitä) tai voit myös löytää ne teeman CSS tyylisivu.

esimerkki:

  • Liukukuvat: 1900(w) x 400(h)
  • Karusellikuvat: 115(w)
  • Widget-kuvat: 414 (w)
  • koko leveys blogikirjoitus kuvat: 680 (w)
  • : 250 (w) x 250 (h)
  • Yoast Facebook OG image: 1200(w) x 628(h) – step 11
  • Yoast Twitter OG image 1024(w) x 512(h) – step 11

680 pikselin levyinen suorakulmio

blogini leveys on 680px, joten jokainen tämän postauksen Kuva on muutettu 680px: ksi.

WordPress-liitännäiset, joilla kuvat kootaan oikein

useimmissa kuvan optimointiliitännäisissä on mahdollisuus muuttaa kuvien kokoa, mutta tämä ei ole kovin tehokasta Gtmetrixin virheiden korjaamisessa, koska verkkosivustosi eri alueet vaativat eri mittoja. Se on enemmän varmistaa, että kuvat eivät ole aivan valtava. Kuten Imagify plugin sanoo, Suurin leveys ei saa olla pienempi kuin suurin pikkukuva.

Smush

kuvien koon muuttaminen Smush

kuvanmuutos

kuvien koon muuttaminen kuvanmuutos

EWW Image Optimizer

kuvien koon muuttaminen 1116>

muita tapoja optimoida kuvia

kirjoitin täydellisen opetusohjelman kuvien optimoinnista WordPressissä, joka sisältää:

  • kuvien pakkaaminen
  • kuvien palveleminen CDN: ltä
  • GIF-kuvien koon muuttaminen
  • Exif-tietojen poistaminen
  • laiskat latauskuvat + videot
  • Cloudflare Mirage, Polish, Hotlink Protection

GTmetrix Image Optimizations

etsitkö lisää Nopeusoptimointeja?
tässä ovat muut oppaat, jotka kirjoitin:

  • WordPress Speed Guide (Tämä opas kesti ikuisesti)
  • miten asentaa WP Rocket (välimuisti plugin suosittelen)

minulla on myös mahtava video WordPress nopeus optimointi:

Usein kysyttyjä kysymyksiä

miten korjaan oikean kokoiset kuvat?

Lataa kuva, kokoa se GTmetrix legacy-raporttien antamien mittojen mukaan ja korvaa vanha kuva uudella.

Voinko käyttää plugin oikein kokoa kuvia?

ei, sivustosi eri osissa vaaditaan eri kuvaulottuvuuksia. Sinun täytyy skaalata kuviasi sopimaan näihin ainutlaatuisiin ulottuvuuksiin.

mitkä kuvat minun pitäisi aloittaa koon uudelleen ensimmäinen?

Aloita skaalaamalla kuvia, jotka näkyvät useilla sivuilla, kuten logosi, sivupalkin ja alatunnisteen kuvat.

Mistä löydän kuvan oikeat mitat?

GTmetrix legacy-raportit kertovat jokaisen kuvan oikeat mitat, kun laajennat kohdetta PageSpeed-välilehdessä.

Vastaa

Sähköpostiosoitettasi ei julkaista.