Kuidas skaleeritud pilte teenindada WordPressis (üksus GTmetrixis)

Vaja on WordPressis skaleeritud pilte teenindada?


See tähendab lihtsalt, et peate väiksemate piltide suurust muutma.

GTmetrix ütleb teile, milliseid pilte tuleb skaleerida ja milliste õigete mõõtmete järgi tuleks neid kärpida või nende suurust muuta. Järgmisena muutke pildi suurust (muutke suurust) ja asendage vanad pildid uutega.

Esitage skaleeritud pilte

Kuna GTmetrix näitab ainult ühe katsetatava lehe optimeerimata pilte, alustage skaleerimist kogu saidil piltide kujutised, mis ilmuvad mitmel lehel (teie logo, külgriba ja jaluse pildid). Järgmisena juhtige oma teisi lehti läbi GTmetrix ja sirvige nende üksikuid pilte.

Kas ma saan piltide automaatseks mõõtmiseks pistikprogrammi kasutada?
Ei ole tõenäoline. Enamikus pildi optimeerimise pistikprogrammides saate seada maksimaalse laiuse + kõrguse. Kuid teie saidi erinevad piirkonnad nõuavad konkreetseid mõõtmeid (pilte tuleb vastavalt skaleerida).

Kujutise mõõtmete petmise lehe loomine.
Parim viis skaleeritud pildivigade vältimiseks on õppida oma veebisaidi iga ala mõõtmeid (liugurid, vidinad, logo, täislaiusega ajaveebipildid jne). Järgmisena looge kujutise mõõtmete petmise leht, milles loetletakse iga piirkonna mõõtmed. Kui jälgite enne üleslaadimist oma kujutise mõõtmete petturlehte ja vähendate piltide suurust, ei tohiks te kunagi kunagi enam skaleeritud pildivigu näidata.

1. Leidke GTmetrixist ülemõõdulised pildid

Lükake leht läbi GTmetrix ja vaadake vahekaardil PageSpeed ​​kuvatavaid skaleeritud pildivigu. Laiendage nende soovitusi ja näete õigeid mõõtmeid, mille järgi iga pildi suurust tuleks muuta. Pidage meeles, et GTmetrix näitab vigu ainult ühel testitaval lehel.

Esitage skaleeritud pilte GTmetrix

Sa saad ka kontrollige käsitsi, kas pildid on mastaapsed. Esiteks paremklõpsake ja kopeerige pildi aadress.

Kopeeri pildi aadress

Seejärel kleepige pildi URL uude brauseri vahekaardile. Kui võrdlete oma veebisaidil kuvatud pilti oma pildi URL-iga, näete, et seal on märgatava suurusega suurus. See tähendab, et pilti tuleb muuta. Võrreldes oma pildi kahte varianti kõrvuti, näete, kui suur pilt tegelikult on (ja miks võib leht, mida sellel kuvatakse, laadida väga aeglaselt).

Skaalaga või mõõtkavas pilt

2. Muutke piltide suurust vastavalt mõõtmetele

Laadige vana pilt alla ja avage see valitud pildi redigeerimise tööriistas (ma kasutan GIMP). Kujutise suurust muutke ja / või kärpige selle mõõtmete järgi, mida soovitab GTmetrix. Paljud pilditöötlustööriistad võimaldavad pilte tihendada ja eemaldada EXIF-i andmed mis muudab pildi laadimise veelgi kiiremaks.

Kujutise skaleerimine GIMP

Samuti saate pilte kärpida ja nende suurust muuta otse WordPressis:

Kujutise skaleerimine WordPressi meediumiredaktoris

3. Asendage vana pilt uuega

Laadige oma uus pilt üles WordPressi ja seejärel asendage vana pilt uuega.

Vidistamata pilt

Mastabeeritud vidina pilt

4. Kontrollige uuesti lehte GTmetrix

Uuestige leht GTmetrix uuesti ja te ei tohiks enam skaleeritud pildivigu näidata.

100% -lise skaalaga piltide esitamine

5. Esitage mõõtkavas pilte mobiiltelefonil

Skaleeritud piltide esitamine on mobiilis erinev.

Kui registreerute tasuta GTmetrix konto jaoks, saate testida oma mobiilse veebisaidi kiirus Androidis. Võimalik, et kui teie sait ei kasuta, näete rohkem kuvatavate mõõtmetega pildivigu adaptiivsed pildid, mis tähendab mobiilseadmete piltide automaatse suuruse muutmist (seda teeb tavaliselt pistikprogramm).

Samm 1: Käitage oma saiti läbi GTmetrix’i Androidi testi:

GTmetrix mobiilne test

Esitage skaleeritud pilte mobiiltelefonil

2. samm: Otsige üles oma GTmetriksi pakutavad mobiiltelefoni taustmõõtmed:

Maksimaalne taustalaius

3. samm: Installige adaptiivsete piltide pistikprogramm saidilt ShortPixel või Kohanduvad pildid.

ShortPixeli kohanduvad pildid

4. samm: Määrake GTmetrixi pakutavad mõõtmed väärtuseks tausta maksimaalne laius.

Tausta maksimaalne laius

5. samm: Uuendage oma saiti läbi GTmetrixi mobiilsidetesti, veendumaks, et pole vigu.

GTmetrix mobiilne test

5. samm: Muude adaptiivsete piltide pistikprogrammi seadete konfigureerimine (ShortPixel sisaldab WebP-tuge, piltide laiska laadimist, nutikat kärpimist ja EXIF-andmete eemaldamist). Ka need võivad aidata.

