hur man korrekt storlek bilder i WordPress (PageSpeed Insights + GTmetrix objekt)

om du körde din webbplats via PageSpeed Insights eller GTmetrix, kan du se en rekommendation att korrekt storlek bilder.

för att korrekt storlek bilder i WordPress, expandera objektet i PageSpeed Insights och visa vilka bilder är för stora. Ändra storlek på dem till rätt dimensioner (finns i din GTmetrix legacy-rapport). Slutligen ersätt den gamla bilden med den nya. Testa din webbplats igen och den ska vara 100%.

 korrekt storlek bilder

eftersom PageSpeed Insights bara visar ooptimerade bilder för den enda sida du testar, börja med att ändra storlek på hela webbplatsen bilder som visas på din webbplats (logotyp, sidofält och sidfot bilder). Kör sedan andra sidor genom PageSpeed Insights och ändra storlek på dina bilder på dem.

kan jag använda ett plugin för att automatiskt ändra storlek på bilder?
inte troligt. Du kan ställa in en maximal bredd + höjd i de flesta plugins för bildoptimering. Men olika områden på din webbplats kräver specifika dimensioner (bilder måste ändras i enlighet därmed).

skapa en bild dimension fusklapp.
det bästa sättet att undvika korrekt storlek bildfel är att lära sig måtten på de olika områdena din webbplats (reglagen, widgets, logotyp, full bredd blogg bilder, etc). Nästa, skapa en bild dimension fusklapp med varje områdes dimensioner. Om du följer ditt fuskark för bilddimensioner och ändrar storlek på bilder innan du laddar upp, bör du aldrig ha rätt storlek på bildfel.

hitta Överdimensionerade bilder i GTmetrix Legacy Reports

GTmetrix legacy reports visar rätt dimensioner för dina stora bilder.

skapa ett gratis GTmetrix-konto och gå till konton > standard till äldre rapporter > aktivera.

kör en sida genom GTmetrix och se avsnittet ”servera skalade bilder”. Utöka deras rekommendationer så ser du de korrekta dimensionerna som dessa bilder ska ändras till.

 servera skalade bilder GTmetrix

du kan också manuellt kontrollera om bilderna är för stora. Högerklicka på en bild > kopiera bildadress.

kopiera bildadress

klistra sedan in bildadressen i en ny webbläsarflik. Om du jämför bilden som visas på din webbplats med din bildadress ser du att det finns en märkbar skillnad i deras storlekar. Det betyder att bilden måste skalas. Genom att jämföra de två variationerna av dina bilder sida vid sida kan du se hur stor bilden faktiskt är (och varför sidan den är på kan laddas långsamt).

skalad vs oskalad bild

ändra storlek på bilder för att korrigera dimensioner

ladda ner den gamla bilden och öppna den i ditt bildredigeringsverktyg (jag använder GIMP). Ändra storlek och / eller beskära bilden till de dimensioner som rekommenderas av GTmetrix. Vissa bildredigeringsverktyg låter dig komprimera bilder och ta bort EXIF-data som gör att bilden laddas ännu snabbare.

 skalning av bild GIMP

du kan också beskära och ändra storlek på bilder direkt i WordPress:

skala bild i WordPress Media Editor

Byt ut den gamla bilden med den nya

Ladda upp din nya bild till WordPress och ersätt sedan den gamla bilden med den nya.

 oskalad Widgetbild

skalad Widgetbild

testa om sidan i GTmetrix

testa om sidan i GTmetrix (eller PageSpeed Insights) och felet bör åtgärdas.

servera skalade bilder WordPress

korrekt storlek bilder på mobilen

korrekt storlek bilder är olika på mobilen.

om du registrerar dig för ett premium GTmetrix-konto kan du testa din mobilhastighet på Android. Chansen är stor att du får se fler serverskalade bildfel om din webbplats inte använder adaptiva bilder, vilket innebär att du automatiskt ändrar storlek på bilder för Mobila enheter (detta görs vanligtvis av ett plugin).

Steg 1: Kör din webbplats genom GTmetrix Android Test:

GTmetrix Mobile Test

servera skalade bilder på mobilen

steg 2: Hitta dina mobila bakgrundsdimensioner som tillhandahålls av GTmetrix:

maximal Bakgrundsbredd

steg 3: Installera en adaptiv bilder plugin (jag rekommenderar ShortPixel eller adaptiva bilder).

Shortpixel adaptiva bilder

steg 4: Ställ in måtten som tillhandahålls av GTmetrix som bakgrunds maximal bredd.

 Bakgrunds maximal bredd

