Kako strežiti pomanjšane slike v WordPressu (element v GTmetrix)

Morate prikazati pomanjšane slike v WordPressu?


To samo pomeni, da morate spremeniti velikost velikih slik, da bodo manjše.

GTmetrix pove, katere slike je treba spremeniti in katere pravilne dimenzije naj bodo obrezane ali spremenjene. Nato spremenite velikost slike (spremenite v velikost) in stare slike zamenjajte z novimi.

Vročite pomanjšane slike

Ker GTmetrix prikazuje samo neoptimizirane slike za eno samo stran, ki jo preizkušate, začnite z skaliranjem po vsem svetu slike slike, ki se pojavljajo na več straneh (slike vašega logotipa, stranske vrstice in podnožja). Nato zaženite druge strani s pomočjo GTmetrix in na teh spremenite lestvico posameznih slik.

Ali lahko uporabljam vtičnik za samodejno spreminjanje slik?
Verjetno ne. V večini vtičnikov za optimizacijo slike lahko nastavite največjo širino + višino. Toda različna področja vašega spletnega mesta zahtevajo določene dimenzije (slike je treba ustrezno spremeniti).

Ustvari varalni list slike.
Najboljši način, da se izognete napakam s prikazom pomanjšanih slik, je, da se naučite dimenzij vsakega območja svojega spletnega mesta (drsniki, gradniki, logotip, slike spletnega dnevnika itd.). Nato ustvarite valjčni list s dimenzijami slike, v katerem bodo navedene dimenzije vsakega območja. Če pred nalaganjem sledite vaši obliki slik in spremenite velikost slik, nikoli več ne bi smeli prikazati pomanjšanih napak na sliki.

1. V GTmetrix poiščite predimenzionirane slike

Zaženite stran skozi GTmetrix in si na zavihku PageSpeed ​​ogledajte napake v prikazanih slikah. Razširite njihova priporočila in videli boste pravilne dimenzije, na katere je treba spremeniti velikost slike. Upoštevajte, da bo GTmetrix prikazoval napake samo za eno samo stran, ki jo preizkušate.

Prikažite slike z meritvami GTmetrix

Lahko tudi ročno preverite, ali so slike pomanjšane. Najprej z desno miškino tipko kliknite in kopirajte naslov slike.

Kopiraj naslov slike

Nato prilepite URL slike na nov zavihek brskalnika. Če primerjate sliko, prikazano na vašem spletnem mestu, z vašim URL-jem slike, boste videli, da je opazna različna velikost. To pomeni, da je treba sliko pomanjšati. Če primerjate dve različici svoje slike ob strani, lahko vidite, kako velika je slika v resnici (in zakaj se stran, na kateri se nahaja, nalaga zelo počasi).

Slika s pomanjšanimi in nerazvrščenimi sliki

2. Velikost slike popravite na dimenzije

Prenesite staro sliko in jo odprite v svojem izbranem orodju za urejanje slik (uporabljam GIMP). Velikost slike in / ali obrežite sliko, ki jo priporoča GTmetrix. Številna orodja za urejanje slik omogočajo stiskanje slik in odstranjevanje EXIF podatki zaradi česar bo slika še hitrejša.

Prilagoditev slike GIMP

Slike lahko tudi obrežete in spremenite velikost neposredno v WordPressu:

Raztezanje slike v urejevalniku medijev WordPress

3. Zamenjajte staro sliko z novo

Naložite novo sliko v WordPress, nato pa staro sliko zamenjajte z novo.

Nerazvrščena slika pripomočka

Slika pomanjšanega gradnika

4. Ponovno preizkusite stran v GTmetrix

Preizkusite stran v GTmetrix-u in ne bi smeli več prikazovati napak na sliki.

100% servirajte pomanjšane slike

5. Prikažite pomanjšane slike na mobilnem telefonu

Prikazovanje pomanjšanih slik je v mobilnih napravah drugačno.

Če se prijavite za brezplačni račun GTmetrix, lahko preizkusite svoj hitrost mobilnega spletnega mesta v sistemu Android. Verjetno boste videli več napak pri prikazu slike, če vaše spletno mesto ne uporablja prilagodljive slike, kar pomeni samodejno spreminjanje velikosti slik za mobilne naprave (to običajno počne vtičnik).

Korak 1: Zaženite svoje spletno mesto s pomočjo GTmetrixovega preizkusa Android:

GTmetrix Mobile Test

Servirajte pomanjšane slike na mobilnem telefonu

2. korak: Poiščite svoje dimenzije ozadja za mobilne naprave, ki jih ponuja GTmetrix:

Največja širina ozadja

3. korak: Iz njega namestite vtičnik Adaptive Images ShortPixel ali Prilagodljive slike.

Prilagodljive slike ShortPixel

4. korak: Nastavite mere, ki jih ponuja GTmetrix kot največja širina ozadja.

Največja širina ozadja

5. korak: Svoje spletno mesto znova prenesite z GTmetrixovim testom za mobilne naprave in se prepričajte, da ni napak.

GTmetrix Mobile Test

5. korak: Konfigurirajte druge nastavitve v vtičniku za prilagodljive slike (ShortPixel vključuje podporo za WebP, leno nalaganje slik, pametno obrezovanje in odstranjevanje podatkov EXIF). Tudi te lahko pomagajo.

