Hur man optimerar bilder i WordPress (för båda hastigheterna + SEO)

När det gäller bildoptimering har du förmodligen hört tillräckligt om alt-text.


Det finns faktiskt 20 olika sätt att optimera bilder (om du inkluderar både SEO och hastighetsoptimering). Dessa ger dig bättre poäng i GTmetrix / Pingdom, potentiellt rankar du dig högre i sökningen och får ditt innehåll att ladda mycket snabbare. Jag har lyckats få en 100% GTmetrix-rapport med .5s belastningstider … Att optimera mina bilder i WordPress var en stor del av det.

Optimera bilder FÖR uppladdning – Att använda ett program som Photoshop för att optimera bilder innan du laddar upp dem kan spara mycket arbete. Du kan ändra storlek, komprimera, radera EXIF-data, spara i rätt format (t.ex. PNG / JPEG) och skriva ett beskrivande filnamn (som automatiskt kommer att användas som alt-text om du använder Plugin för automatisk bild Alt Attribut). Det är 6 optimeringar!

Om du behöver högupplösta bilder (t.ex. en fotograferingswebbplats), du kanske inte vill ändra storlek på och komprimera dem (steg 3 och 8) eftersom dessa kan minska kvaliteten, även om det är en liten mängd.

Huvudverktyg jag använder – Jag använder GIMP för att ändra storlek på / komprimera bilder (min bildredigerare valt), WP-raket för min cache-plugin, Imagify för ytterligare förlustfri komprimering + ta bort EXIF-data, båda CloudFlare och StackPath CDN, Plugin för automatisk bild ALT Attribut för att automatiskt använda bildfilens namn som alt text, och Optimal Gravatar-cache att cache Gravatars i kommentarer. jag använder WP Review Pro som min rika utdragspropp, Bättre sök ersätt att bulkuppdatera bilder (mycket praktiskt), och GTmetrix som mitt hastighetstestverktyg. Se hela listan med verktyg.

1. Hitta ooptimerade bilder

Kör din webbplats igenom GTmetrix och du ser dessa objekt på flikarna Sidhastighet / YSlow. De första fem är vanligtvis sidspecifika, vilket betyder att GTmetrix bara visar de opimiserade bilderna för den ena sidan du testar. De sista tre förekommer vanligtvis på hela webbplatsen. Naturligtvis är detta bara sju sätt att optimera bilder, men några av de viktigaste, så vi kommer att göra dessa först.

  • Servera skalade bilder: ändra storlek på stora bilder för att korrigera dimensioner (steg 2)
  • Ange bilddimensioner: ange en bredd / höjd i bildens HTML eller CSS (steg 3)
  • Optimera bilder – komprimera bilder utan förlust (steg 4)
  • Kombinera bilder med CSS-sprites – kombinera flera bilder till en bild (steg 5)
  • Undvik omdirigeringar av URL – servera inte bilder från fel www eller http (s) version (steg 6)
  • Använd ett innehållsleveransnätverk – servera bilder / filer från ett CDN (steg 7)
  • Utnyttja caching i webbläsaren – cachebilder / filer med din cache-plugin (steg 8)
  • Gör favikon liten och cachebar – använd en 16x16px favicon och cache det (steg 9)

Bildoptimeringar i GTmetrix

Börja med att fixa bilder som visas på flera sidor: logotyp, sidofält / sidfot / fot, etc. Börja också med servera skalade bilder eftersom du kanske måste ändra storlek / ladda upp dem igen med nya dimensioner.

2. Servera skalade bilder

Om du ser servera skalade bilder fel i GTmetrix, det betyder att du har stora bilder och måste ändra storlek på dem till rätt dimensioner (som GTmetrix ger dig). Så länge du följer dina finesser för bilddimensioner (se nedan), bör du inte se dessa fel. Men om du redan har laddat upp stora bilder, måste du ändra storlek på dem manuellt eller använda ett plugin.

Serve-förminskad Images

