cum să dimensionați corect imaginile în WordPress (PageSpeed Insights + GTmetrix Item)

dacă ați rulat site-ul dvs. prin PageSpeed Insights sau GTmetrix, este posibil să vedeți o recomandare pentru dimensiunea corectă a imaginilor.

pentru a dimensiona corect imaginile în WordPress, extindeți elementul în PageSpeed Insights și vizualizați imaginile care sunt prea mari. Redimensionați-le la dimensiunile corecte (găsite în raportul GTMetrix legacy). În cele din urmă, înlocuiți imaginea veche cu cea nouă. Retestați site-ul dvs. și ar trebui să fie 100%.

dimensiunea corectă a imaginilor

deoarece PageSpeed Insights afișează numai imagini neoptimizate pentru pagina unică pe care o testați, începeți prin redimensionarea imaginilor la nivel de site care apar pe site-ul dvs. web (logo, sidebar și imagini de subsol). Apoi, rulați alte pagini prin PageSpeed Insights și redimensionați imaginile pe acestea.

pot folosi un plugin pentru a redimensiona automat imaginile?
nu este probabil. Puteți seta o lățime maximă + înălțime în majoritatea pluginurilor de optimizare a imaginilor. Dar diferite zone ale site-ului dvs. necesită dimensiuni specifice (imaginile trebuie redimensionate corespunzător).

creați o foaie de cheat Dimensiune imagine.
cel mai bun mod de a evita în mod corespunzător erori de imagine dimensiune este de a învăța dimensiunile diferitelor zone site-ul dvs. (cursoare, widget-uri, logo-ul, lățime completă imagini blog, etc). Apoi, creați o foaie de cheat Dimensiune imagine cu dimensiunile fiecărei zone. Dacă urmați dimensiunea imaginii foaie ieftin și redimensiona imagini înainte de încărcare, nu ar trebui să aibă în mod corespunzător erori de imagine dimensiune.

găsiți imagini supradimensionate în GTmetrix Legacy Reports

GTmetrix legacy reports vă arată dimensiunile corecte pentru imaginile dvs. mari.

creați un cont GTmetrix gratuit și accesați conturi > implicit la rapoartele moștenite > activare.

rulați o pagină prin GTmetrix și vizualizați secțiunea „serviți imagini scalate”. Extindeți recomandările și veți vedea dimensiunile corecte la care ar trebui redimensionate aceste imagini.

serviți imagini scalate GTmetrix

de asemenea, puteți verifica manual dacă imaginile sunt prea mari. Faceți clic dreapta pe o imagine > copiați adresa imaginii.

Copiați adresa imaginii

apoi, lipiți adresa URL a imaginii într-o filă nouă a browserului. Dacă comparați imaginea afișată pe site-ul dvs. web cu adresa URL a imaginii, veți vedea că există o diferență notabilă în dimensiunile acestora. Asta înseamnă că imaginea trebuie scalată. Comparând cele două variante ale imaginilor dvs. una lângă alta, puteți vedea cât de mare este de fapt imaginea (și de ce pagina pe care se încarcă poate fi lentă).

scalate vs imagine Unscaled

redimensiona imagini pentru a corecta dimensiuni

descărcați imaginea veche și deschideți-l în instrumentul de editare a imaginilor de alegere (eu folosesc GIMP). Redimensionați și / sau Decupați imaginea la dimensiunile recomandate de GTmetrix. Unele instrumente de editare a imaginilor vă permit să comprimați imagini și să eliminați datele EXIF, ceea ce va face încărcarea imaginii și mai rapidă.

scalarea imaginii GIMP

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

scalarea imaginii în WordPress Media Editor

înlocuiți imaginea veche cu cea nouă

încărcați noua imagine în WordPress, apoi înlocuiți imaginea veche cu cea nouă.

 Imagine Widget Unscaled

Imagine widget scalată

retestați pagina în GTmetrix

retestați pagina în GTmetrix (sau PageSpeed Insights) și eroarea ar trebui remediată.

serviți imagini scalate WordPress

dimensiunea corectă a imaginilor pe mobil

dimensionarea corectă a imaginilor este diferită pe mobil.

dacă vă înscrieți pentru un cont GTmetrix premium, vă puteți testa viteza mobilă pe Android. Este posibil să vedeți mai multe erori de imagine scalate dacă site-ul dvs. nu utilizează imagini adaptive, ceea ce înseamnă redimensionarea automată a imaginilor pentru Dispozitive mobile (acest lucru se face de obicei de un plugin).

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

GTmetrix Mobile Test

serviți imagini scalate pe mobil

