Hur man serverar skalade bilder i WordPress (artikel i GTmetrix)

Behöver servera skalade bilder i WordPress?


Detta betyder bara att du måste ändra storlek på stora bilder för att bli mindre.

GTmetrix berättar vilka bilder som ska skalas och rätt dimensioner de ska beskäras eller ändras till. Därefter ändrar du storlek på (skalar) bilden och ersätter gamla bilder med de nya.

Servera skalade bilder

Eftersom GTmetrix bara visar opimiserade bilder för den ena sidan du testar börjar du med att skala på hela platsen bilder som visas på flera sidor (din logotyp, sidofält och sidfot). Kör sedan dina andra sidor genom GTmetrix och skala enskilda bilder på dessa.

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

Skapa ett fönster för en bilddimension.
Det bästa sättet att undvika servera skalade bildfel är att lära sig dimensionerna för varje område på din webbplats (reglage, widgetar, logotyp, bloggbilder med full bredd osv.). Skapa därefter ett fiktionsblad med en bilddimension som visar varje områdes dimensioner. Om du följer dina bilddimensioner fuskar och ändrar storleken på bilder innan du laddar upp bör du aldrig ha visat skalade bildfel igen.

1. Hitta stora bilder i GTmetrix

Kör en sida genom GTmetrix och visa servera skalade bildfel på fliken PageSpeed. Utöka deras rekommendationer så ser du rätt dimensioner som varje bild ska ändras till. Kom ihåg att GTmetrix bara visar fel för den enda sida du testar.

Servera skalade bilder GTmetrix

Du kan också manuellt kontrollera om bilderna skalas. Högerklicka och kopiera först bildadress.

Kopiera bildadress

Klistra sedan in bildens URL i en ny webbläsarflik. Om du jämför bilden som visas på din webbplats med din bild-URL kommer du att se att det är en annan märkbar storlek. Det betyder att bilden måste skalas. Genom att jämföra de två varianterna av din bild sida vid sida kan du se hur stor bilden faktiskt är (och varför sidan den är på kan laddas väldigt långsamt).

Skalad vs oskalad bild

2. Ändra storlek på bilder för att korrigera dimensioner

Ladda ner den gamla bilden och öppna den i ditt val av bildredigeringsverktyg (jag använder GIMP). Ändra storlek och / eller beskär bilden till de dimensioner som rekommenderas av GTmetrix. Med många bildredigeringsverktyg kan du komprimera bilder och ta bort EXIF-data vilket gör att bilden laddas ännu snabbare.

Skalningsbild GIMP

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

Skalning av bild i WordPress Media Editor

3. Byt ut den gamla bilden med den nya

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

Oskalad widgetbild

Skalad widgetbild

4. Testa om sidan i GTmetrix

Testa sidan igen i GTmetrix och du borde inte ha visat skalade bildfel längre.

100% servera skalade bilder

5. Servera skalade bilder på mobil

Att betjäna skalade bilder är annorlunda på mobilen.

Om du registrerar dig för ett gratis GTmetrix-konto kan du testa ditt mobil webbplats hastighet på Android. Chansen är stor att du ser fler servera skalade bildfel om din webbplats inte använder anpassningsbara bilder, vilket innebär att storleken på bilder för mobila enheter automatiskt ändras (detta görs vanligtvis av ett plugin).

Steg 1: Kör din webbplats genom GTmetrixs Android-test:

GTmetrix Mobile Test

Servera skalade bilder på mobil

Steg 2: Hitta dina mobila bakgrundsdimensioner från GTmetrix:

Högsta bakgrundsbredd

Steg 3: Installera ett Adaptive Images-plugin från ShortPixel eller Anpassningsbara bilder.

ShortPixel adaptiva bilder

Steg 4: Ställ in måtten från GTmetrix som bakgrundens maximala bredd.

Bakgrund Maximal bredd

Steg 5: Kör din webbplats igen genom GTmetrix mobiltest för att se till att det inte finns några fel.

GTmetrix Mobile Test