Stora storlek på bilder med ett plugin – problemet med detta är att olika bilder kräver olika dimensioner (widgetar, reglage, bilder med full bredd). Medan de flesta pluginprogram för bildoptimering har ett alternativ att ändra storlek på bilder till en enda specifika uppsättning dimensioner, bör du verkligen beskära / ändra storlek innan du laddar upp. Om du ändrar storlek på bilder med ett plugin, håller du säkerhetskopior av originalbilderna (och testar bara några få) om du inte är nöjd med resultaten.

Ändra storlek på stora bilder

Ändra storlek på bilder manuellt – få rätt dimensioner från GTmetrix och ändra storlek på / ladda upp dem igen. Kom ihåg att GTmetrix bara visar opimiserade bilder för den ena sidan du testar.

Skapa ett fuskblad på din webbplats bildmått
Dina skjutreglage, bloggsidefält, presenterade bilder och blogginnehåll kräver alla specifika dimensioner till vilka bilder ska ändras. Skapa ett fuskark så att du kan ändra storlek på dem innan du laddar upp dem till WordPress. Detta är särskilt användbart om du har många områden på din webbplats som kräver olika bildstorlekar och om du har flera designers / redaktörer.

Exempel:

  • Sliderbilder: 1900 (w) x 400 (h)
  • Karusellbilder: 115 (h)
  • 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

3. Ange bilddimensioner

Detta innebär att lägga till en bredd / höjd i bildens HTML eller CSS. Visual Editor gör detta åt dig (men widgets, vissa sidbyggare och anpassad HTML låt bli). Testa några sidor i GTmetrix.

GTmetrix berättar bildens dimensioner …

Specific Image Dimensions GTmetrix

Lägg till bredd / höjd i bildens HTML …

Ange bilddimensioner

4. Komprimera bilder utan problem

Dessa är “optimera bilder” -objekt i GTmetrix. Många program (t.ex. Photoshop och Gimp) har möjlighet att komprimera när de exporteras. Även om det här är en bra start får plugin-filer för bildkomprimering vanligtvis ännu bättre resultat. jag föredrar Imagify, kraken, ShortPixel, eller Smush. Andra plugins är kända för att visuellt minska bildkvaliteten och kan orsaka fel med dina bilder.

Komprimera bilder med Imagify

  1. Registrera dig för Imagify
  2. Installera Föreställ dig plugin
  3. Du kommer att uppmanas med anvisningarna nedan:
  4. Ange din API-nyckel från ditt Imagify-konto
  5. Ställ in din kompressionsnivå (normal, aggressiv, ultra)
  6. Imagif’em all (foto nedan) med bulk optimerar alla bilder på din webbplats
  7. När du har nått din gräns, betala $ 4,99 eller vänta nästa månad för att återställa din gräns

imagify

Testa hur bilder ser ut med olika nivåer av komprimering …

Föreställ dig komprimeringsjämförelse

När du har registrerat dig kan du optimera alla bilder på din webbplats …

imagify-wordpress-image-optimering

Ställ in alternativet för att optimera bilder vid uppladdning …

Föreställ dig Optimera bilder vid uppladdning

5. Kombinera bilder i CSS-sprites

På min hemsida kanske du tror att du ser 21 ikoner, men de är faktiskt en enda bild. Det här är en CSS sprite, där du kombinerar flera bilder till en enda bild. Detta minskar antalet bilder (och förfrågningar), varför min hemsida bara har 10 förfrågningar. Istället för att ladda 21 bilder laddas det 1. Du behöver CSS-kunskap för att göra detta, eller använd a CSS sprite generator.

CSS Sprites

GTmetrix CSS Sprites

Använd endast CSS Sprites för dekorativa bilder – du förlorar en hel del alt-taggar när du kombinerar 21 bilder till 1. Kombinera INTE viktiga bilder i CSS-spriter om de beskriver ditt innehåll. Vad gäller mig är hastigheten på min hemsida viktigare än den är SEO … Jag använder min hemsidas GTmetrix-rapport på många ställen (så jag måste hålla den ren) och min hemsida, tro det eller inte, riktar sig inte till en nyckelord. Det är syftet att beskriva mina tutorials … och ladda snabbt.

6. Undvik omdirigeringar av URL-adresser

