Kuvan mittojen määrittäminen WordPressissä (GTmetrix-tuote)

Tarvitsee määritä kuvan mitat WordPressissä?


Tämä tarkoittaa, että sinun on lisättävä leveys ja korkeus kuvan HTML tai CSS. Jos kuvassa ei ole määriteltyjä kuvan mittoja, se näkyy virheenä GTmetrix-raportissa ja GTmetrix kertoo sinulle jopa oikean leveyden ja korkeuden, joka kuvaan tulisi lisätä.

Määritä kuvan mitat WordPress

Ainoa mitä sinun täytyy tehdä, on etsiä kuva WordPress-sivustostasi, tarkastella sen HTML-koodia ja lisätä sitten leveys ja korkeus, kuten tämä:

1. Etsi Määritä kuvan mittavirheet GTmetrixistä

GTmetrix näyttää vain yhden testaamasi sivun virheet.

Suorita mikä tahansa sivu GTmetrixin kautta ja katso, joissa kuvissa on määritetyt kuvan mittavirheet.

Määritä kuvan mitat GTmetrix

2 Kopioi kuvan leveys + korkeus GTmetrixistä

Kopioi seuraavaksi kuvan leveys + korkeus (tarjoaa GTmetrix).

GTmetrix-kuvan mitat

3. Etsi kuva verkkosivustoltasi

Nyt meidän on löydettävä kuva WordPress-sivustossasi.

WordPress-visuaalinen editori määrittelee automaattisesti kuvan mitat, joten tässä ei yleensä ole virheitä kuvissa. Jotkin verkkosivustosi alueet eivät kuitenkaan välttämättä määritä kuvan mittoja automaattisesti (mahdollisesti sivunmuodostajat, liukusäätimet, widgetit ja käsinkoodatut HTML tai CSS). Sinun täytyy oppia mikä alue WordPress-sivustosi antaa sinulle virheitä.

Etsi WordPress-widget-kuva

Määritä kuvan mitat -widget

4. Lisää kuvan HTML-muotoon Leveys + Korkeus

Kun olet löytänyt kuvan, katso sen HTML-koodi ja huomaat, että siellä ei ole määritettyä leveyttä + korkeutta. Ainoa mitä sinun on tehtävä, on lisätä nämä HTML: ään seuraavasti: leveys = ”135 ″ korkeus =” 135 ″

Määritä kuvan mitat WordPress

5. Tee sivu uudelleen GTmetrix-sovelluksessa

Tallenna muutokset ja suorita sivu uudelleen GTmetrixin kautta. Kuva, jossa oli virheitä, tulisi korjata.

100% Määritä kuvan mitat

6. Käytä Määritä kuvan mitat -laajennus

Määritä kuvan mitat -laajennus tarkistaa sivustosi kaikille tunnisteet, joista puuttuu leveys + korkeus, ja lisää ne automaattisesti. Minulla ei kuitenkaan ollut menestystä tämän laajennuksen kanssa.

Määritä kuvan mitat -laajennus

7. Korjaa määritetyt kuvan mittasuhteet useilla sivuilla

Näkyykö sama kuva useilla sivuilla / viesteissä ja siinä on määritelty kuvan mittavirheet?

Voit käyttää Parempi haku korvaa -laajennusta korjataksesi logosi, widget-kuvat ja muut useilla sivuilla näkyvät kuvat tarvitsematta käydä niitä erikseen. Se voi säästää aikaa.

Vaihe 1: Asenna Parempi haku Korvaa laajennus.

Vaihe 2: Lisää kuvan HTML-kenttään kuvan HTML ilman määriteltyä leveyttä + korkeutta. Lisää “Korvaa” -kenttään kuvan uusi versio, joka sisältää leveyden + korkeuden.

Vaihe 3: Valitse taulukko (taulukot), jonka haluat laajennuksen skannaavan ja korvaavan kuvan. Voit suorittaa kuiva-ajon, jos haluat testata sen. Muussa tapauksessa poista valinta siitä ja napsauta Suorita haku / korvaa -painiketta.

Parempi haku korvaa kuvat

Vaihe 4: Laajennus suorittaa haun / korvaa kuvan kaikissa valitsemissasi taulukoissa. Kun valmis, Parempi haku korvaa -vaihtoehdon kertoo kuinka monta taulukkoa se skannattiin ja kuinka monta kuvaa se korvattiin.

Muut kuvien optimoinnit

Kirjoitin täydellisen opetusohjelman aiheesta kuvien optimointi WordPressissä Johon sisältyy:

  • Kuvien pakkaaminen
  • Kuvien näyttäminen CDN: n kautta
  • GIF-tiedostojen koon muuttaminen
  • EXIF-tietojen poistaminen
  • Laiska lataa kuvia + videoita
  • Cloudflare Mirage, puolalainen, Hotlink-suojaus

Kuvan optimointi GTmetrixissä

Etsitkö lisää WordPress Speed ​​-opetusohjelmia?
Tässä on muita kirjoittamasi oppaita:

  • Kuinka asentaa WP Rocket (välimuistin laajennus, jota suosittelen)
  • Cloudways vs. SiteGround (kaksi suosittua isäntää)
  • Kuinka sain 100% GTmetrix-pisteet (WordPress Speed ​​Guide)

Minulla on myös mahtava video WordPressin nopeudenoptimoinnista:

Toivon, että tämä opetusohjelma auttoi sinua, etkä enää tarvitse määritellä kuvaulottuvuusvirheitä!

Usein Kysytyt Kysymykset

&# X2705; Kuinka määrität kuvan mitat??

Etsi virhe GTmetrixistä ja huomioi kuvan oikea leveys + korkeus (tarjoaa GTmetrix). Seuraavaksi etsi kuva WordPress-hallintapaneelista ja katso sen HTML-koodi. Lisää seuraavaksi kuvan HTML-muotoon leveys + korkeus. Esimerkki: leveys = ”680 ″ korkeus =” 340 ″

&# X2705; Mistä löydän oikean kuvan koon?

GTmetrix kertoo niiden kuvien oikeat mitat, joilla ei ole määritettyä leveyttä + korkeutta kohdassa Määritä kuvan mitat -kohdassa.

&# X2705; Kuinka optimoit kuvia GTmetrixissä?

Tämä tarkoittaa, että sinun on pakattava kuvia häviöttömästi käyttämällä apuohjelmaa, kuten ShortPixel tai Imagify. Käytän ShortPixelä.

&# X2705; Kuinka palvelet skaalattuja kuvia?

Jos olet palvellut skaalautuvia kuvavirheitä GTmetrixissä, se tarkoittaa, että lähetät kuvia, jotka ovat liian suuria ja joiden koon on oltava oikeissa mitoissa. Liukusäätimet, portfoliokuvat, widget-kuvat, täysleveä blogi -kuvat ja muut verkkosivustosi osiot vaativat tiettyjä mittoja. Kuvien kokoa on muutettava ennen niiden lähettämistä, jotta ne sopivat niihin.

Pudota minulle kommentti, jos sinulla on vielä kysymyksiä.

Kippis,
tom

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map