Så här optimerar du images för webbprestanda utan att förlora kvalitet

Om du optimerar dina bilder innan du laddar upp dem till WordPress förbättras hastigheten på din webbplats avsevärt. Ändå har många nybörjare långsamma webbplatser helt enkelt för att de laddar upp oupptimerade bilder.

På WPBeginner gör vi bästa praxis för bildoptimering till en del av vår vanliga bloggrutin. Vi ser till att alla våra författare skapar bilder med rätt dimensioner och sedan minskar bildfilstorleken med hjälp av en mängd olika grafikverktyg.

I den här artikeln kommer vi att visa you hur du optimerar dina images för snabbare webbprestanda utan att förlora kvalitet. Vi kommer också att dela med oss av tillägg för automatisk optimering av images för WordPress som kan göra ditt liv enklare.

Eftersom det här är en omfattande przewodnik om bildoptimering för webben har vi skapat en innehållsförteckning som är lätt att följa:

1. Vad är optimering av images?

Image-optimering är processen för att save och leverera images i minsta möjliga filstorlek utan att minska den totala bildkvaliteten.

Även om processen låter komplex är det faktiskt ganska enkelt nuförtiden. You can use one of the many image optimization plugins and tools to automatically compress images by up to 80% without any visible loss in image quality.

Här är ett exempel på en optimerad jämfört med en icke-optimerad image:

Som you kan se kan samma image, när den optimeras på rätt sätt, vara upp till 80% mindre än originalet utan någon kvalitetsförlust. I det här exemplet är imagen 52% mindre.

Hur fungerar optimering av images?

I enkla termer fungerar imageoptimering genom att använda komprimeringsteknik.

Komprimering kan vara ”lossy” eller ”lossless”.

Förlustfri komprimering minskar den totala filstorleken utan att kvaliteten på images försämras. Med lossy-komprimering kan det bli en mindre kvalitetsförlust, men helst ska den inte vara notice för yours besökare.

Vad innebär det att optimera images?

Du kanske har fått en rekommendation om att optimera images från ditt WordPress webbhotell eller ett hastighetstestverktyg och undrar vad du behöver göra.

You will need to reduce the file size of your images by optimizing them for the web. Vi visar dig hur du gör det steg för steg.

2. Vilka är fördelarna med optimering av images?

Det finns många fördelar med att optimera dina images, men här är de högst upp som du bör känna till:

• Snabbare website
• Förbättrad sökmotorsoptimering av rankingen
• En högre total konvertering för försäljning och leads
• Mindre lagring och bandbredd (vilket kan minska kostnaderna för webbhotell och CDN)
• Snabbare säkerhetskopiering av websites (vilket kan minska kostnaden för lagring av backup)

Images är det näst tyngsta objektet på en page efter videoklipp. Enligt HTTP archive utgör images 42% av en genomsnittlig web page’s totala vikt.

Eftersom vi vet att snabba webbplatser rankas högre i sökmotorer (SEO) och har bättre konverteringar är image-optimering något som alla företags websites måste göra om de vill lyckas online.

Nu kanske du undrar hur stor skillnad optimering av images egentligen kan göra.

Enligt en studie från Strangeloop kan en sekunds fördröjning av laddningstiden för en website kosta you 7% av försäljningen, 11% färre sidvisningar och en 16% minskning av kundnöjdheten.

Om detta inte är tillräckliga skäl för att snabba upp din website, så bör du veta att search engines som Google också ger sökmotorsoptimering till websites som hämtar snabbare data.

Det innebär att genom att optimera dina images för webben kan du både förbättra hastigheten på din website och öka sökmotorsoptimeringen i WordPress.

Video Tutorial

Subscribe to WPBeginner

Om du föredrar skriftliga instruktioner är det bara att fortsätta läsa.

3. Så här sparar och optimerar du images för webbprestanda

Nyckeln till framgångsrik bildoptimering för webbprestanda är att hitta den perfekta balansen mellan minsta möjliga filstorlek och godtagbar bildkvalitet.

De tre saker som spelar en stor roll vid optimering av images är:

