Så här optimerar du WordPress-bilder och gör din webbplats snabbare

Om du vill ge din besökare en bra användarupplevelse måste du se till att din webbplats laddas snabbare så att den inte frustrerar dem. Faktum är att hastigheten på din webbplats kan göra eller bryta din online-verksamhet. Du MÅSTE optimera WordPress-bilder för att göra din webbplats snabbare - eftersom bilder vanligtvis är den tyngsta delen av ditt innehåll,

Walmart har hittat en 2% ökning av omvandlingsfrekvensen när de förbättrade hastigheten med 1 sekund.

Och Amazon fann en ökning av intäkterna med 1% för varje 100 millisekund förbättring av deras webbplatshastighet. Denna statistik visar att det är viktigt för din webbplats att göra din webbplats snabb. Ett enkelt sätt att göra din webbplats snabbare är att optimera alla bilder på din WordPress-webbplats.

Innehåll[Show]
 

optimera wordpress-bilder för förbättrade omvandlingsfrekvenser

Om du ännu inte har betraktat hastigheten på din WordPress-webbplats som en viktig del av ditt företag måste du tänka om igen och börja vidta åtgärder för att förbättra hastigheten på din WordPress-webbplats.

Rekommendera läsning: Hur man får en snabb WordPress-webbplats - en komplett guide [25 åtgärder]

Det finns många sätt att göra din webbplats snabbare. Några av dem listas nedan.

  • Undvik att använda för många WordPress-plugins
  • Använd WordPress CDN-tjänster
  • Optimera CSS-leverans
  • Optimera WordPress-bilder

Bilder som inte har optimerats för webben är vanligtvis stora. Det tar längre tid att ladda dessa bilder. Det är viktigt att du optimerar dina bilder genom att göra dem så små som möjligt. Men oftast är processen att optimera bilder för WordPress och din webbplats tråkig eller kommer i vägen för att producera innehåll.

I det här inlägget kommer vi att förklara olika sätt att optimera dina WordPress-bilder och därmed få din webbplats att laddas snabbare.

Komprimera bilder eller spara dem på webben

Det är ingen idé att storleken på din bild kan påverka laddningstiden för din WordPress-webbplats. Eftersom bilder med hög upplösning har en större filstorlek är det alltid bättre att komprimera bilderna innan du laddar upp.

Nu kanske du har en fråga: vad är WordPress-bildkomprimering och hur kan den minska storleken utan att påverka kvaliteten?

Komprimering är processen att dramatiskt minska bildstorleken genom att algoritmiskt ta bort bildinformation som ett mänskligt öga inte kan uppfatta. Detta är ett mycket effektivt sätt att optimera WordPress-bilder.

Även om bildkomprimering är en säker metod för att minska bildstorleken, förlorar processen ibland det faktiska innehållet i bilderna under processen när det gäller komprimering av JPEG-filer. Detta är den enda nackdelen med detta tillvägagångssätt. Kom ihåg att kontrollera resultaten efter komprimering noga för att se till att du är nöjd med resultatet av komprimeringen.

WP Smush är ett populärt WordPress-plugin som gör att du enkelt kan minska bildfilstorleken genom att skanna varje bild du laddar upp och ta bort onödig datainformation. Den gratis versionen av detta plugin låter dig komprimera bilder upp till 1 MB i storlek medan du med pro-versionen kan komprimera bilder upp till 32 MB.

Du kan ladda ner WP Smush här.

wp smush för att optimera wordpress-bilder

Observera också att detta plugin låter dig optimera alla de nyligen uppladdade bilderna till din WordPress-webbplats. Om du vill komprimera befintliga bilder kan du använda länken Bulk Smush.it under fliken mediebibliotek för att optimera befintliga WordPress-bilder.

Lata laddningar: optimera laddningstiden för WordPress-bilder

[UPPDATERING: WordPress 5.4 har lat laddning inbyggd i kärnan, så du behöver bara utföra den här åtgärden om din WordPress-version ligger under den här versionen]

Vi vet alla att "En bild är värd tusen ord".

Men att använda för många bilder på en sida kan göra att din webbplats laddas långsammare.

Ett enkelt sätt att förbättra laddningstiden är att ta bort onödiga bilder och behålla det som är absolut nödvändigt. Men inte alla vill minska antalet bilder som används på en webbsida, bara för att göra sidan snabbare.

Hur kan denna fråga lösas?

Du kanske har lagt märke till det redan - webbplatser som använder många bilder på varje sida löser problemet genom att endast ladda bilden när den är synlig för användaren. Denna taktik minskar inte bara sidens laddningstid, men det sparar också serverbandbredd. Detta kallas lat laddning. Eftersom bilden är "lat" kommer den bara upp när den behövs.

Om du använder WordPress är det lättare att göra att bilden laddas bara när den är synlig. Allt du behöver göra är att installera ett Lazy load-plugin. Återigen är detta ett utmärkt sätt att optimera WordPress-bilder för förbättrad hastighet.

