Hvernig á að bera fram stærðargráðu myndir í WordPress (hlutur í GTmetrix)

Þarftu að þjóna stærðarmyndum í WordPress?


Þetta þýðir bara að þú þarft að breyta stærð stórra mynda til að vera minni.

GTmetrix segir þér hvaða myndir þarf að skala og réttar víddir sem þær ættu að vera klipptar eða breyta stærðinni á. Næst skaltu breyta stærðinni (kvarða) og skipta gömlum myndum út fyrir þær nýju.

Berið fram stærðarstærðar myndir

Þar sem GTmetrix sýnir aðeins ómótaðar myndir fyrir eina síðu sem þú ert að prófa, byrjaðu á því að stækka sitthviður myndir myndir sem birtast á mörgum síðum (lógóinu þínu, hliðarstikunni og fótnum). Næst skaltu keyra aðrar síðurnar þínar í gegnum GTmetrix og kvarða einstakar myndir á þær.

Get ég notað viðbót til að stilla myndir sjálfkrafa?
Ekki líklegt. Þú getur stillt hámarks breidd + hæð í flestum myndauppbótum. En mismunandi svæði á vefsíðunni þinni krefjast sérstakra víddar (myndir þurfa að vera stigstærðar í samræmi við það).

Búðu til svindlblaði fyrir myndvídd.
Besta leiðin til að forðast að þjóna stigstærð myndvillum er að læra stærð hvers svæðis á vefsíðunni þinni (rennibrautir, búnaður, merki, bloggmyndir með fullri breidd osfrv.). Næst skaltu búa til svindlblað með myndvídd sem sýnir stærðir hvers svæðis. Ef þú fylgist með svindlblaði myndar þinnar og breytir stærð mynda áður en þú hleður upp, ættirðu aldrei að þjóna stærðarskekkjum aftur.

1. Finndu stórar myndir í GTmetrix

Keyra síðu í gegnum GTmetrix og skoða þjóna stigstærð myndvillur í PageSpeed ​​flipanum. Stækkaðu ráðleggingar þeirra og þú munt sjá réttar víddir sem hverja mynd ætti að breyta í. Hafðu í huga að GTmetrix sýnir aðeins villur fyrir eina síðu sem þú ert að prófa.

Berið fram stærðarstærðar myndir GTmetrix

Þú getur líka athuga handvirkt hvort myndir eru stigstærðar. Í fyrsta lagi hægrismelltu og afritaðu heimilisfang myndar.

Afritaðu vistfang myndar

Næst skaltu líma myndaslóðina í nýjan vafraflipa. Ef þú berð saman myndina sem sýnd er á vefsíðunni þinni við vefslóð myndarinnar, þá sérðu að það er áberandi mismunandi að stærð. Það þýðir að myndin þarf að minnka. Með því að bera saman tvö afbrigði myndarinnar hlið við hlið geturðu séð hversu stór myndin er í raun og veru (og hvers vegna síðunni sem hún er á gæti hlaðið mjög hægt).

Stærð á móti óstærðri mynd

2. Stærðu myndir til að leiðrétta mál

Sæktu gömlu myndina og opnaðu hana í myndvinnsluforritinu þínu að eigin vali (ég nota GIMP). Stærð og / eða klippa myndina að þeim stærðum sem GTmetrix mælir með. Mörg myndvinnslutæki gera þér kleift að þjappa myndum og fjarlægja EXIF gögn sem gerir myndina hlaðna enn hraðari.

Stærð mynd GIMP

Þú getur einnig klippt og breytt stærð myndanna beint í WordPress:

Stærð mynd í WordPress fjölmiðla ritstjóra

3. Skiptu um gömlu myndina með þeirri nýju

Hladdu upp nýju myndinni þinni á WordPress og settu þá gömlu myndina í staðinn fyrir þá nýju.

Óstærð búnaður mynd

Stærð græju mynd

4. Prófaðu síðuna aftur í GTmetrix

Prófaðu síðuna aftur í GTmetrix og þú ættir ekki að hafa þjónað stærðarskekkjum lengur.

100% þjóna í stærðargráðu myndum

5. Berið fram stærðarstærðar myndir í farsíma

Að þjóna stærðarstærð myndum er mismunandi á farsíma.

Ef þú skráir þig fyrir ókeypis GTmetrix reikning geturðu prófað þinn hreyfanlegur website hraði á Android. Líklega er að þú munt sjá fleiri þjóna stigstærð myndvillum ef vefsíðan þín er ekki að nota aðlagandi myndir, sem þýðir sjálfkrafa að breyta myndum fyrir farsíma (þetta er venjulega gert með viðbót).

1. skref: Keyrið síðuna þína í gegnum Android próf GTmetrix:

GTmetrix farsímapróf

Berið fram stærðarstærðar myndir í farsíma

2. skref: Finndu bakgrunnsstærð farsíma frá GTmetrix:

Hámarksbreidd bakgrunns

3. skref: Settu upp Adaptive Images viðbót frá ShortPixel eða Aðlagandi myndir.

ShortPixel aðlagandi myndir

4. skref: Stilltu mál sem GTmetrix veitir sem bakgrunnur hámarks breidd.

Bakgrunnur Hámarks breidd

5. skref: Endurræstu síðuna þína í gegnum farsímapróf GTmetrix til að ganga úr skugga um að engar villur séu.

GTmetrix farsímapróf

5. skref: Stilltu aðrar stillingar í aðlagandi myndatengingunni þinni (ShortPixel inniheldur WebP stuðning, lata hleðslu myndir, snjalla klippingu og fjarlægja EXIF ​​gögn). Þetta getur hjálpað líka.