• Filformat för image (JPEG vs. PNG vs. GIF)
• Komprimering (högre komprimering = mindre filstorlek)
• Images dimensioner (höjd och bredd)

Genom att välja rätt kombination av de tre kan du minska storleken på din image med upp till 80%.

Låt oss ta en titt på var och en av dessa i mer detalj.

1. Filformat för images

För de flesta som äger en website är JPEG, PNG och GIF de enda tre format för image-filer som verkligen spelar någon roll. Att välja rätt filtyp spelar en viktig roll i optimeringen av images.

För att hålla det enkelt vill du använda JPEG-filer för foton eller bilder med många färger, PNG-filer för enkla eller transparenta bilder och GIF-filer endast för animerade bilder.

För den som inte känner till skillnaden mellan filtyperna är formatet PNG okomprimerat, vilket innebär att det är en image av högre kvalitet. Nackdelen är att filstorlekarna är mycket större.

JPEG är å andra sidan ett komprimerat format som minskar kvaliteten på bilderna 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 images.

På WPBeginner använder vi alla tre formaten beroende på vilken typ av image det handlar om.

2. Komprimering

Nästa sak är bildkomprimering som spelar en stor roll vid optimering av images.

Det finns olika typer och nivåer av komprimering av images available. Settings för varje typ varierar beroende på vilket komprimeringsverktyg som används i din image.

De flesta bildredigeringsverktyg gillar Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo och andra har inbyggda funktioner för bildkomprimering.

Du kan också save images normalt och sedan använda ett webbverktyg som gillar TinyPNG eller JPEGmini för enklare bildkomprimering.

Även om de kräver en viss manuell ansträngning, tillåter dessa två metoder dig att komprimera images innan du uppladar dem till WordPress, och det är vad vi gör på WPBeginner.

Det finns också flera populära WordPress tillägg som gillar Optimole och EWWW Image Optimizer som automatiskt kan komprimera images när du först uploadar dem. Detta är praktiskt och många Beginnare och även stora företag föredrar att använda dessa tillägg för optimering av images.

Vi kommer att delge mer om hur du använder WordPress tillägg senare i artikeln.

3. Imagely Dimensioner

När du importerar ett foto från din telefon eller en digitalkamera har det normalt en mycket hög upplösning och stora dimensioner (höjd och bredd).

Vanligtvis har dessa foton 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 tryck eller desktop publishing, gör deras stora storlekar dem olämpliga för websites.

Om du minskar dimensionerna på bilderna till något mer rimligt kan du minska filstorleken på bilderna avsevärt. Du kan helt enkelt resize images med hjälp av ett bildredigeringsprogram på din dator.

Till exempel optimerade vi ett foto med en upplösning på 300 DPI och image-dimensioner på 4900×3200 pixlar. Den ursprungliga filstorleken var 1,8 MB.

Vi valde JPEG-formatet för högre komprimering och ändrade dimensionerna till 1200×795 pixlar. Filstorleken minskades till bara 103 KB. Det är 94% mindre än den ursprungliga filstorleken.

Nu när du känner till de tre viktiga faktorerna för optimering av images ska vi ta en titt på olika tools för optimering av images för ägare av websites.

4. Bästa verktyg och program för optimering av images

Som vi nämnde tidigare har de flesta program för edit av bilder inställningar för optimering och komprimering av bilder.

Utanför programvaran för bildredigering finns det också flera kraftfulla gratis verktyg för bildoptimering som du kan använda för att optimera images för webben (med bara några clicks).

Vi rekommenderar att du använder dessa tools för att optimera images innan du uploadar dem till WordPress, särskilt om du är perfektionist.

Denna metod hjälper dig att save diskutrymme på ditt WordPress webbhotell account, och det garanterar den snabbaste bilden med den bästa kvaliteten eftersom du manuellt reviewer varje bild.

Adobe Photoshop

Adobe Photoshop är ett premiumprogram för redigering av bilder som låter you exportera images med en mindre filstorlek för webben.

I dialogrutan för att exportera kan du välja det format (JPG, PNG, GIF) som ger dig den minsta filstorleken.

Du kan också minska kvaliteten på image, färger och andra alternativ för att ytterligare minska filstorleken.

GIMP

