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%.

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.

de asemenea, puteți verifica manual dacă imaginile sunt prea mari. Faceți clic dreapta pe o imagine > 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ă).

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ă.

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

înlocuiți imaginea veche cu cea nouă

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

retestați pagina în GTmetrix

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

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:

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

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

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

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

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.

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

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.

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

Imagify

EWW Image Optimizer

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

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