6. Breyta stærð mynda á mörgum síðum

Ef þú notar sömu mynd á mörgum síðum og hún þarf að vera stigstærð, getur þú breytt stærð myndarinnar, afritað hana HTML og síðan notað Better Search Replace viðbótina til að laga hana á mörgum síðum.

1. skref: Settu upp Betri leit Skipta um viðbót.

2. skref: Afritaðu HTML mynd gömlu myndarinnar og límdu hana í reitinn „Leitaðu að“ í viðbótinni Better Search Replace. Þú getur notað WordPress textaritill til að sjá HTML myndarinnar. Athugasemd: Betri leit skipta mun aðeins koma í stað myndar ef hún inniheldur nákvæmlega HTML sem þú slærð inn í viðbótina.

3. skref: Afritaðu HTML mynd nýju og límdu hana í reitinn „Skipta út með“.

Berið fram stigstærð mynd HTML

4. skref: Veldu töflurnar (td innlegg) sem þú vilt skanna og hakaðu við þurrskönnun.

5. skref: Smelltu á „Leita / Skiptu út“ og viðbótin kemur í stað gömlu myndarinnar fyrir þá nýju.

7. Búðu til svindlmynd fyrir myndvíddir

Eins og ég gat um áðan ættirðu að mæla stærð allra svæða á vefsíðunni þinni svo þú getir breytt stærð myndanna áður en þú hleður þeim upp. Þú getur fundið þessar víddir í GTmetrix (aðeins ef þú hefur þjónað stærðarskekkjum) eða þú getur líka fundið þær í CSS stílblað þemans.

Dæmi:

  • Rennimyndir: 1900 (w) x 400 (h)
  • Carousel myndir: 115 (w)
  • Ljósmyndir: 414 (w)
  • Myndir af bloggfærslu í fullri breidd: 680 (w)
  • Valdar myndir: 250 (w) x 250 (h)
  • Yoast Facebook OG mynd: 1200 (w) x 628 (h) – skref 11
  • Yoast Twitter OG mynd 1024 (w) x 512 (h) – skref 11

680 pixla breiddarhyrningur

Breidd bloggsins míns er 680px, þannig að hver einasta mynd í þessari færslu hefur verið breytt í 680px.

8. WordPress viðbætur til að þjóna stærðarmyndum

Flestir myndavæðingarviðbætur hafa möguleika á að breyta stærð mynda, en það er þó ekki mjög árangursríkt þegar reynt er að laga villur í GTmetrix þar sem mismunandi svæði á vefsíðunni þinni kalla á mismunandi stærðir. Það er meira til að tryggja að myndirnar þínar séu ekki alveg svakalegar. Eins og Imagify viðbótin segir, ætti hámarksbreiddin ekki að vera minni en stærsta smámynd.

Snilldar

Breyta stærð mynda

Hugsaðu þér

Stærð mynda ímyndaðu þér

EWW fínstillingu mynda

Breyta stærð mynda EWWW

Aðrar myndir hagræðingar

Ég skrifaði fulla námskeið um að fínstilla myndir í WordPress sem felur í sér:

  • Þjappa myndum
  • Borið fram myndir í gegnum CDN
  • Að stærð breytast á GIFS
  • Fjarlægir EXIF ​​gögn
  • Latur hleðsla mynda + myndbönd
  • Cloudflare Mirage, pólska, Hotlink vernd

Hagræðing mynda í GTmetrix

Ertu að leita að fleiri WordPress hraðakennslu?
Hér eru önnur námskeið sem ég skrifaði:

  • Hvernig á að setja upp WP eldflaugar (skyndiminni viðbótina sem ég mæli með)
  • Cloudways vs. SiteGround (tveir helstu gestgjafarnir sem ég mæli með)
  • Hvernig ég fékk 100% GTmetrix stig (WordPress hraðaleiðbeiningar)

Ég er líka með frábært myndband um hraðfínstillingu WordPress:

Algengar spurningar

&# x2705; Get ég notað viðbætur til að þjóna stærðarmyndum?

Nei, mismunandi hlutar vefsíðunnar þinnar krefjast mismunandi myndarvíddar. Þú verður að mæla myndir til að passa þessar einstöku víddir.

&# x2705; Hver er auðveldasta leiðin til að kvarða mynd?

Hladdu niður myndinni, klipptu / breyttu henni í forriti eins og Photoshop eða Gimp og settu þá gömlu myndina í staðinn fyrir þá nýju.

&# x2705; Hvaða myndir ætti ég að byrja að hækka fyrst?

Byrjaðu á því að stækka myndir sem birtast á mörgum síðum eins og lógói þínu, hliðarstiku, myndum, fótum og öðrum.

&# x2705; Hvar finn ég réttar víddir myndar?

GTmetrix segir þér réttar víddir hverrar myndar þegar þú stækkar hlutinn á PageSpeed ​​flipanum.

&# x2705; Hvernig fínstilli ég mynd að fullu?

Mælikvarði það í réttar víddir, þjappaðu þeim og fjarlægðu EXIF ​​gögn með myndaforriti eða viðbæti og vertu síðan viss um að tilgreina stærð víddar (stilltu breidd og hæð myndarinnar) í HTML.

Ég vona að þér hafi fundist þessi kennsla hjálpleg! Ef þú hefur enn þjónað stærðarskekkjum á WordPress vefnum þínum skaltu skilja eftir athugasemd við spurninguna þína og ég mun hjálpa þér við hvort sem er.

Skál,
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