GIMP är ett gratis alternativ till Adobe Photoshop med open source. Det kan användas för att optimera dina images för webben. Nackdelen är att det inte är lika användarvänligt som vissa andra lösningar på den här listan.

Först måste du öppna din image i GIMP och sedan välja alternativet File ” Export As…. Detta kommer att visa dialogrutan Exportera Image, där du kan ge din fil ett new namn. Därefter måste du clicka på knappen ”Exportera”.

You will now see the image export options. För JPEG-filer kan du använda slidern ”Quality” för att välja komprimeringsnivå och minska filstorleken.

Slutligen ska du klicka på knappen ”Exportera” för att spara den optimerade image-filen.

LitenPNG

TinyPNG är en gratis app som använder en smart förlustkomprimeringsteknik för att minska storleken på dina PNG- och JPEG-filer. Allt du behöver göra är att gå till deras website och uploada dina images med hjälp av enkel drag and drop.

De komprimerar imagen och ger dig en länk till download.

De har också en utökning för Adobe Photoshop, vilket är vad vi använder som en del av vår process för redigering av image eftersom det låter dig komma åt TinyPNG från Photoshop.

För utvecklare har de ett API för att konvertera images automatiskt. För Beginnare har de dessutom ett plugin för WordPress som gör det åt dig. Vi kommer att prata mer om detta senare.

JPEGmini

JPEGmini använder en förlustfri komprimeringsteknik som avsevärt minskar storleken på images utan att påverka deras upplevda kvalitet. You can also compare the quality of the original image and the compressed image.

You can use their web version for free or purchase the program for your computer. De har också ett betalt API för att automatisera processen för din server.

ImageOptim

ImagOptim är ett Mac-verktyg som tillåter dig att komprimera images 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 Trimage.

5. Bästa tillägg för optimering av images för WordPress

Vi anser att det bästa sättet att optimera dina images är att göra det innan du uppladdar dem till WordPress. Men om du runar en site med multi-site eller behöver en automatiserad lösning, kan du prova ett WordPress plugin för bildkomprimering.

Här är vår lista över de bästa tillägg för komprimering av images i WordPress:

1. Optimole, ett populärt plugin av teamet bakom ThemeIsle
2. EWWW Image Optimizer
3. JPEG, PNG & WebP Image Compression, ett plugin av TinyPNG-teamet som nämns ovan
4. Imagify, ett plugin från det populära WP Rocket-teamet
5. ShortPixel Image Optimizer
6. Smush
7. reSmush.it
8. Envira Gallery är ett tillägg för WordPress gallery med built-in komprimering av images

Dessa WordPress tillägg för optimering av images hjälper dig att snabba upp din website.

6. Slutliga tankar och bästa praxis för optimering av Images

Om du ej save images som är optimerade för webben måste du börja göra det nu. Det kommer att göra en enorm skillnad i hastigheten på din site och dina användare kommer att tacka dig för det.

För att inte nämna, snabbare webbplatser är bra för sökmotorsoptimering, och du kommer sannolikt att se en ökning av din search engine ranking.

Bortsett från optimering av images är de två saker som kommer att hjälpa dig att snabba upp din website att använda en WordPress caching plugin och använda en WordPress CDN.

Alternativt kan du använda ett hanterat WordPress webbhotell eftersom de ofta erbjuder både caching och CDN som en del av plattformen.

Expertguider för att förbättra WordPress prestanda

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 läsa några andra artiklar om hur du kan förbättra WordPress prestanda:

• Den ultimata guiden för att öka hastigheten och prestandan i WordPress
• Hur man snabbar upp WooCommerce prestanda
• Bästa tillägg för caching i WordPress för att snabba upp din website
• Hur man optimerar Core Web Vitals för WordPress (Ultimate Guide)
• Så här minskar du tiden till första byte (TTFB) i WordPress – Experttips
• Så här använder du tillägget GTmetrix för att förbättra prestandan på din WordPress site
• Snabbaste webbhotell för WordPress (prestandatester)
• Viktiga metrics att mäta på din site i WordPress
• Hur man korrekt run testar hastigheten på en website
• Så här stresstestar du en website i WordPress

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.