Steg 5: Kör om din webbplats via gtmetrixs mobiltest för att se till att det inte finns några fel.

GTmetrix Mobile Test

Steg 5: konfigurera andra inställningar i din adaptive images plugin (ShortPixel inkluderar WebP stöd, lata lastning bilder, smart beskärning, och ta bort EXIF-data). Dessa kan också hjälpa.

ändra storlek på bilder på flera sidor

om du använder samma bild på flera sidor/inlägg och det måste åtgärdas, kan du ändra storlek på bilden, kopiera det är HTML, sedan använda bättre Sök Ersätt plugin för att fixa det på flera sidor.

Steg 1: Installera bättre Sök Ersätt plugin.

steg 2: kopiera den gamla bildens HTML och klistra in den i fältet ”Sök efter” i Better Search ersätt plugin. Du kan använda WordPress-textredigeraren för att se bildens HTML. Observera: Better Search Replace ersätter bara en bild om den innehåller den exakta HTML du anger i plugin.

 bättre sökning Ersätt för bilder

steg 3: Kopiera den nya bildens HTML och klistra in den i fältet ”Ersätt med”.

servera skalad bild HTML

steg 4: Välj tabellerna (t.ex. inlägg) du vill skanna och avmarkera ”Kör som torr skanning.”

Steg 5: Klicka på ”Sök/Ersätt” och plugin kommer att ersätta den gamla bilden med den nya.

skapa ett fuskblad för bilddimensioner

som jag nämnde tidigare bör du mäta måtten på alla områden på din webbplats så att du kan ändra storlek på bilder innan du laddar upp dem. Du kan hitta dessa dimensioner i GTmetrix (endast om du har rätt storlek bildfel) eller så kan du också hitta dem i ditt temas CSS-formatmall.

exempel:

  • Slider bilder: 1900 (w) x 400 (h)
  • karusell bilder: 115 (w)
  • Widget bilder: 414 (w)
  • full bredd blogginlägg bilder: 680 (w)
  • utvalda bilder: 250(w) x 250(h)
  • Yoast Facebook OG bild: 1200 (w) X 628 (h – – steg 11
  • Yoast Twitter OG bild 1024 (w) x 512 (h) – steg 11

680 pixelbredd rektangel

min Bloggs bredd är 680px, så varje enskild bild på det här inlägget har ändrats till 680px.

WordPress Plugins för att korrekt storlek bilder

de flesta bildoptimering plugins har möjlighet att ändra storlek på bilder, men detta är inte särskilt effektivt när man försöker åtgärda fel i GTmetrix, eftersom olika delar av din webbplats kallas för olika dimensioner. Det är mer för att se till att dina bilder inte är helt enorma. Som Imagify-plugin säger, bör den maximala bredden inte vara mindre än din största miniatyrbild.

Smush

ändra storlek på bilder Smush

Imagify

ändra storlek på bilder Imagify

EWW Image Optimizer

ändra storlek på bilder EWWW

andra sätt att optimera bilder

jag skrev en fullständig handledning om optimering av bilder i WordPress som inkluderar:

  • komprimera bilder
  • serverar bilder från en CDN
  • ändra storlek på GIF
  • ta bort EXIF-data
  • Lazy laddar bilder + videor
  • Cloudflare Mirage, Polish, Hotlink Protection

GTmetrix Bildoptimeringar

letar du efter fler hastighets Tutorials?
här är andra tutorials jag skrev:

  • WordPress Speed Guide (den här guiden tog evigt)
  • hur man ställer in WP Rocket (cache plugin jag rekommenderar)

jag har också en fantastisk video på WordPress speed optimization:

Vanliga frågor

Hur fixar jag korrekt storlek bilder?

ladda ner bilden, ändra storlek på den för att korrigera dimensioner som tillhandahålls av GTmetrix legacy reports och ersätt sedan den gamla bilden med den nya.

kan jag använda en plugin för att korrekt storlek bilder?

Nej, olika delar av din webbplats kräver olika bilddimensioner. Du måste skala dina bilder så att de passar de unika dimensionerna.

vilka bilder ska jag börja ändra storlek först?

börja med att skala bilder som visas på flera sidor som din logotyp, sidofält och sidfotbilder.

Var hittar jag en bilds korrekta dimensioner?

GTmetrix legacy-rapporter visar rätt dimensioner för varje bild när du expanderar objektet på fliken PageSpeed.

Lämna ett svar

Din e-postadress kommer inte publiceras.