Om du ändrade till HTTPS, www-versioner eller började betjäna bilder från ett CDN, bör du uppdatera alla dina bilder (och länkar) bulk med Bättre sök ersätt så de visar rätt version. Annars kan du se minimera omdirigeringar eller använda cookie-fria domäner fel.

Minimera omdirigeringar

Cookie-fria domäner

Använd plugin Better Search Replace för att uppdatera webbadresser till bilder …

Bättre sök ersätter WWW-versioner

Bättre sök Ersätt HTTP kontra HTTPS

7. Servera bilder från ett CDN

Detta kräver att du ändrar bild-URL: er för att inkludera dina CDN URL

  • URL för gammal bild (utan CDN): https://onlinemediamasters.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png
  • Ny bild-URL (med CDN): https://t9w8m8j8.stackpathcdn.com/wp-content/uploads/2017/02/Tom-Dupuis-Widget.png

Cloudflare vs. StackPath – Jag använder båda CloudFlare och StackPath eftersom fler datacenter = snabbare innehållsleverans. Cloudflare har 200+ datacenter, StackPath har 34+ datacenter som är starkt belägna i USA (som är där de flesta mina besökare kommer från). Cloudflare tilldelar dig inte en CDN-URL så vi kommer att använda StackPaths CDN för att visa bilder.

StackPath-data-Centers

Steg 1: Välj ett CDN. jag använder StackPath (de har en 30-dagars rättegång).

Steg 2: Klicka på CDN-fliken i instrumentpanelen skapa en StackPath CDN-webbplats

StackPath-CDN-Tab

StackPath-CDN-Domain

CDN-URL-StackPath

Steg 3: Kopiera din CDN-URL och klistra in den i din cache-plugin (nedan är för WP Rocket) …

WP-Rocket-CDN

Steg 4: Ersätt bild-URL: er för att inkludera din CDN-URL (med Bättre sök ersätt).

Bättre sök Byt ut CDN-URL

Steg 5: Kontrollera om gamla bild-URL: er använder Chrome DevTools. Ibland din cache-plugin eller CDN Enabler tar hand om detta, förutom länkar i CSS och JavaScript som är hårdkodade. För länkarna som finns kvar finns de normalt i filer (t.ex. CSS eller Javascript) som behöver manuell kontroll och ersättning. Chrome DevTools visar alla domäner som för närvarande används.

Steg 6: Kör din webbplats i GTmetrix och “innehållsleveransnätverk” bör vara grönt i YSlow. Du bör inte ha några fel i “minimera omdirigeringar” eller “använda cookie-fria domäner” heller.

CDN GTmetrix YSlow

8. Cache-bilder

De flesta cache-pluginprogram har ett alternativ för webbläsare cachar, som cachar bilder. Jag använder WP Rocket som fick klass 1-cache-plugin i flera Facebook-omröstningar, och jag har självstudier för det. Snabb prestanda är vanligtvis rankad som nummer 1 gratis cache-plugin (jag har en tutorial för det också).

Webbläsarcaching

9. Gör Favicon liten och infällbar

Se till att ditt favicon är 16x16px, är formatet favicon.ico och cachas med hjälp av din cache-plugin.

10. Ta bort EXIF-data

Exif-data innehåller information som bländare, slutartid, ISO, brännvidd, kameramodell, datum då fotot togs med mera. Du behöver inte detta för bilder på din webbplats. De VA Ta bort Exif-plugin tar bort Exif-data automatiskt när bilder laddas upp.

De flesta pluginprogram för optimering av bilder (inklusive Imagify, ShortPixel, Kraken, EWWW och Smush) har ett alternativ att ta bort EXIF-data automatiskt. Här är inställningarna för Imagify …

Föreställ dig Ta bort EXIF-data

11. Cloudflare Image Optimization

Cloudflare har också några sätt att optimera bilder. Mirage och polska finns i din Cloudflare-hastighetsinställningar medan Hotlink Protection finns i din Skrapa skärminställningar.