Pasul 2: Găsiți dimensiunile de fundal mobile furnizate de GTmetrix:

Lățimea maximă de fundal

Pasul 3: Instalați un plugin Adaptive Images (recomand Shortpixel sau Adaptive Images).

imagini Adaptive ShortPixel

Pasul 4: setați dimensiunile furnizate de GTmetrix ca lățime maximă de fundal.

fundal lățime maximă

Pasul 5: Rulați din nou site-ul dvs. prin testul mobil GTmetrix pentru a vă asigura că nu există erori.

GTmetrix Mobile Test

Pasul 5: Configurați alte setări în adaptive images plugin (ShortPixel include suport WebP, imagini de încărcare leneș, decupare inteligent, și eliminarea datelor EXIF). Acestea pot ajuta prea.

redimensionați imaginile pe Mai multe pagini

dacă utilizați aceeași imagine pe mai multe pagini/postări și trebuie remediată, puteți redimensiona imaginea, copia HTML, apoi utilizați pluginul Better Search Replace pentru a o remedia pe mai multe pagini.

Pasul 1: Instalați pluginul Better Search Replace.

Pasul 2: Copiați HTML-ul imaginii vechi și lipiți-l în câmpul „Căutare” din pluginul Better Search Replace. Puteți utiliza Editorul de text WordPress pentru a vedea HTML-ul imaginii. Notă: O mai bună înlocuire a căutării va înlocui o imagine numai dacă conține codul HTML exact pe care îl introduceți în plugin.

căutare mai bună înlocuiți imaginile

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

serviți imagine scalată HTML

Pasul 4: Selectați tabelele (de ex. mesaje) doriți scanate și debifați ” rulați ca Scanare uscată.”

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

creați o imagine dimensiuni Cheat Sheet

după cum am menționat mai devreme, 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ă aveți erori de imagine de dimensiune corespunzătoare) sau le puteți găsi și în foaia de stil CSS a temei.

exemplu:

  • Slider imagini: 1900 (w) x 400 (h)
  • carusel imagini: 115 (w)
  • Widget imagini: 414 (w)
  • lățime completă blog post imagini: 680 (w)
  • imagini recomandate: 250(w) x 250(h)
  • Yoast Facebook og imagine: 1200(w) x 628 (h) – etapa 11
  • Yoast Twitter og imagine 1024 (w) x 512 (h) – etapa 11

680 lățimea pixelilor dreptunghi

lățimea blogului meu este de 680px, astfel încât fiecare imagine de pe acest post a fost redimensionată la 680px.

pluginuri WordPress pentru dimensiunea corectă a imaginilor

majoritatea pluginurilor de optimizare a imaginilor au opțiunea de a redimensiona imaginile, totuși acest lucru nu este foarte eficient atunci când încercați să remediați erorile din GTmetrix, deoarece diferite zone ale site-ului dvs. web 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

redimensionarea imaginilor Smush

Imagify

redimensionarea imaginilor Imagify

EWW Image Optimizer

redimensionarea imaginilor EWWW

alte modalități de optimizare a imaginilor

am scris un tutorial complet despre optimizarea imaginilor în WordPress care include:

  • comprimarea imaginilor
  • difuzarea imaginilor dintr-un CDN
  • Redimensionarea GIF-urilor
  • scoaterea datelor EXIF
  • Lazy loading images + video
  • Cloudflare Mirage, Polish, hotlink Protection

optimizări de imagine GTmetrix

căutați mai multe tutoriale de viteză?
iata si alte tutoriale pe care le-am scris:

  • Ghid de viteză WordPress (acest ghid a luat pentru totdeauna)
  • cum se configurează WP Rocket (pluginul cache pe care îl recomand)

de asemenea, am un videoclip minunat despre optimizarea vitezei WordPress:

Întrebări frecvente

cum remediez corect dimensiunea imaginilor?

descărcați imaginea, redimensionați-o pentru a corecta dimensiunile furnizate de GTmetrix legacy reports, apoi înlocuiți imaginea veche cu cea nouă.

pot folosi un plugin pentru dimensiunea corectă a imaginilor?

Nu, diferite secțiuni ale site-ului dvs. web necesită dimensiuni diferite ale imaginii. Trebuie să vă scalați imaginile pentru a se potrivi acestor dimensiuni unice.

ce imagini ar trebui să încep să redimensionez mai întâi?

începeți prin scalarea imaginilor care apar pe mai multe pagini, cum ar fi logo-ul, bara laterală și imaginile de subsol.

unde găsesc dimensiunile corecte ale unei imagini?

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

Lasă un răspuns

Adresa ta de email nu va fi publicată.