Kako poslužiti umanjene slike u programu WordPress (stavka u GTmetrix)

Trebate poslužiti umanjene slike u WordPressu?


Ovo samo znači da trebate promijeniti veličinu velikih slika kako bi bile manje.

GTmetrix govori vam koje slike treba smanjiti i ispravne dimenzije koje treba obrezati ili smanjiti veličinu. Zatim promijenite veličinu slike (smanjite je veličinom) i zamijenite stare slike novom.

Poslužite umanjene slike

Budući da GTmetrix prikazuje samo neoptimizirane slike za jednu stranicu koju testirate, počnite s skaliranjem cijele web slike slike koje se pojavljuju na više stranica (slike vašeg logotipa, bočne trake i u podnožju). Zatim pokrenite ostale stranice pomoću GTmetrix-a i skalirajte pojedine slike na njima.

Mogu li pomoću dodatka za automatsko skaliranje slika?
Nije vjerojatno. Maksimalnu širinu + visinu možete postaviti u većini dodataka za optimizaciju slike. Ali različita područja vaše web lokacije zahtijevaju određene dimenzije (slike se moraju u skladu s tim smanjiti).

Napravite varalicu za dimenziju slike.
Najbolji način da se izbjegnu pogreške u prikazu umanjenih slika jest naučiti dimenzije svakog područja vaše web stranice (klizači, widgeti, logotip, slike bloga pune širine itd.). Zatim stvorite varalicu za dimenziju slike s popisom dimenzija svakog područja. Ako pratite varalice za dimenzije slike i promijenite veličinu slika prije prijenosa, nikad više ne biste trebali posluživati ​​umanjene pogreške u slikama.

1. Pronađite velike veličine u GTmetrix-u

Pokrenite stranicu kroz GTmetrix i pogledajte pogreške prikazivanja umanjenih slika na kartici PageSpeed. Proširite njihove preporuke i vidjet ćete ispravne dimenzije kojima svaka veličina treba mijenjati veličinu. Imajte na umu da će GTmetrix prikazati pogreške samo za jednu stranicu koju testirate.

Poslužite umanjene slike GTmetrix

Također možete ručno provjerite jesu li slike skalirane. Prvo, desnom tipkom miša kliknite i kopirajte adresu slike.

Kopirajte adresu slike

Zatim zalijepite URL slike na novu karticu preglednika. Ako usporedite sliku prikazanu na vašoj web lokaciji s URL-om slike, vidjet ćete da se primjećuje različita veličina. To znači da sliku treba smanjiti. Uspoređujući dvije varijacije vaše slike bočno, možete vidjeti koliko je slika zapravo velika (i zašto se stranica na kojoj se nalazi može učitati vrlo sporo).

Smanjiva u odnosu na neizmjerenu sliku

2. Promijenite veličinu slika do ispravnih dimenzija

Preuzmite staru sliku i otvorite je u svom alatu za uređivanje slika po izboru (koristim GIMP). Promijenite veličinu i / ili izrežite sliku na dimenzije koje preporučuje GTmetrix. Mnogi alati za uređivanje slika omogućuju vam da komprimirate slike i uklonite ih EXIF podaci zbog čega će se slika još brže učitati.

Skaliranje slike GIMP

Također možete obrezati i promijeniti veličinu slika izravno u WordPressu:

Skaliranje slike u programu za uređivanje medija WordPress

3. Zamijenite staru sliku novom

Prenesite novu sliku u WordPress, a zatim zamijenite staru sliku novom.

Nerazvrstana slika widgeta

Skraćena slika widgeta

4. Ponovno testirajte stranicu u GTmetrix-u

Provjerite stranicu u GTmetrix-u i više vam ne biste trebali poslužiti umanjene pogreške u slikama.

100% posluživanje umanjenih slika

5. Poslužite umanjene slike na mobilnom uređaju

Posluživanje umanjenih slika razlikuje se na mobilnim uređajima.

Ako se prijavite za besplatni račun GTmetrix, možete testirati svoj brzina mobilne web stranice na Androidu. Vjerojatno ćete vidjeti više pogrešaka slike sa umanjenim prikazom ako vaša web lokacija ne koristi prilagodljive slike, što znači da automatski mijenjate veličinu slika za mobilne uređaje (obično se to koristi pomoću dodatka).

Korak 1: Pokrenite web lokaciju putem Android Test-a GTmetrix:

GTmetrix Mobile Test

Poslužite umanjene slike na mobilnom uređaju

Korak 2: Pronađite dimenzije pozadine za mobilne uređaje koje pruža GTmetrix:

Maksimalna širina pozadine

3. korak: S njega instalirajte dodatak Adaptive Images ShortPixel ili Prilagodljive slike.

ShortPixel adaptivne slike

4. korak: Postavite dimenzije koje pruža GTmetrix kao pozadinska maksimalna širina.

Maksimalna širina pozadine

5. korak: Ponovno pokrenite web lokaciju putem GTmetrixovog testa za mobilne uređaje kako biste bili sigurni da nema grešaka.

GTmetrix Mobile Test

5. korak: Konfigurirajte ostale postavke u vašem dodatku za prilagodljive slike (ShortPixel uključuje podršku za WebP, lijeno učitavanje slika, pametno obrezivanje i uklanjanje EXIF ​​podataka). I ove mogu pomoći.