Cloudflare Mirage (Pro Feature) – minskar bildförfrågningar, lata laddar bilder och förbättrar bildbelastningstider på mobila enheter med långsamma nätverksanslutningar. Här är mer information …

  • Ändrar storlek på bilder baserade på en besökares enhet / anslutning. En besökare med en dålig anslutning får en mindre version (lägre upplösning) tills de är tillbaka på en högre bandbredd.
  • Minskar mängden förfrågningar – istället för att skicka flera förfrågningar för alla bilder på webbplatsen drar Mirage detta till en begäran så att besökare kan se bilder omedelbart.
  • Lazy laddar bilder (laddar bara dem när användare rullar ner och faktiskt ser bilden).

Cloudflare Image Mirage

Cloudflare polska (Pro Feature) – raderar EXIF-data och komprimerar bilder.

Cloudflare Image Polish

Cloudflare Hotlink-skydd – hindrar människor från att kopiera dina bilder och klistra in dem på sin egen webbplats, som (eftersom du fortfarande är värd för den bilden) suger upp din bandbredd.

Cloudflare Hotlink-skydd

12. Lazy Load Images

Detta försenar inläsningen av bilder tills användare bläddrar ner på sidan och synligt ser bilden. Även om det förbättrar initiala belastningstider kan det att vara mycket irriterande att ladda bilder medan du bläddrar ständigt. Jag personligen bara lata videor, eftersom de tar mycket lång tid att ladda än bilder.

Du kan använda Lazy Load plugin, Lazy Load For Videos-plugin, eller använd WP Rocket …

WP-raket-Lazy-Load

13. Spara som korrekt format

PNG vs. JPEG – PNG är okomprimerad (större filstorlek) och bör användas i enkla bilder utan massor av färger. JPEG är en komprimerad (mindre filstorlek) som minskar bildkvaliteten något men är mindre i storlek och används i bilder med många färger. GIMP och andra bildredigeringsprogram bör använda rätt format automatiskt, men det är fortfarande bra att veta.

jpg_vs_png

Illustration av Labnol

14. Namn på bildfil

Sökmotorer använder både alt-text- och bildfilnamn, så namnge dina filer innan du laddar upp dem till WordPress. Om du använder ett plugin det lägger till alt-text automatiskt baserat på filnamnet är det allt du behöver göra för att namnge dina filer! Lägg inte i nyckelord, beskriv bara bilden.

Namn på etikettbildfil

15. Alt text

Dessa bör vara desamma som ditt bildfilnamn. Du kan använda Plugin för automatisk bild Alt Attribut för att automatiskt använda filnamnet som alt-text. Så länge du använder relevanta bilder, bör vissa av dem naturligtvis inkludera (bitar) av ditt sökord … det finns absolut ingen anledning att fylla nyckelord i bilder, vilket riskerar att sökord stoppning straff.

Lägg automatiskt till Alt-text till bilder – Använd Plugin för automatisk bild Alt Attribut. Nu när du lägger till en bild lägger plugin till alt-text som är samma som filnamnet …

alt ="WP-Snabbaste-Cache-Plugin" width ="577" höjd ="247" />

Hitta saknade Alt-text – Screaming Frog är ett gratis verktyg som visar dig alla bilder som saknas alt-text.

  • Ladda ner Skrikande groda SEO Spider
  • Ange din webbplats och klicka på “Start” för att genomsöka webbplatsen
  • Klicka på bildfliken
  • Gå till Översikt → Alt text saknas (se nedan)
  • Leta reda på dessa bilder på din webbplats och lägg till alt-text

Saknad bild Alt text - Skrikande groda

16. Öppen graf (Facebook + Twitter)

Detta gör ditt innehållsformat ordentligt när det delas på Facebook / Twitter, specifikt din bild eftersom båda nätverk använder anpassade dimensioner för att visa det, annars kommer det att se roligt ut.

Facebook delning

Om du använder Yoast, gå till “Sociala” inställningar och aktivera Öppna diagram för både Facebook / Twitter …

Yoast-Social-Meta-Data

Redigera nu en sida / inlägg, klicka sedan på “dela” -länken i Yoast så ser du alternativ för att ladda upp anpassade bilder för Facebook (1200 bredd x 628 höjd) och Twitter (1024 bredd x 512 höjd).

