Hur du skapar bilder snabbare på din WordPress-webbplats

04.06.2020
WordPress 'Hur du skapar bilder snabbare på din WordPress-webbplats
0 11 мин.

Så du vill att dina bilder ska laddas snabbare?


Tja, jag kommer inte att bli dally. Låt oss dyka rätt in i de goda sakerna!

Det finns tre sätt att få bilder att ladda snabbare i WordPress:

  • Resize
  • Komprimera
  • Lat last

I det här inlägget förklarar jag hur var och en av dessa tekniker fungerar och varför de kommer att göra att din webbplats laddas snabbare. Jag ska också visa dig hur du implementerar varje taktik med både manuella lösningar och plugin-rekommendationer.

Denna första teknik är extremt enkel men ofta förbises av WordPress nybörjare.

Hur man optimerar bilder i WordPress

Ändra storlek på dina bilder

Det absolut enklaste sättet att få dina bilder att ladda snabbare är att ändra storlek på dem. Låt mig förklara.

Vad som ändrar storlek?

När jag säger ”ändra storlek” menar jag att ändra måtten på en bild, och i det här fallet vill du minska måtten på alltför stora bilder.

Som exempel tar bloggare ibland fotografier på sina telefoner eller digitalkamera och laddar upp dem till sina bloggar. De oredigerade kopiorna av fotona kan vara så stora som 5 000 px breda. Tänk nu på detta …

Bredden på postsektionen på din webbplats är förmodligen inte större än 800 px. Texten du läser just nu sträcker sig bara över 700 pixlar över hela sidan, så tänk dig att lägga till en bild som är 5000 px bred här. Det skulle vara sätt större än det behöver vara och även om den skulle nedskalas för att passa på sidan, är den inlästa bildfilen fortfarande massiv och extremt slösaktig. Och det är för …

Bilder som har större dimensioner har också större filstorlekar.

När det gäller prestanda och få dina bilder att ladda snabbare är att minska dimensionerna på din bild ett utmärkt sätt att minska filstorleken drastiskt, och detta gör att bilden laddas snabbare.

Låt oss gå tillbaka till mitt exempel och antar att bilden är 5000 px bred och hög. Om du minskade den från 5 000 pixlar ner till bara 700 pixlar skulle bilden faktiskt använda 99% färre pixlar. Med andra ord skulle filstorleken minska med cirka 99%. Om bilden var 5 MB skulle den hamna bara 50 kB och den skulle laddas 99% snabbare på din webbplats.

Ändra storlek på bilder

Om du inte menar storleken på storleken på dina bilder, är det nästan säkert att göra några vinster.

Det finns några sätt du kan ändra storlek på dina bilder så att de passar perfekt på webbplatsen.

Ändra storleken på dina bilder manuellt

Innan du laddar upp en ny bild till din webbplats ska du ändra storlek på den manuellt med hjälp av de inbyggda bildredigeringsverktygen på din dator.

Om du har en extremt stor bild som i mitt exempel kommer det omedelbart att göra en stor skillnad. När bilden har ändrats kan du ladda upp den till ditt mediebibliotek.

Även om du kommer att använda bilden i en ljuslåda eller skjutreglage, finns det normalt ingen anledning att den är bredare än 2 000 pixlar. Om bilden kommer att finnas i ett inlägg eller ett sidinnehållsområde, kan du förmodligen klara dig med att bilden är 800px bred.

Den här metoden för att ändra storlek på bilder fungerar bra, men det hjälper inte med bilder som redan har laddats upp till din webbplats. En enkel teknik för befintliga bilder är att helt enkelt välja en annan storlek.

Använd mindre storlekar

När du laddar upp en bild till ditt mediebibliotek skapar WordPress upp till 3 ytterligare versioner: Miniatyrbild, Medium och Stor.

Om du besöker sidan Medieinställningar ser du att du kan välja dessa storlekar här:

WordPress Media Inställningar

Medan du kan ändra inställningarna, är standardstorleken storleken 1024px vilket är tillräckligt stort för att använda för inlägg utan att vara för slöseri. Du kan använda den här storleken för alla bilder du inkluderar i dina inlägg.

Om du vill ändra storleken på en bild som du har lagt till i ett inlägg klickar du på den i redigeraren och du ser rullgardinsmenyn Bildstorlek i den högra sidofältet.

Storlek på WordPress Image

Välj ”Stor” storlek och uppdatera inlägget. Om du har några överdimensionerade bilder låter denna teknik dig snabbt servera en mer lämplig storlek som laddas snabbare utan att behöva ladda om och byta ut originalet.

Som sagt, detta kan vara väldigt tråkigt om du har dussintals inlägg med dussintals bilder. Det finns en ännu snabbare och effektivare metod tillgänglig.

Automatiskt ändra storlek med ett plugin

Istället för att ändra storlek på bilderna själv kan du låta ett plugin göra det automatiskt för dig. Ingenting slår när det gäller automatiserad bildstorlek Optimole plugin.

Optimole Image Optimizer

Det fungerar inte som du förväntar dig.

I stället för att redigera bilderna i ditt mediebibliotek, behåller Optimole sina egna kopior av dina bilder och serverar dem från ett högpresterande CDN. På så sätt ändras dina original aldrig på något sätt.

Dessutom behöver du inte ge Optimole en enda storlek för att använda för dina bilder. Snarare får den storleken på besökarens skärm och genererar en optimalt stor version av varje bild i farten. Det betyder att någon på en mobil enhet kan ladda en 400px-version av en bild medan en annan besökare på en bärbar dator får en 700px-version av samma bild.

Denna metod för att ändra storlek är mycket lättare att implementera och mer effektiv för mobila enheter, vilket är särskilt viktigt eftersom mobila besökare ofta tenderar att vara på långsammare anslutningar.