6. Velikost slike na več straneh

Če uporabljate isto sliko na več straneh in jo je treba spremeniti v velikost, lahko spremenite velikost slike, kopirate HTML in uporabite vtičnik Better Search Replace, da ga popravite na več straneh.

Korak 1: Namestite Boljše iskanje Zamenjajte vtičnik.

2. korak: Kopirajte HTML stare slike in jo prilepite v polje »Išči« v vtičnik Better Search Replace. Lahko uporabite WordPress urejevalnik besedil da si ogledate HTML slike. Opomba: Boljše iskanje zamenjaj bo sliko nadomestilo le, če vsebuje natančen HTML, ki ga vnesete v vtičnik.

3. korak: Kopirajte HTML nove slike in jo prilepite v polje »Zamenjaj s«.

Vročite pomanjšan HTML

4. korak: Izberite tabele (npr. Objave), ki jih želite optično prebrati, in počistite potrditveno polje.

5. korak: Kliknite »Išči / zamenjaj« in vtičnik bo staro sliko zamenjal z novo.

7. Ustvarite obrazce Image Dimensions Cheat Sheet

Kot sem že omenil, morate izmeriti dimenzije vseh področij vašega spletnega mesta, da lahko spremenite velikost slik, preden jih naložite. Te dimenzije najdete v GTmetrixu (samo če ste prikazali pomanjšane napake na sliki) ali pa jih najdete tudi v tabeli CSS sloga teme.

Primer:

  • Slike drsnikov: 1900 (š) x 400 (h)
  • Slike vrtiljaka: 115 (w)
  • Slike gradnikov: 414 (w)
  • Slike na spletnem dnevniku celotne širine: 680 (w)
  • Predstavljene slike: 250 (š) x 250 (h)
  • Yoast Facebook OG slika: 1200 (š) x 628 (h) – korak 11
  • Slika Yoast Twitter OG 1024 (š) x 512 (h) – korak 11

Širina pravokotnika 680 pik

Širina mojega spletnega dnevnika je 680 slikovnih pik, tako da je bila vsaka posamezna slika v tej objavi spremenjena na 680 slikovnih pik.

8. WordPress vtičniki za prikaz pomanjšanih slik

Večina vtičnikov za optimizacijo slik ima možnost spreminjanja velikosti slik, vendar to ni zelo učinkovito, ko poskušate popraviti napake v GTmetrixu, saj različna področja vašega spletnega mesta zahtevajo različne dimenzije. Bolj je to, da se prepričamo, da vaše slike niso izjemno velike. Kot pravi vtičnik Imagify, največja širina ne sme biti manjša od vaše največje sličice.

Smash

Velikost slike Smush

Predstavljajte si

Velikost slike Predstavljajte si

EWW Optimizer slike

Velikost slike EWWW

Druge optimizacije slik

Napisal sem celoten tutorial optimiziranje slik v WordPressu kar vsebuje:

  • Stiskanje slik
  • Vročanje slik prek CDN-ja
  • Spreminjanje velikosti GIFS
  • Odstranjevanje podatkov EXIF
  • Leno nalaganje slik + videoposnetkov
  • Cloudflare Mirage, poljska, Hotlink Protection

Optimizacija slike v GTmetrix

Iščete več WordPress Vadnice za hitrost?
Tu so še druge vadnice, ki sem jih napisal:

  • Kako nastaviti WP Rocket (priporočam vtičnik predpomnilnika)
  • Cloudways vs. SiteGround (priporočam dva glavna gostitelja)
  • Kako sem dosegel 100% ocene GTmetrix (Vodnik za hitrost WordPressa)

Na voljo imam tudi super video o optimizaciji hitrosti programa WordPress:

Pogosto zastavljena vprašanja

&# x2705; Ali lahko uporabim vtičnik za serviranje pomanjšanih slik?

Ne, različni razdelki vašega spletnega mesta zahtevajo različne dimenzije slike. Slike morate prilagoditi lestvici, da ustrezajo edinstvenim dimenzijam.

&# x2705; Kako najlažje prilagodite sliko?

Prenesite sliko, obrežite / spremenite velikost v programu, kot sta Photoshop ali Gimp, nato pa staro sliko zamenjajte z novo.

&# x2705; Katere slike naj najprej začnem skalirati?

Začnite s povečanjem slik, ki se pojavljajo na več straneh, kot so vaš logotip, stranska vrstica, slike, podnožja in druge.

&# x2705; Kje najdem pravilne dimenzije slike?

GTmetrix vam pove pravilne dimenzije vsake slike, ko razširite element na zavihku PageSpeed.

&# x2705; Kako v celoti optimiziram sliko?

Spremenite ga na pravilne dimenzije, ga stisnite in odstranite podatke EXIF ​​s pomočjo slikovnega programa ali vtičnika, nato pa se prepričajte, da v HTML nastavite dimenzije slike (nastavite širino in višino slike).

Upam, da ste ugotovili, da je ta vadnica koristna! Če na svojem mestu WordPress še vedno imate napake v prikazu slike, pustite komentar s svojim vprašanjem in vseeno vam bom pomagal..

Na zdravje,
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