Yoast sociala-media-optimering

17. Bilder i utvalda utdrag

Utvalda utdrag är när Google visar bitar av ditt innehåll högst upp i sökresultaten och kan (men är inte garanterat) inkludera en bild. Google kommer att dra dessa från alla första sidors resultat, det är dock upp till dem om de till och med kommer att visa ett presenterat utdrag eller bild. Dessa gör att ditt utdrag visas två gånger och är ett otroligt sätt att få mycket trafik.

3 typer av utvalda utdrag

  • svar
  • tabeller
  • listor

Utvalda-image-Snippets

Hur du får utvalda utdrag i Google

  • Rikta in ett nyckelord där människor vill ha en koncis svar
  • Använda sig av Moz Key Explorer för att identifiera frågeford
  • Använd Answer Public Public för att hitta ännu fler frågeford
  • Välj om svaret ska vara ett stycke, en lista eller en tabell
  • Designa en fin grafik (eller ta ett foto) som beskriver nyckelordet
  • Använd optimal teckenlängd (se bild nedan taget från Moz)
  • Skapa faktabaserat innehåll med kvalitetsreferenser (länkar, grafik, etc.)
  • Rikta in nyckelord som redan har ett utdrag men som gör ett dåligt jobb
  • Om du siktar efter svarrutan, rikta in ditt sökord med en exakt matchning
  • Se till att du är på första sidan för sökordet, om inte, förbättra innehållet

Optimalt utvalda utdragslängder

18. Strukturerade data

Bilder kan användas i strukturerade data (och märken) för följande innehållstyper:

Video Rich Snippet

Recept rik Snippets

Produkt Rich Snippet

Vilket Rich Snippets Plugin ska jag använda?
jag använder MyThemeShop’s WP Review Pro (här är en sida jag använder den på) som stöder 14 datatyper inklusive recept och produktrecensioner. Jag brukade använda WP Rich Snippets men utvecklaren lämnade plugin-programmet och det har inte uppdaterats på 2+ år, och All In One Schema-plugin är bara tråkigt (det har en brist på alternativ och styling). WP Review Pro är mycket lätt att använda.

19. Stilbilder

Glöm inte att utforma dina bilder! Jag använder gränserna på de flesta av mina.

  • Bildtitlar
  • Bildlänkar
  • Bildgränser
  • Bildtexter

20. Ändra storlek på GIF

Precis som om du ändrar storleken på bilderna till rätt dimensioner, bör GIFs också ändras i storlek (använd GIF GIF).

Ändra storlek på GIF …

Ändra storlek på GIF

Komprimera det sedan …

Komprimera GIF

Resultatet :-)

Optimera hund GIF

21. Cache Gravatars

Om du har inlägg med massor av kommentarer, Gravatars kan helt förstöra din rapport. Du kan inaktivera dem, bryta kommentarer för att bara visa ett visst antal kommentarer eller prova ett Gravatar-cache-plugin. Du kanske behöver testa lite eftersom vissa insticksprogram inte fungerar på vissa webbplatser.

  • Cache Gravatars (Optimalt, Harrys, eller FV Gravatar Cache)
  • Inaktivera Gravatars helt
  • Ställ in din standardgravatar på tom
  • Ta bort kommentarer som inte ger mervärde
  • Ställ in din standardgravatar på en anpassad bild på din server
  • Begränsa dina Gravatar-bilder till mindre dimensioner (t.ex. 32px)
  • Paginera kommentarer i WP Avaktivera för att bara visa 20 kommentarer åt gången
  • Om inget av dessa fungerar, kolla in WP Rockets caching Gravatars-handledning

Cache-Gravatar-bilder

22. Undvik att bädda in bilder från externa webbplatser

Ladda alltid upp bilder till din webbplats, kopiera / klistra aldrig in dem. Annars slutar du med extra förfrågningar eftersom bilden inte är värd på din server så den måste dra den från någon annanstans.

23. Verktyg för bildoptimering