Om du vill lära dig hur du använder Optimole kan du följa min fullständiga genomgångsvideo:

Jag rekommenderade att du ändrar storleken först eftersom oavsett om du gör det manuellt eller automatiserar det med ett plugin är det enkelt och kan ge enorma vinster.

Om dina bilder redan har rätt storlek för din webbplats kan du fortfarande förbättra webbplatsens prestanda mycket mer med komprimering.

Komprimera dina bilder

Komprimering är ett sätt att minska filstorleken på en bild utan att ändra dess dimensioner.

Det finns två typer av bildkomprimering.

Den första typen av bildkomprimering kallas “förlustfri” komprimering.

Förlustfri komprimering

Med en förlustfri optimering redigeras faktiskt inte själva bilden. Snarare tar den här tekniken bort alla metadata lagrade i bildfilen. Till exempel lagrar bilder ofta namnet på enheten som används för att ta bilden, det datum då fotot togs och ibland till och med GPS-koordinaterna för bilden.

Eftersom dessa data vanligtvis är ganska begränsade, kan förlustfri optimering bara minska storleken på din bild med 1-5%, men det finns verkligen ingen anledning att inte använda dem eftersom det inte påverkar bildkvaliteten.

De verkliga vinsterna kommer från förlustoptimering.

Förlorad kompression

Som du kan förvänta dig optimerar förlustkomprimering själva bilden och resulterar i kvalitetsförsämring. Men här är saken …

Komprimeringsalgoritmer är så bra idag att du ofta kan minska filstorleken på bilden med 50-70% utan någon tydlig skillnad. Om du inte är en professionell fotograf och behöver dina bilder för att vara perfekt skarpa på 4k-skärmar kommer du inte ens att märka kvalitetsförlusten.

Hur komprimera dina bilder

Du kan manuellt komprimera dina bilder med ett verktyg som TinyPNG innan du laddar upp dem, eller använder ett plugin för att automatisera saker.

ShortPixel är ett bra plugin för att optimera bilderna på din webbplats. Det kan optimera dem direkt när du laddar upp dem och bulkoptimerar alla bilder som redan finns i ditt mediebibliotek.

shortpixel

Jag rekommenderade Optimole för att ändra storlek på bilden och det komprimerar bilder också mycket effektivt. Återigen optimerar det inte originalen som är lagrade i ditt mediebibliotek, utan komprimerar snarare kopiorna som det tjänar till dina besökare.

Du kan hitta några fler pluginprogram för bildoptimering här.

Med dina storlekar och komprimerade bilder kommer din webbplats att laddas mycket snabbare, men det finns en sista optimering för bilder du kan göra.

Implementera lat laddning

Lat laddning är ett riktigt smart sätt att ytterligare optimera dina bilder.

Låt oss säga att du har ett blogginlägg med 12 bilder i det. När någon besöker din webbplats kommer inte alla dessa bilder att synas direkt på skärmen. De måste bläddra längre ned för att de flesta ska dyka upp. Så varför ladda alla 12 direkt?

Vid lat laddning laddas bara de bilder som visas på skärmen. Istället för att 12 bilder laddas, kanske bara 2-3 laddas istället. När besökaren sedan rullar ner på sidan laddas de återstående bilderna när de kommer in på skärmen. Detta innebär att den initiala belastningen är mycket snabbare, och eftersom de flesta besökare inte rullar hela vägen ner på sidan laddas aldrig många bilder vilket sparar värdefulla serverresurser.

Den här videon har visualisering som förklarar den bättre om du vill ha en tydligare bild av hur lat laddning fungerar:

Nu när du är såld på konceptet så här kan du implementera lat laddning på din webbplats.

Hur man använder lat laddning

Återigen läggs denna prestationsoptimeringsteknik enkelt till WordPress med ett plugin.

Om du letar efter ett gratis alternativ kan du prova Optimole eller a3 Lazy Load.

Med Optimole slås på lat laddning automatiskt och a3-plugin är lätt att konfigurera.

Om du inte bryr dig om att betala, kolla också ut WP-raket. Den har högpresterande cache och en mängd andra hastighetsverktyg.

För att aktivera lat laddning med WP Rocket, behöver du bara vända den här omkopplaren:

WP Rocket Media

Det kan inte vara enklare!

Njut av dina snabbare inläsning av bilder

För att sammanfatta vad du just har lärt dig …

Stora bilder som laddas upp till din webbplats går extremt långsamt. Bara en av dessa bilder kan stoppa din webbplats.

Det viktigaste du kan göra för att påskynda dina bilder är att ändra storlek på alltför stora bilder så att de är lämpliga för din webbplats. Du kan göra detta manuellt eller automatisera det med Optimole.

Därefter har bildkomprimeringsalgoritmer tagit långt och idag kan du minska filstorleken på en bild med 50-70% utan att påverka kvaliteten på ett märkbart sätt. Det här är ingen hjärna. Använd ShortPixel eller Optimole för att komprimera alla bilder på din webbplats.

Slutligen är lat laddning ett bra sätt att selektivt ladda bilder. Du kan använda Optimole, a3 Lazy Load eller WP Rocket för att omedelbart implementera lat laddning på din webbplats.

Om du inte har använt någon av dessa tekniker kommer din webbplats att laddas dramatiskt snabbare när den har implementerats. Det kommer att blåsa bort dig.

Har du några frågor om begrepp och tekniker i det här inlägget? Har du ett annat tips att dela? Skicka in kommentarerna nedan!

Du kanske också gillar,

Hur man fixar en långsam WordPress-webbplats och administratörspanel (permanent)

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Понравилась статья?
    Комментарии (0)
    Комментариев нет, будьте первым кто его оставит

    Комментарии закрыты.

    Adblock
    detector