6. Muutke piltide suurust mitmel lehel

Kui kasutate sama pilti mitmel lehel ja see peab olema mastaapne, saate pildi suurust muuta, kopeerida selle HTML-i ja kasutada seejärel pluginat Parema otsingu asendamine, et parandada see mitmele lehele.

Samm 1: Installige Parem otsing Asenda pistikprogramm.

2. samm: Kopeerige vana pildi HTML ja kleepige see väljale „Otsi” pistikprogrammi Parem otsing asenda. Võite kasutada WordPressi tekstiredaktor pildi HTML-i vaatamiseks. Märkus. Parema otsingu asendamine asendab pildi ainult siis, kui see sisaldab täpset pluginasse sisestatud HTML-i.

3. samm: Kopeerige uue pildi HTML ja kleepige see väljale Asenda.

Esitage skaleeritud pildi HTML-i

4. samm: Valige skaneeritavad tabelid (nt postitused) ja tühjendage märge kuivskannimine.

5. samm: Klõpsake “Otsi / asenda” ja pistikprogramm asendab vana pildi uuega.

7. Looge pildi mõõtmete petmise leht

Nagu ma varem mainisin, peaksite mõõtma oma veebisaidi kõigi piirkondade mõõtmeid, et saaksite enne nende üleslaadimist piltide suurust muuta. Need mõõtmed leiate GTmetrixist (ainult siis, kui olete esitanud skaleeritud pildivigu) või leiate need ka oma teema CSS-i stiililehel.

Näide:

  • Liugpildid: 1900 (w) x 400 (h)
  • Karussellipildid: 115 (w)
  • Vidinapildid: 414 (w)
  • Täislaiusega ajaveebi postituse pildid: 680 (w)
  • Esiletõstetud pildid: 250 (w) x 250 (h)
  • Yoast Facebook OG pilt: 1200 (w) x 628 (h) – 11. samm
  • Yoast Twitter OG pilt 1024 (w) x 512 (h) – samm 11

680 piksli laiusega ristkülik

Minu ajaveebi laius on 680 pikslit, seega on selle postituse iga pildi suuruseks 680 pikslit.

8. WordPressi pluginad skaleeritud piltide teenindamiseks

Enamikul pildi optimeerimise pistikprogrammidel on piltide suuruse muutmise võimalus, kuid see pole GTmetrixis vigade parandamisel eriti tõhus, kuna teie veebisaidi erinevad piirkonnad nõudsid erinevaid mõõtmeid. See on rohkem selleks, et veenduda, et teie pildid pole absoluutselt tohutud. Nagu pistikprogramm Imagify ütleb, ei tohiks maksimaalne laius olla väiksem kui teie suurim pisipilt.

Smush

Piltide suuruse muutmine Smush

Kujutage ette

Kujutise suuruse muutmine

EWW pildi optimeerija

Piltide suuruse muutmine EWWW

Muud piltide optimeerimine

Kirjutasin täieliku õpetuse teemal piltide optimeerimine WordPressis mis sisaldab:

  • Piltide tihendamine
  • Piltide esitamine CDN-i kaudu
  • GIF-i suuruse muutmine
  • EXIF-andmete eemaldamine
  • Piltide ja videote laadimine on laisk
  • Cloudflare Mirage, Poola, Hotlink Protection

Kujutise optimeerimine GTmetrixis

Otsite rohkem WordPressi kiirõpetusi?
Siin on veel teisi õpetusi, millest ma kirjutasin:

  • Kuidas seadistada WP Rocket (vahemälu plugin, mida soovitan)
  • Cloudways vs. SiteGround (soovitan kahte peamist hosti)
  • Kuidas ma sain 100% GTmetrix hindeid (WordPressi kiirjuhend)

Mul on ka WordPressi kiiruse optimeerimise kohta vinge video:

Korduma kippuvad küsimused

&# x2705; Kas ma saan laiendatud piltide kuvamiseks kasutada pistikprogrammi??

Ei, teie veebisaidi erinevad jaotised nõuavad erinevaid pildi mõõtmeid. Piltide mõõtmed peavad olema nende ainulaadsete mõõtmete jaoks sobivad.

&# x2705; Milline on pildi mõõtmise lihtsaim viis?

Laadige pilt alla, kärpige / muutke selle suurust sellises programmis nagu Photoshop või Gimp, seejärel asendage vana pilt uuega.

&# x2705; Milliseid pilte peaksin alustama kõigepealt mõõtmete muutmisega?

Alustage mitmel lehel ilmuvate piltide, näiteks teie logo, külgriba, piltide, jaluse piltide jm mõõtmete muutmist.

&# x2705; Kust leida pildi õiged mõõtmed??

GTmetrix ütleb teile iga pildi õiged mõõtmed, kui laiendate üksust vahekaardil Lehekiirus.

&# x2705; Kuidas pilti täielikult optimeerida??

Skaala õigeteks mõõtmeteks, tihendage see ja eemaldage EXIF-andmed pildiprogrammi või pistikprogrammi abil, seejärel täpsustage HTML-is pildi mõõtmed (määrake pildi laius ja kõrgus).

Loodetavasti leidsite sellest õpetusest abi! Kui teie WordPressi saidil on endiselt kuvatud skaleeritud pildivigu, jätke mulle kommentaar teie küsimusega ja aitan teid igal juhul, kui saan.

Terviseks,
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