6. Promijenite veličinu slika na više stranica

Ako istu sliku upotrebljavate na više stranica, a nju je potrebno smanjiti, možete promijeniti veličinu slike, kopirati HTML, a zatim upotrijebiti dodatak Better Search Zamijeni da ga popravite na više stranica.

Korak 1: Instalirajte Bolja pretraga Zamijenite dodatak.

Korak 2: Kopirajte HTML stare slike i zalijepite je u polje “Traži za” u dodatku Better Search Replace. Možete koristiti WordPress uređivač teksta da biste vidjeli HTML slike Napomena: Bolja pretraga Zamijeni zamijenit će sliku samo ako sadrži točan HTML koji ste unijeli u dodatak.

3. korak: Kopirajte HTML nove slike i zalijepite je u polje “Zamijeni s”.

Poslužite umanjeni HTML slike

4. korak: Odaberite tablice (npr. Postove) koje želite skenirati i poništite suho skeniranje.

5. korak: Kliknite “Traži / Zamijeni” i dodatak će staru sliku zamijeniti novom.

7. Napravite varalicu za dimenzije slike

Kao što sam spomenula, trebali biste izmjeriti dimenzije svih područja vaše web stranice kako biste mogli promijeniti veličinu slika prije prijenosa. Te dimenzije možete pronaći u GTmetrix-u (samo ako imate posluživanje umanjenih slika u pogreškama) ili ih možete pronaći u CSS tablici stilova vaše teme..

Primjer:

  • Slike klizača: 1900 (š) x 400 (h)
  • Slike na karikama: 115 (w)
  • Slike widgeta: 414 (w)
  • Slike u blogu pune širine: 680 (w)
  • Istaknute slike: 250 (š) x 250 (h)
  • Yoast Facebook OG slika: 1200 (w) x 628 (h) – korak 11
  • Yoast Twitter OG slika 1024 (š) x 512 (h) – korak 11

Pravokutnik širine 680 piksela

Širina mog bloga je 680px, tako da je svaka pojedina slika u ovom postu promijenjena u 680px.

8. WordPress dodaci za posluživanje umanjenih slika

Većina dodataka za optimizaciju slike imaju mogućnost mijenjanja veličine slike, no to nije vrlo učinkovito kada pokušavate ispraviti pogreške u GTmetrixu, jer različita područja vaše web stranice zahtijevaju različite dimenzije. Više je za osiguravanje da vaše slike nisu apsolutno ogromne. Kao što dodatak Imagify kaže, maksimalna širina ne smije biti manja od vaše najveće sličice.

Smush

Promjena veličine slike Smush

Imagify

Promjena veličine slike Zamislite

EWW alat za optimizaciju slike

Promjena veličine slike EWWW

Ostale optimizacije slika

Napisao sam cjelovit tutorial o optimiziranje slika u WordPressu koje uključuje:

  • Stiskanje slika
  • Posluživanje slika putem CDN-a
  • Promjena veličine GIFS-a
  • Uklanjanje EXIF ​​podataka
  • Lijeno učitavanje slika + videozapisa
  • Cloudflare Mirage, poljski, Hotlink zaštita

Optimizacija slike u GTmetrix-u

Tražite više vodiča za brzinu programa WordPress?
Evo i drugih udžbenika koje sam napisao:

  • Kako postaviti WP Rocket (preporučujem dodatak za predmemoriju)
  • Cloudways vs. SiteGround (preporučujem dva glavna domaćina)
  • Kako sam dobio 100% GTmetrix rezultate (WordPress brzi vodič)

Imam i odličan video o optimizaciji brzine programa WordPress:

Često postavljana pitanja

&# X2705; Mogu li koristiti dodatak za posluživanje umanjenih slika?

Ne, različiti odjeljci vaše web stranice traže različite dimenzije slike. Morate prilagoditi slike kako biste odgovarali tim jedinstvenim dimenzijama.

&# X2705; Koji je najlakši način za skaliranje slike?

Preuzmite sliku, obrežite je i promijenite veličinu u programu poput Photoshopa ili Gimpa, a zatim staru sliku zamijenite novom..

&# X2705; Koje slike prvo treba započeti s skaliranjem?

Započnite skaliranjem slika koje se pojavljuju na više stranica poput vašeg logotipa, bočne trake, slike, podnožja i drugih.

&# X2705; Gdje mogu pronaći ispravne dimenzije slike?

GTmetrix vam kaže ispravne dimenzije svake slike kada proširite stavku na kartici PageSpeed.

&# X2705; Kako mogu u potpunosti optimizirati sliku?

Smanjite ga na ispravne dimenzije, komprimirajte i uklonite EXIF ​​podatke pomoću slikovnog programa ili dodatka, a zatim obavezno odredite dimenzije slike (postavite širinu i visinu slike) u HTML-u.

Nadam se da ste pronašli ovaj vodič korisnim! Ako i dalje na vašem web mjestu WordPress imate posluživanje umanjenih slika, ostavite komentar s pitanjem i pomoći ću vam u svakom slučaju.

Živjeli,
mužjak nekih malih životinja

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