Steg 5: Konfigurera andra inställningar i din anpassningsbara bildplugin (ShortPixel inkluderar WebP-stöd, lata laddning av bilder, smart beskärning och borttagning av EXIF-data). Dessa kan också hjälpa.

6. Ändra storlek på bilder på flera sidor

Om du använder samma bild på flera sidor och den måste skalas, kan du ändra storleken på bilden, kopiera den HTML och sedan använda plugin Better Search Replace för att fixa den på flera sidor.

Steg 1: Installera Bättre sök Byt ut plugin.

Steg 2: Kopiera den gamla bildens HTML och klistra in den i fältet “Sök efter” i plugin för Better Search Replace. Du kan använda WordPress Text Editor för att se bildens HTML. Obs: Better Search Replace ersätter bara en bild om den innehåller exakt HTML som du anger i plugin.

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 de tabeller (t.ex. inlägg) som du vill skanna och avmarkera torrsökning.

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

7. Skapa ett bildmått Cheat Sheet

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

Exempel:

  • Sliderbilder: 1900 (w) x 400 (h)
  • Karusellbilder: 115 (w)
  • Widgetbilder: 414 (w)
  • Helbredd blogginlägg: 680 (w)
  • Utvalda bilder: 250 (w) x 250 (h)
  • Yoast Facebook OG-bild: 1200 (w) x 628 (h) – steg 11
  • Yoast Twitter OG image 1024 (w) x 512 (h) – steg 11

680 pixel bredd rektangel

Min bloggs bredd är 680px, så varje bild i det här inlägget har ändrats till 680px.

8. WordPress-plugins för att servera skalade bilder

De flesta pluginprogram för optimering av bilder har möjlighet att ändra storlek på bilder, men detta är inte särskilt effektivt när du försöker fixa fel i GTmetrix, eftersom olika områden på din webbplats kräver 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 Föreställ dig

EWW Image Optimizer

Ändra storlek på bilder EWWW

Andra bilderoptimeringar

Jag skrev en fullständig handledning om optimera bilder i WordPress vilket ingår:

  • Komprimera bilder
  • Serverar bilder via ett CDN
  • Ändra storlek på GIFS
  • Tar bort EXIF-data
  • Lazy laddar bilder + videor
  • Cloudflare Mirage, polska, Hotlink-skydd

Bildoptimeringar i GTmetrix

Letar du efter fler WordPress-hastighetsstudier?
Här är andra självstudier jag skrev:

  • Hur man ställer in WP Rocket (cache-pluginet rekommenderar jag)
  • Cloudways vs. SiteGround (de två bästa värdarna rekommenderar jag)
  • Hur jag fick 100% GTmetrix-poäng (WordPress Speed ​​Guide)

Jag har också en fantastisk video om WordPress-hastighetsoptimering:

Vanliga frågor

&# X2705; Kan jag använda ett plugin för att servera skalade bilder?

Nej, olika delar av din webbplats kräver olika bilddimensioner. Du måste skala bilder för att passa de unika dimensionerna.

&# X2705; Vad är det enklaste sättet att skala en bild på?

Ladda ner bilden, beskära / ändra storlek på den i ett program som Photoshop eller Gimp och ersätt sedan den gamla bilden mot den nya.

&# X2705; Vilka bilder ska jag börja skala först?

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

&# X2705; Var hittar jag en bilds korrekta dimensioner?

GTmetrix berättar rätt dimensioner för varje bild när du utökar objektet på fliken PageSpeed.

&# X2705; Hur optimerar jag en bild helt?

Skala den till rätt dimensioner, komprimera den och ta bort EXIF-data med ett bildprogram eller ett plugin, och se sedan till att du anger bildmått (ställ in bildens bredd och höjd) i HTML.

Jag hoppas att du tyckte att denna handledning var till hjälp! Om du fortfarande har serverade skalade bildfel på din WordPress-webbplats lämnar jag en kommentar med din fråga så hjälper jag dig ändå.

Skål,
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