Undvik att använda plugins med duplicerad funktionalitet – Föreställ dig, ShortPixel, Kraken, EWWW och Smush alla gör i princip samma sak (förlustfri komprimering, EXIF-borttagning av data, storlek på bilder). WP Rocket har alternativ för lat laddning, caching och CDN (och databasrensning + värd för Google Analytics lokalt) vilket de flesta cache-plugins inte gör, vilket sparar dig från att använda extra plugins.

  • Fantastisk skärmdump – Chrome-förlängning för att ta skärmdumpar.
  • Automatiska bild Altattribut – infogar automatiskt alt-text med bildfilnamn.
  • Bättre sök ersätt – använd den för att bulkuppdatera bilder.
  • CloudFlare – gratis CDN med 200+ datacenter, hotlink-skydd, mirage, polering.
  • Chrome DevTools – visar domäner som används om du har GTmetrix-omdirigeringsfel.
  • CSS Sprite Generator – gratis verktyg för att kombinera flera bilder till en CSS-sprite.
  • EWWW Image Optimizer – förlustfri komprimering, borttagning av EXIF, storleksändring.
  • GifGifs – ändrar storlek på GIF.
  • GIMP – gratis bildredigeringsprogram jag använder.
  • GTmetrix – visar vilka bilder som behöver optimeras.
  • Imagify – förlustfri komprimering, borttagning av EXIF, storleksändring.
  • Imsanity – ändrar storleken på stor bild för att fixa “tjäna skalade bilder” i GTmetrix.
  • kraken – förlustfri komprimering, borttagning av EXIF, storleksändring.
  • Lazy Load – plugin som försenar inläsningen av bilder tills de blir synliga.
  • Lazy Load For Videos – plugin som försenar inläsning av videor tills de blir synliga.
  • Optimal Gravatar-cache – cachar Gravatars (eller försök Harrys Gravatar Cache).
  • Skrikande groda SEO Spider – hitta saknade alt-text, metabeskrivningar osv.
  • ShortPixel – förlustfri komprimering, borttagning av EXIF, storleksändring.
  • Smush – förlustfri komprimering, borttagning av EXIF, storleksändring.
  • StackPath – $ 10 / månad CDN med 31 datacenter.
  • Swift Performance Lite – # 1 gratis cache-plugin i de flesta Facebook-omröstningar.
  • WP Review – rik plugin för utdrag (hjälper till att få bilder som visas i sökresultaten).
  • WP-raket – Cache-plugin # 1 i de flesta Facebook-omröstningar.
  • VA Ta bort Exif – raderar onödiga data från bilder.
  • Zoom  -Chrome-förlängning för att få den perfekta zoomen medan du tar skärmdumpar.
  • Yoast – aktiverar Facebook / Twitter metadata så att bilder formateras korrekt när de delas.

Vanliga frågor

&# X2705; Hur fixar du Optimera bildfel i GTmetrix?

Genom att förlustfria komprimera dem med hjälp av ett plugin som ShortPixel, Imagify eller Smush. Jag använder ShortPixel eftersom det alltid fixar det här felet i GTmetrix.

&# X2705; Hur fixar du Serve Scaled Image-fel i GTmetrix?

Det betyder att du måste beskära / ändra storlek på bilder till rätt dimensioner. Om bilderna är för stora kommer GTmetrix att visa tjäna skalade bildfel och berätta rätt dimensioner för att de ska ändras till.

&# X2705; Hur fixar du Ange fel i bilddimension i GTmetrix?

Se bildens HTML och kontrollera att den har en specificerad bredd och höjd, som visas i denna handledning.

&# X2705; Alla andra sätt att få bilder att ladda snabbare?

Att ta bort EXIF-data och använda ett CDN för att tjäna dina bilder kommer att göra mest skillnad utanför rekommendationerna i GTmetrix.

&# X2705; Vilken bildoptimering är bäst?

Jag använder ShortPixel eftersom det är praktiskt taget nollförlust i kvalitet och det fixar objektet Optimera bilder i GTmetrix.

Vad tror du?
Ser din GTmetrix-rapport lite bättre ut? Låt mig veta i kommentarerna! Och om du vill ha fler tips som ger dig ännu bättre poäng / belastningstider, se min fullständiga WordPress-hastighetsguide.

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