Visste du att att optimera dina bilder innan du laddar upp till WordPress kan ha en enorm inverkan på din webbplatshastighet?
När starta en ny blogg, många nybörjare laddar helt enkelt upp bilder utan att optimera dem för webben. Dessa stora bildfiler gör din webbplats långsammare.
Du kan fixa detta genom att använda bästa praxis för bildoptimering som en del av din vanliga bloggrutin.
I den här artikeln kommer vi att visa dig hur du optimerar dina bilder för snabbare webbprestanda utan att förlora kvalitet. Vi kommer också att dela automatiska bildoptimeringsplugins för WordPress som kan göra ditt liv enkelt.
Eftersom detta är en omfattande guide om bildoptimering för webben har vi skapat en lätt att följa innehållsförteckning:
Vad är bildoptimering?
Bildoptimering är en process för att spara och leverera bilder i minsta möjliga filstorlek utan att minska den övergripande bildkvaliteten.
Även om processen låter komplex, är det faktiskt ganska enkelt nuförtiden. Du kan använda ett av de många plugins och verktyg för bildoptimering för att automatiskt komprimera bilder med upp till 80 % utan någon synlig förlust i bildkvalitet.
Här är ett exempel på en optimerad eller ooptimerad bild:
Som du kan se, när optimerad på rätt sätt kan samma bild vara upp till 80 % mindre än originalet utan någon kvalitetsförlust. I det här exemplet är bilden 52 % mindre.
Hur fungerar bildoptimering?
Enkelt uttryckt fungerar bildoptimering genom att använda komprimeringsteknik.
Kompression kan vara ”förlustfri” eller ”förlustfri”.
Förlustfri komprimering minskar den totala filstorleken med absolut ingen förlust av bildkvalitet. Med förlustig komprimering kan det bli en mindre kvalitetsförlust, men helst kommer det inte att märkas för dina besökare.
Vad innebär det att optimera bilder?
Du kanske har fått en rekommendation att optimera bilder från ditt WordPress-värdstöd eller ett hastighetstestverktyg och undrar vad du behöver göra.
Du måste minska filstorleken på dina bilder genom att optimera dem för webben. Vi visar dig hur du gör det steg för steg.
Vilka är fördelarna med bildoptimering?
Även om det finns många fördelar med att optimera dina bilder, här är de bästa som du bör känna till:
- Snabbare webbplatshastighet
- Förbättrad SEO-ranking
- Högre total konverteringsfrekvens för försäljning och leads
- Mindre lagring och bandbredd (vilket kan minska hosting- och CDN-kostnader)
- Snabbare säkerhetskopiering av webbplatser (vilket kan minska kostnaden för säkerhetskopiering)
Bilder är det näst tyngsta föremålet på en webbsida efter video. Enligt HTTP-arkiv, bilder utgör 21 % av en genomsnittlig webbsidas totala vikt.
Eftersom vi vet att snabba webbplatser rankas högre i sökmotorer (SEO) och har bättre konverteringar, är bildoptimering något som varje företagswebbplats måste göra om de vill lyckas online.
Nu kanske du undrar hur stor skillnad bildoptimering verkligen kan göra.
Enligt en Strangeloop-studie kan en försening på en sekund i webbplatsens laddningstid kosta dig 7 % av försäljningen, 11 % färre sidvisningar och en minskning av kundnöjdheten med 16 %.
Om dessa inte är tillräckliga skäl för att snabba upp din webbplats, så bör du veta att sökmotorer som Google också ger prioriterad SEO-behandling till webbplatser som laddar snabbare.
Det betyder att genom att optimera dina bilder för webben kan du både och förbättra webbplatsens hastighet och boost WordPress SEO-ranking.
Hur man sparar och optimerar bilder för webbprestanda
Nyckeln till framgångsrik bildoptimering för webbprestanda är att hitta den perfekta balansen mellan den lägsta filstorleken och acceptabel bildkvalitet.
De tre sakerna som spelar en stor roll vid bildoptimering är:
- Bildfilformat (JPEG vs PNG vs GIF)
- Komprimering (högre komprimering = mindre filstorlek)
- Bildmått (höjd och bredd)
Genom att välja rätt kombination av de tre kan du minska din bildstorlek med upp till 80 %.
Låt oss ta en titt på var och en av dessa mer i detalj.
1. Bildfilformat
För de flesta webbplatsägare är de enda tre bildfilformaten som verkligen spelar roll JPEG, PNG och GIF. Att välja rätt filtyp spelar en viktig roll vid bildoptimering.
För att göra det enkelt vill du använda JPEG-filer för foton eller bilder med många färger, PNG-filer för enkla bilder eller när du behöver genomskinliga bilder, och GIF-filer endast för animerade bilder.
För de som inte vet skillnaden mellan varje filtyp är PNG-bildformatet okomprimerat vilket betyder att det är en bild av högre kvalitet. Nackdelen är att filstorlekarna är mycket större.
Å andra sidan är JPEG ett komprimerat filformat som minskar bildkvaliteten något för att ge en betydligt mindre filstorlek.
Medan GIF bara använder 256 färger tillsammans med förlustfri komprimering vilket gör det till det bästa valet för animerade bilder.
På WPBeginner använder vi alla tre bildformat baserat på typ av bild.
2. Kompression
Nästa sak är bildkomprimering som spelar en stor roll vid bildoptimering.
Det finns olika typer och nivåer av bildkomprimering tillgängliga. Inställningarna för varje kommer att variera beroende på vilket bildkomprimeringsverktyg du använder.
De flesta bildredigeringsverktyg som Adobe Photoshop, ON1 FotoGIMP, Affinity Photo och andra kommer med inbyggda bildkomprimeringsfunktioner.
Du kan också spara bilder normalt och sedan använda ett webbverktyg som TinyPNG eller JPEGmini för enklare bildkomprimering.
Även om de kräver en del manuell ansträngning låter dessa två metoder dig komprimera bilder innan du laddar upp dem till WordPress, och det här är vad vi gör på WPBeginner.
Det finns också flera populära WordPress-plugins som Optimole och EWWW Image Optimizer som automatiskt kan komprimera bilder när du laddar upp dem första gången. Detta är bekvämt, och många nybörjare och till och med stora företag föredrar att använda dessa plugins för bildoptimering.
Vi kommer att dela mer om att använda WordPress-plugins senare i artikeln.
3. Bildmått
Normalt när du importerar ett foto från din telefon eller en digitalkamera har det en mycket hög upplösning och stora fildimensioner (höjd och bredd).
Vanligtvis har dessa bilder en upplösning på 300 DPI och dimensioner från 2000 pixlar och mer. Medan högkvalitativa foton är väl lämpade för tryckta eller stationära publicering, gör deras stora storlek dem olämpliga för webbplatser.
Att reducera bilddimensionerna till något mer rimligt kan avsevärt minska bildfilstorleken. Du kan helt enkelt ändra storlek på bilder med hjälp av bildredigeringsprogram på din dator.
Till exempel optimerade vi ett foto med en upplösning på 300 DPI och bildmått på 4900×3200 pixlar. Den ursprungliga filstorleken var 1,8 MB.
Vi valde JPEG-formatet för högre komprimering och ändrade måtten till 1200×795 pixlar. Filstorleken reducerades till bara 103 KB. Det är 94 % mindre än den ursprungliga filstorleken.
Nu när du känner till de tre viktiga faktorerna i bildoptimering, låt oss ta en titt på olika bildoptimeringsverktyg för webbplatsägare.
Bästa bildoptimeringsverktyg och program
Som vi nämnde tidigare kommer de flesta bildredigeringsprogram med bildoptimerings- och komprimeringsinställningar.
Utanför bildredigeringsprogrammet finns det också flera kraftfulla gratis bildoptimeringsverktyg som du kan använda för att optimera bilder för webben (med bara några klick).
Vi rekommenderar att du använder dessa verktyg för att optimera bilder innan du laddar upp dem till WordPress, speciellt om du är en perfektionist.
Denna metod hjälper dig att spara diskutrymme på ditt WordPress-värdkonto, och den garanterar den snabbaste bilden med bästa kvalitet eftersom du manuellt granskar varje bild.
Adobe Photoshop
Adobe Photoshop är ett förstklassigt bildredigeringsprogram som låter dig exportera bilder med en mindre filstorlek för webben.
Med hjälp av exportdialogrutan kan du välja ett bildfilformat (JPG, PNG, GIF) som ger dig den minsta filstorleken.
Du kan också minska bildkvalitet, färger och andra alternativ för att ytterligare minska filstorleken.
GIMP
GIMP är ett gratis alternativ med öppen källkod till Adobe Photoshop. Det kan användas för att optimera dina bilder för webben. Nackdelen är att det inte är lika lätt att använda som vissa andra lösningar på den här listan.
Först måste du öppna din bild i GIMP och sedan välja Arkiv » Exportera som… alternativ. Detta kommer att ta upp dialogrutan Exportera bild där du kan ge din fil ett nytt namn. Därefter måste du klicka på knappen ”Exportera”.
Du kommer nu att se alternativen för bildexport. För JPEG-filer kan du använda reglaget ”Kvalitet” för att välja komprimeringsnivå och minska filstorleken.
Slutligen bör du klicka på knappen ”Exportera” för att spara den optimerade bildfilen.
TinyPNG
TinyPNG är en gratis webbapp som använder en smart förlustkompressionsteknik för att minska storleken på dina PNG- och JPEG-filer. Allt du behöver göra är att gå till deras hemsida och ladda upp dina bilder genom att enkelt dra och släppa.
De kommer att komprimera bilden och ge dig en nedladdningslänk.
De har också en tillägg för Adobe Photoshop vilket är vad vi använder som en del av vår bildredigeringsprocess eftersom det låter dig komma åt TinyPNG inifrån Photoshop.
För utvecklare har de ett API för att konvertera bilder automatiskt, och för nybörjare har de ett WordPress-plugin som gör det åt dig. Mer om detta senare.
JPEGmini
JPEGmini använder en förlustfri komprimeringsteknik som avsevärt minskar storleken på bilder utan att påverka deras perceptuella kvalitet. Du kan också jämföra kvaliteten på din originalbild och den komprimerade bilden.
Du kan använda deras webbversion gratis, eller köpa programmet till din dator. De har också ett betald API för att automatisera processen för din server.
ImageOptim
ImageOptim är ett Mac-verktyg som låter dig komprimera bilder utan att förlora någon kvalitet genom att hitta de bästa komprimeringsparametrarna och ta bort onödiga färgprofiler.
Ett Windows-alternativ till detta är Triimage.
Bästa bildoptimeringsplugins för WordPress
Vi tror att det bästa sättet att optimera dina bilder är att göra det innan du laddar upp dem till WordPress. Men om du kör en webbplats med flera författare eller behöver en automatiserad lösning kan du prova en WordPress plugin för bildkomprimering.
Här är vår lista över de bästa plugins för WordPress-bildkomprimering:
- Optimoleett populärt plugin av teamet bakom ThemeIsle
- EWWW Image Optimizer
- JPEG, PNG & WebP bildkomprimeringett plugin från TinyPNG-teamet som nämns ovan
- Föreställ digett plugin av de populära WP raket team
- ShortPixel Image Optimizer
- Smush
- reSmush.it
Dessa WordPress bildoptimeringsplugins hjälper dig att snabba upp din webbplats.
Sista tankar och bästa praxis för bildoptimering
Om du inte sparar bilder optimerade för webben måste du börja göra det nu. Det kommer att göra en enorm skillnad i din webbplatshastighet, och dina användare kommer att tacka dig för det.
För att inte tala om, snabbare webbplatser är bra för SEO, och du kommer sannolikt att se en ökning i din sökmotorrankning.
Utanför bildoptimering är de två saker som avsevärt kommer att hjälpa dig att snabba upp din webbplats att använda en WordPress caching plugin och använder en WordPress CDN.
Alternativt kan du använda en hanterad WordPress-värd företag eftersom de ofta erbjuder både cachning och CDN som en del av plattformen.
Vi hoppas att den här artikeln hjälpte dig att lära dig hur du optimerar dina bilder i WordPress. Du kanske också vill se vår guide på hur du förbättrar din WordPress-säkerhet och den bästa WordPress-plugins för företagswebbplatser.