Cum se servesc imagini la scară în WordPress (articol în GTmetrix)

Trebuie să serviți imagini scalate în WordPress?


Acest lucru înseamnă doar că trebuie să redimensionați imaginile mari pentru a fi mai mici.

GTmetrix vă spune ce imagini trebuie scalate și dimensiunile corecte la care trebuie decupate sau redimensionate. Apoi, redimensionați (scalați) imaginea și înlocuiți imaginile vechi cu cele noi.

Serviți imagini la scară largă

Deoarece GTmetrix afișează doar imagini neautorizate pentru singura pagină pe care o testați, începeți prin scalare sitewide imagini cu imagini care apar pe mai multe pagini (logo-ul, bara laterală și imaginile de subsol). Apoi, executați celelalte pagini prin GTmetrix și scalați imagini individuale pe acele.

Pot folosi un plugin pentru a scala automat imaginile?
Probabil nu. Puteți seta o lățime maximă + înălțime în majoritatea pluginurilor de optimizare a imaginii. Dar diferite zone ale site-ului dvs. apelează la dimensiuni specifice (imaginile trebuie să fie dimensionate în consecință).

Creați o foaie de înșelare a dimensiunii imaginii.
Cel mai bun mod de a evita erorile de imagine la scară este să aflați dimensiunile fiecărei zone a site-ului dvs. web (glisiere, widget-uri, logo, imagini de blog cu lățime completă etc.). Apoi, creați o foaie de înșelare a dimensiunii imaginii care prezintă dimensiunile fiecărei zone. Dacă urmăriți dimensiunea imaginii pentru a înșela foaia de înșelăcire și redimensionați imaginile înainte de a le încărca, nu ar trebui să mai difuzați niciodată erori de imagine scalate.

1. Găsiți imagini supradimensionate în GTmetrix

Rulați o pagină prin GTmetrix și vizualizați erorile de imagine la scară din fila PageSpeed. Extindeți-le recomandările și veți vedea dimensiunile corecte cu care ar trebui redimensionată fiecare imagine. Rețineți că GTmetrix va afișa doar erori pentru pagina singură pe care o testați.

Servește imagini la scară GTmetrix

Poti de asemenea verificați manual dacă imaginile sunt scalate. În primul rând, faceți clic dreapta și copiați adresa imaginii.

Copiați adresa imaginii

Apoi, lipiți adresa URL a imaginii într-o nouă filă browser. Dacă comparați imaginea afișată pe site-ul dvs. web cu adresa URL a imaginii, veți vedea că există o dimensiune vizibilă diferită. Aceasta înseamnă că imaginea trebuie amplificată. Comparând cele două variante ale imaginii dvs. unul lângă altul, puteți vedea cât de mare este de fapt imaginea (și de ce pagina pe care este afișată s-ar putea încărca foarte lent).

Imagine la scară și ne scalată

2. Redimensionați imaginile pentru a corecta dimensiunile

Descărcați imaginea veche și deschideți-o în instrumentul dvs. de editare a imaginilor la alegere (eu folosesc GIMP). Redimensionați și / sau decupați imaginea la dimensiunile recomandate de GTmetrix. Multe instrumente de editare a imaginilor vă permit să comprimați imagini și să le eliminați Date EXIF ceea ce va face ca imaginea să se încarce și mai repede.

Scalare imagine GIMP

De asemenea, puteți decupa și redimensiona imaginile direct în WordPress:

Scalarea imaginii în WordPress Media Editor

3. Înlocuiți imaginea veche cu cea nouă

Încărcați-vă noua imagine pe WordPress, apoi înlocuiți imaginea veche cu cea nouă.

Imagine nesigurată pentru widget

Imagine la widget la scară

4. Reintroduceți pagina în GTmetrix

Reintroduceți pagina în GTmetrix și nu ar trebui să mai difuzați erori de imagine la scară.

100% Servește imagini la scară largă

5. Serviți imagini la scară pe mobil

Servirea imaginilor scalate este diferită pe mobil.

Dacă vă înscrieți pentru un cont GTmetrix gratuit, vă puteți testa viteza site-ului mobil pe Android. Probabil că veți vedea mai multe erori de imagine reduse dacă site-ul dvs. nu îl utilizează imagini adaptive, ceea ce înseamnă redimensionarea automată a imaginilor pentru dispozitive mobile (acest lucru este de obicei realizat de un plugin).

Pasul 1: Rulați site-ul dvs. prin Testul Android al GTmetrix:

Test mobil GTmetrix

Serviți imagini la scară pe mobil

Pasul 2: Găsiți dimensiunile de fundal mobil oferite de GTmetrix:

Lățimea maximă a fundalului

Pasul 3: Instalați un plugin pentru imagini adaptive din ShortPixel sau Imagini adaptive.

Imagini adaptive ShortPixel

Pasul 4: Setați dimensiunile furnizate de GTmetrix ca lățimea maximă a fundalului.

Lățime maximă fundal

Pasul 5: Reexecutați-vă site-ul prin testul mobil al GTmetrix pentru a vă asigura că nu există erori.

Test mobil GTmetrix

Pasul 5: Configurați alte setări în pluginul dvs. de imagini adaptive (ShortPixel include suport WebP, imagini de încărcare leneșe, decupaje inteligente și eliminarea datelor EXIF). Acestea pot ajuta și ele.