Du kan ladda ner Plugga för lat last här.

Optimera wordpress-bilder med lat belastning

Det här pluginet behöver ingen ytterligare konfiguration eftersom det fungerar direkt från installationen och aktivering.

Läs mer: Divi vs Elementor

Använd det optimerade och korrekta bildformatet

JPEG, PNG och GIF är de mest populära bildformaten.

Att känna till skillnaderna mellan varje bildformat låter dig använda rätt format på din webbplats, vilket till och med hjälper dig när det gäller bildoptimering.

Vilket format är bättre för optimerade WordPress-webbplatsbilder och när ska du använda det? Nedan följer några tips:

  • GIF: Använd GIF när din bild är för liten och använder relativt less antal färger. Till exempel är GIF ett bra val för clipart, kulor och diagram. Å andra sidan kunde komplexa bilder med förbättringar som släppskuggor inte visas korrekt med GIF.
  • JPEG / JPG: Den är lämplig för komplexa bilder med många färgvariationer eller om den innehåller fotografiska bilder.
  • PNG: PNG-format passar bäst för transparenta bilder.
  • WebP: detta är det bästa formatet idag, men för att skapa dessa bilder krävs serverstöd på din webbplats

Observera att detta bara är allmänna rekommendationer. Liksom alla regler finns det undantag, och vissa av dessa regler är avsedda att brytas.

Använd effektivt webbläsarens cache

När du laddar upp bilder på en webbsida, se till att du laddar upp dem till en enda katalog. Att ladda upp dina bilder till en enda katalog på en webbsida hjälper webbläsaren att enkelt ladda dessa bilder med hjälp av webbläsarens cache under upprepade besök.

Det går bra om du laddar upp bilder via standardbildsuppladdaren för WordPress. Men om du till exempel skapar HTML-målsidor på WordPress är chansen att du inte använder standard WordPress-bilduppladdaren. I dessa fall, istället för att ladda upp bilderna på en webbsida till olika kataloger, se till att du laddar upp dem alla i en enda katalog.

Om du vill läsa mer om webbläsarens cachning och hur du använder det, kolla in vår detaljerade artikel här: Hur man utnyttjar webbläsarcaching i WordPress med eller utan ett plugin [5 sätt]

 

Använd samma bild flera gånger

Ett annat sätt att använda webbläsarcaching för att minska bildbandbredden är att använda samma bilder flera gånger på hela webbplatsen.

När du till exempel använder logotyper eller menyalternativ från en sida, se till att du ringer till samma bilder på hela webbplatsen, så att användare inte behöver ladda ner dem flera gånger men en gång, och webbläsare kan visa bilderna från webbläsaren cache.

När du använder en texturerad bakgrund, se till att du använder mindre bilder upprepade gånger istället för att använda en enda stor bild. Detta kan också bidra till att minska laddningstiden.

Som standard, när du laddar upp bilder med hjälp av mediauppladdare på WordPress-instrumentpanelen, går det in i mappen beroende på när du laddar upp den. Det betyder att alla bilder som laddas upp under en månad kommer att finnas i en enda katalog.

Om du till exempel laddar upp en bild 2021 januari kommer den att finnas i den här katalogen: wp-content / uploads / 2021/01.

Låt oss titta på fördelarna med att ladda upp via medieuppladdaren och sedan berättar vi vad du bör tänka på när du inte laddar upp till din medieuppladdare för att påskynda din webbplats.

Medieuppladdaren gör att bilden laddas snabbare: Laddningen går snabbare om bilderna lagras i samma mapp när du surfar på en webbsida. När bilderna anropas upprepade gånger kan webbläsaren enkelt hämta dem från webbläsarens cache om de finns i en enda mapp.

Ofta använder WordPress-bloggare dock inte standardmediauppladdaren, speciellt när de arbetar på en anpassad målsida. För att göra det lättare laddar de upp bilder i en separat katalog.

Se till att du laddar upp alla bilder på den sidan i en enda katalog istället för att ladda upp till flera kataloger. Denna taktik kan förbättra laddningstiden eftersom filcachningen blir enklare vid upprepade besök.

Använd CSS istället för bilder

Vet du att du kan förbättra laddningstiden genom att inte använda någon bild alls?

Det är till exempel helt möjligt att generera vissa former genom att använda enkel CSS istället för bilder som rundade rektanglar, lutningar, släppskuggor och transparenta bilder. Med detta sagt, se till att du håller ett öga på webbläsarens kompatibilitetskontroll när du byter ut en bild med CSS eftersom inte alla webbläsare kan stödja dessa tekniker.

Om författaren
Shahzad Saeed
Författare: Shahzad Saeedwebbplats: http://shahzadsaeed.com/
Shahzaad Saaed har visats på ett stort antal myndighetswebbplatser, som en WordPress-expert. Han specialiserar sig på innehållsmarknadsföring för att hjälpa företag att öka sin trafik.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...