6. Redimensionați imaginile pe mai multe pagini

Dacă utilizați aceeași imagine pe mai multe pagini și trebuie să fie redusă la dimensiune, puteți redimensiona imaginea, copia HTML-ul, apoi utilizați pluginul Better Search Înlocuire pentru a o repara pe mai multe pagini.

Pasul 1: Instalați dispozitivul Mai bine pluginul Înlocuiește căutarea.

Pasul 2: Copiați HTML-ul vechii imagini și lipiți-l în câmpul „Căutați” din pluginul Better Search Înlocuire. Puteți utiliza funcția Editor de texte WordPress pentru a vedea HTML-ul imaginii. Notă: O mai bună înlocuire a căutării va înlocui o imagine doar dacă conține HTML exact pe care îl introduceți în plugin.

Pasul 3: Copiați HTML-ul noii imagini și lipiți-l în câmpul „Înlocuiți cu”.

Servește imaginea HTML la scară

Pasul 4: Selectați tabelele (de ex. Postări) pe care doriți să le scanați și debifați scanarea uscată.

Pasul 5: Faceți clic pe „Căutare / Înlocuire” și pluginul va înlocui imaginea veche cu cea nouă.

7. Creați o foaie de înșelare pentru dimensiuni de imagine

După cum am menționat anterior, ar trebui să măsurați dimensiunile tuturor zonelor site-ului dvs. web, astfel încât să puteți redimensiona imaginile înainte de a le încărca. Puteți găsi aceste dimensiuni în GTmetrix (numai dacă ați difuzat erori de imagine la scară) sau le puteți găsi și în foaia de stil CSS a temei dvs..

Exemplu:

  • Imagini glisante: 1900 (l) x 400 (h)
  • Imagini ale caruselului: 115 (w)
  • Imagini widget: 414 (w)
  • Imagini postare blog complet: 680 (w)
  • Imagini prezentate: 250 (w) x 250 (h)
  • Imagine YoG Facebook OG: 1200 (w) x 628 (h) – pasul 11
  • Imaginea Yoast Twitter OG 1024 (w) x 512 (h) – pasul 11

680 pixeli dreptunghi

Lățimea blogului meu este de 680px, deci fiecare imagine de pe această postare a fost redimensionată la 680px.

8. Pluginuri WordPress pentru a servi imagini la scară

Majoritatea pluginurilor de optimizare a imaginii au opțiunea de a redimensiona imaginile, însă acest lucru nu este foarte eficient atunci când încercați să remediați erorile în GTmetrix, deoarece diferite zone ale site-ului dvs. au solicitat dimensiuni diferite. Este mai mult pentru a vă asigura că imaginile dvs. nu sunt absolut enorme. După cum spune pluginul Imagify, lățimea maximă nu trebuie să fie mai mică decât cea mai mare miniatură.

Smush

Redimensionați imaginile Smush

Imagify

Redimensionați imaginile Imaginați

EWW Image Optimizer

Redimensionați imaginile EWWW

Alte optimizări de imagini

Am scris un tutorial complet pe optimizarea imaginilor în WordPress care include:

  • Comprimarea imaginilor
  • Deservirea de imagini printr-un CDN
  • Redimensionarea GIFS
  • Eliminarea datelor EXIF
  • Lazy se încarcă imagini + videoclipuri
  • Cloudflare Mirage, Poloneză, Protecție Hotlink

Optimizări de imagine în GTmetrix

În căutarea mai multor tutoriale de viteză WordPress?
Iată alte tutoriale pe care le-am scris:

  • Cum să configurați WP Rocket (pluginul pentru cache vă recomand)
  • Cloudways vs. SiteGround (cele două gazde de top pe care le recomand)
  • Cum am obținut scoruri 100% GTmetrix (Ghid de viteză WordPress)

Am și un videoclip minunat despre optimizarea vitezei WordPress:

întrebări frecvente

&# X2705; Pot folosi un plugin pentru a servi imagini la scară?

Nu, diferite secțiuni ale site-ului dvs. apelează la dimensiuni diferite ale imaginii. Trebuie să scalați imaginile pentru a se potrivi cu acele dimensiuni unice.

&# X2705; Care este cel mai simplu mod de a scala o imagine?

Descărcați imaginea, decupați-o / redimensionați-o într-un program precum Photoshop sau Gimp, apoi înlocuiți imaginea veche cu cea nouă.

&# X2705; Ce imagini ar trebui să încep mai întâi scalarea?

Începeți prin scalarea imaginilor care apar pe mai multe pagini precum logo-ul, bara laterală, imaginile, imaginile din subsol și altele.

&# X2705; Unde găsesc dimensiunile corecte ale unei imagini?

GTmetrix vă indică dimensiunile corecte ale fiecărei imagini atunci când extindeți elementul în fila PageSpeed.

&# X2705; Cum optimizez complet o imagine?

Scalați-l la dimensiunile corecte, comprimați-le și eliminați datele EXIF ​​folosind un program de imagine sau un plugin, apoi asigurați-vă că specificați dimensiunile imaginii (setați lățimea și înălțimea imaginii) în HTML.

Sper că ai găsit acest tutorial util! Dacă aveți în continuare erori de imagine reduse pe site-ul dvs. WordPress, lăsați-mi un comentariu cu întrebarea dvs. și vă voi ajuta oricum pot.

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