Hur du optimerar bilder för webb och prestanda

Lita på oss, du vill inte att Google ska hata din webbplats. Lyckligtvis kan du minska din bilds filstorlek för att förbättra din webbplatsprestanda. Ett problem med att formatera dem är att ändringarna ofta minskar deras kvalitet (vilket i sin tur kan få besökaren att hata din webbplats). Det är inte något dåligt så länge du inte gör dem fula. Det finns några knep och tekniker som gör att du kan minska bildens filstorlek och ändå göra dem tillräckligt fina för att stolt visa dem på din webbplats. Så låt oss ta en titt på hur du formaterar dina bilder utan att göra dem fula, liksom hur man optimerar bilder för webb och prestanda.

• Fördelarna med att formatera dina bilder
• Hur du optimerar bilder för webb och prestanda
• WordPress-plugins för bildoptimering du kan använda
• Fallstudie för att optimera bilder
• Använda SVG tillsammans med andra bilder
• Bästa praxis vid bildanvändning

Fördelarna med att formatera dina bilder

Först och främst, varför behöver du formatera dina bilder? Vad är fördelarna? Det finns många fördelar med att optimera dina bilder för prestanda. Enligt HTTP-arkivet utgör bilderna i genomsnitt 21 % av den totala webbsidans vikt baserat på november 2018. Så när det gäller att optimera din WordPress-webbplats är bilder överlägset den första platsen du bör börja!

Det är viktigare än skript och teckensnitt. Och ironiskt nog är ett bra bildoptimeringsarbetsflöde en av de enklaste sakerna att genomföra, men av många webbplatsägare förbises detta.

Här är en titt på de viktigaste fördelarna.

• Det kommer att förbättra sidladdningshastigheten (se vår fallstudie nedan för hur mycket det påverkar din hastighet). Om din sida tar för lång tid att ladda kan dina besökare tröttna på att vänta och gå vidare till något annat. För mer information om hur du optimerar sidans laddningstid, se vår djupgående sidhastighetsoptimeringsguide.
• Kombinerat med en bra SEO WordPress plugin förbättras din SEO. Din webbplats rankas högre i sökmotorens resultat. Stora filer saktar ner din webbplats och sökmotorer hatar långsamma webbplatser. Google kan också genomsöka och indexera dina bilder snabbare för Google bildsökning. Nyfiken om vilken procentandel av din trafik som kommer från Google bildsökning? Du kan använda ett Google Analytics-segment för att kontrollera Googles bildsökningstrafik.
• Att skapa säkerhetskopior går snabbare.
• Mindre bildfilstorlekar använder mindre bandbredd. Nätverk och webbläsare kommer att uppskatta detta.
• Kräver mindre lagringsutrymme på servern (detta beror på hur många miniatyrer du optimerar)

Bilder utgör i genomsnitt 21% av en webbplats totala vikt. 😮 Optimera dem!Click to Tweet

Hur du optimerar bilder för webb och prestanda

Det primära målet med att formatera dina bilder är att hitta balansen mellan den lägsta filstorleken och en acceptabel kvalitet. Det finns mer än ett sätt att utföra nästan alla dessa optimeringar. Ett av de mest populära sätten är att helt enkelt komprimera dem innan du laddar upp till WordPress. Vanligtvis kan detta göras i ett verktyg som Adobe Photoshop eller Affinity Photo. Några av dessa uppgifter kan också utföras med plugins, som vi kommer att gå in mer på nedan.

De två primära sakerna att tänka på är filformatet och typen av komprimering du använder. Genom att välja rätt kombination av filformat och kompressionstyp kan du minska din bildstorlek med så mycket som fem gånger. Du behöver experimentera med varje bild eller filformat för att se vad som fungerar bäst.

Välj rätt filformat

Innan du börjar ändra dina bilder, se till att du har valt den bästa filtypen. Det finns flera typer av filer du kan använda:

• PNG – producerar bilder av högre kvalitet, men har också en större filstorlek. Skapades som ett felfritt bildformat, även om det också kan innebära förstöring.
• JPEG – använder destruktiv och felfri optimering. Du kan justera kvalitetsnivån för en bra balans mellan kvalitet och filstorlek.
• GIF – använder bara 256 färger. Det är det bästa valet för animerade bilder. Det använder bara felfri kompression.

Det finns flera andra, till exempel JPEG XR och WebP, men de stöds inte universellt av alla webbläsare. Helst bör du använda JPEG eller JPG för bilder med mycket färg och PNG för enkla bilder.

(Föreslagen läsning: JPG vs JPEG: Förstå det vanligaste bildfilformatet)

Kompressionskvalitet vs storlek

Här är ett exempel på vad som kan hända om du komprimerar en bild för mycket. Den första använder en mycket låg kompressionshastighet, vilket resulterar i högsta kvalitet (men större filstorlek). Den andra använder en mycket hög kompressionshastighet, vilket resulterar i en mycket lågkvalitativ bild (men mindre filstorlek). Obs! Den ursprungliga bilden är orörd 2,06 MB.

Som du kan se är den första bilden ovan 590 KB. Det är ganska stort för bara ett foto! Generellt är det bäst om du kan hålla en webbsidas totalvikt under 1 eller 2 MB i storlek. 590 KB skulle redan vara en fjärdedel av det. Den andra bilden ser uppenbarligen hemsk ut, men så är den bara 68 KB. Vad du vill göra är att hitta ett bra medium mellan komprimeringshastigheten (kvalitet) och filstorleken.

Så vi tog bilden igen med en medelhög kompressionshastighet och som du kan se nedan ser kvaliteten nu bra ut, och filstorleken är 151 KB, vilket är acceptabelt för ett högupplöst foto. Detta är nästan 4x mindre än det ursprungliga fotot med låg komprimering. Vanligtvis bör enklare bilder som PNG-filer vara under 100 kB eller mindre för bästa prestanda.

Destruktiv vs felfri optimering

Det är också viktigt att förstå att det finns två typer av kompression du kan använda, destruktiv och felfri.

Destruktiv – det här är ett filter som eliminerar data. Detta kommer att försämra bilden, så du måste vara försiktig med hur mycket du ska minska bilden. Filstorleken kan minskas mycket. Du kan använda verktyg som Adobe Photoshop, Affinity Photo eller andra bildredigerare för att justera bildens kvalitetsinställningar. Exemplet vi använde ovan använder destruktiv kompression.

Felfri – det här är ett filter som komprimerar data. Detta minskar inte kvaliteten men det kräver att bilderna komprimeras innan de kan återges. Du kan utföra en felfri komprimering på datorn med hjälp av verktyg som Photoshop, FileOptimizer eller ImageOptim.

Det är bäst att experimentera med kompressionsteknikerna för att se vad som bäst fungerar för varje bild eller format. Om dina verktyg har valmöjligheten, se till att du sparar bilden för webben. Detta är ett alternativ i många bildredigerare och ger dig kvalitetsjusteringar så att du kan utföra optimal komprimering. Du kommer att förlora en del av kvaliteten, så försök att hitta det bästa resultatet du kan utan att göra bilderna fula.

Bildoptimeringsverktyg och -program

Det finns många verktyg och program där ute, både premium och gratis, som du kan använda för att optimera dina bilder. Vissa ger dig verktygen för att utföra dina egna optimeringar och andra gör jobbet åt dig. Vi är personligen stora fans av Affinity Photo, eftersom det är billigt och ger dig nästan identiska funktioner som Adobe Photoshop.

Här är ytterligare några verktyg och program att kika på:

• Adobe Photoshop
• Gimp
• Paint.NET
• GIFsicle
• JPEGtran
• JPEG Mini
• OptiPNG
• pngquant
• FileOptimizer
• ImageOptim
• Trimage
• ImageResize.org

Ändra storlek efter skala

Tidigare var det mycket viktigt att ladda upp bilder i rätt skala och inte låta CSS ändra storlek på dem. Men det här är inte längre lika viktigt eftersom WordPress 4.4 nu stöder responsiva bilder (inte nerskalad av CSS). I grund och botten skapar WordPress automatiskt flera storlekar av varje bild som laddas upp i mediebiblioteket. Genom att inkludera de tillgängliga storlekarna för en bild i ett srcset-attribut kan webbläsare nu välja att hämta den lämpligaste storleken och ignorera de andra. Se ett exempel på hur din kod faktiskt ser ut nedan.

Så med fler och fler HiDPI-skärmar idag kan det vara bra att hitta ett bra medium. Säg 2x eller 3x din webbplats kolumn eller div-storlek, men fortfarande mindre än originalstorleken. Webbläsaren visar den rätta, baserat på enhetens upplösning.

WordPress-mediebiblioteket skapar miniatyrer baserat på dina inställningar. Emellertid behålls originalet fortfarande orört. Om du vill ändra storlek på dina bilder och spara diskutrymme genom att inte spara originalet kan du använda en gratis plugin som Imsanity.

Imsanity tillåter dig att ställa in en sanitetsgräns så att alla uppladdade bilder kommer att begränsas till en rimlig storlek som fortfarande är mer än tillräckligt stor för behoven hos en vanlig webbplats.

Imsanity krokar till WordPress direkt efter bilduppladdning, men innan WordPress-behandling sker. Så WordPress fungerar exakt likadant på alla sätt, förutom att det kommer att vara som om bidragsgivaren hade skalat sin bild till en rimlig storlek innan den laddades upp.

Rensa mediebiblioteket

Om du letar efter ett verktyg för att spara utrymme samtidigt som du städar upp ditt mediebibliotek kan du använda Media Cleaner för att hitta oanvända mediefiler. Plugin-programmet kommer att skanna alla dina mediefiler och lista oanvända i Media Cleaner-instrumentpanelen så att du kan bläddra igenom och ta bort dem.

Media Cleaner implementerar ett smart skräpsystem: när filer tas bort flyttas de till papperskorgen. På så sätt kan du testa din webbplats ett tag och se till att allt fungerar. Om en fil- eller mediepost saknas kan du enkelt återställa den med ett klick eller helt enkelt tömma papperskorgen om allt ser bra ut.

Bildoptimerings-plugins du kan använda

Tack och lov behöver du inte göra all formatering eller komprimering för hand med WordPress. Du kan använda plugins för att göra åtminstone en del av arbetet automatiskt. Det finns flera plugins som automatiskt optimerar dina bildfiler när du laddar upp dem. De kommer även att optimera bilder som du redan har laddat upp. Det här är en praktisk funktion – speciellt om du redan har en webbplats fylld med bilder. Här är en titt på några av de bästa plugin-programmen för att formatera dina bilder för bättre prestanda.

Det är dock viktigt att du inte enbart litar på plugin-programmen. Till exempel bör du inte ladda upp 2 MB bilder till ditt WordPress mediebibliotek. Det kan leda till att du tar slut på ditt webbhotells diskutrymme riktigt snabbt. Den bästa metoden är att i förväg snabbt ändra storlek på bilden i ett bildredigeringsverktyg och sedan ladda upp den och använda ett av följande plugin-program för att minska den ytterligare.

• Imagify Image Optimizer
• ShortPixel Image Optimizer
• EWWW Image Optimizer Cloud
• Optimus Image Optimizer
• WP Smush
• TinyPNG
• ImageRecycle

Imagify bildoptimering

Imagify är skapad av samma team som utvecklat WP Rocket, som de flesta av er förmodligen är bekanta med. Den är WooCommerce, NextGen Gallery och WP Retina-kompatibel. Den har också en mass-optimeringsfunktion och du kan välja mellan tre olika nivåer av kompression: normal, aggressiv och ultra. Den har också en återställningsfunktion, så om du är missnöjd med kvaliteten kan du enkelt återställa och komprimera på en nivå som bättre passar dina behov. Det finns en gratis och en premium version. Du är begränsad till en kvot på 25 MB bilder per månad med ett gratis konto.

Att bli av med den ursprungliga bilden och ändra storlek på dina större bilder kan också göras med denna plugin.

Ändra storlek på bilder i Imagify

Imagify komprimerar också bilder på sina tredjeparts-servrar, inte din, vilket är mycket viktigt när det gäller prestanda. Imagify bör inte sakta ner din WordPress-webbplats.

ShortPixel bildoptimering

ShortPixel Image Optimizer är en gratis plugin som komprimerar 100 bilder per månad och kan komprimera flera typer av filer, inklusive PNG, JPG, GIF,  WebP, och till och med PDF-filer. Den kan utföra både destruktiv och felfri bildkomprimering. Den kan konvertera CMYK till RGB. Den tar dina bilder och miniatyrer till molnet för bearbetning och sedan tillbaka till din webbplats för att ersätta originalet. Den skapar en säkerhetskopia av de ursprungliga filerna så att du manuellt kan återställa dem om du vill. Den kan masskonvertera gallerifiler. Det finns ingen gräns för filstorleken.

Optimole

Optimole är en bildoptimeringsplugin för WordPress som automatiskt minskar storleken på dina bilder utan att det krävs något arbete från din sida. Den har en stor fördel när det gäller hemsidans laddningshastighet eftersom den är helt molnbaserad och aldrig visar bilder som är större än de borde vara, med andra ord visar den en perfekt bildstorlek för besökarens visningsområde och webbläsare.

Dessutom ger denna plugin lazy loading och effektivt bildbyte – den nedgraderar bildkvaliteten om besökaren har en långsammare internetuppkoppling – vilket gör att den sticker ut från mängden. Den känner också automatiskt av användarens webbläsare och visar WebP om det stöds.

Alla bilder som Optimole komprimerar visas via ett snabbt CDN. Du kan prova Optimole gratis eller uppgradera till premiumplanen om du behöver extra bandbredd och bearbetningsutrymme.

EWWW Image Optimizer Cloud

EWWW Image Optimizer Cloud hjälper dig att göra dina bilder mindre, och din webbplats snabbare, med mindre krångel. Utan storleksgränser, och med massor av flexibilitet, kan du använda standardinställningarna, eller anpassa denna plugin helt efter dina önskemål. Alla EWWW IO-användare kan använda Bulk Optimizer för att komprimera sina befintliga bilder, eller använda Mediabibliotekets listläge för att välja specifika bilder att komprimera.

Ytterligare mappar kan skannas för att se till att varje enskild bild på din webbplats är korrekt optimerad. EWWW IO kan även konvertera dina bilder till nästa generations format som WebP, eller hitta det bästa bildformatet för en bild med flera format-konverteringsalternativ. Bildkomprimering kostar från endast $0.003/bild.

Med komprimerings-API premium, kan du ta komprimering till en helt ny nivå utan att påverka kvaliteten, vilket låser upp PDF-komprimering och innehåller praktiska bildbackups i hela 30 dagar. ExactDN-funktionen som kostar från $9/månad ger automatisk komprimering (utan komprimering på serverns sida), automatisk storleksjustering och alla fördelarna med en CDN för snabbare resultat och ännu bättre prestanda över vilken enhetsstorlek som helst.

Optimus Image Optimizer

Optimus WordPress Image Optimizer använder felfri komprimering för att optimera dina bilder. Felfri innebär att du inte ser någon kvalitetsförlust. Den stöder WooCommerce och multi-site och har en bra massoptimeringsfunktion för de med redan stora befintliga mediebibliotek. Den är också kompatibel med WP Retina WordPress plugin. Det finns en gratis och en premiumversion. I premiumversionen betalar du en gång årligen och du kan komprimera en obegränsad mängd bilder. Om du kombinerar det med deras Cache Enabler-plugin kan du också dyka ner i WebP-bilder, vilket är ett nytt lättviktsbildformat från Google.

WP Smush

WP Smush har både en gratis och en premiumversion. Den minskar den dolda informationen från bilderna för att minska storleken utan att minska kvaliteten. Den skannar bilder och minskar dem när du laddar upp dem till din webbplats. Den kan också skanna bilder som du redan har laddat upp och minska dem också. Den komprimerar upp till 50 filer samtidigt. Du kan också komprimera manuellt om du vill. Den komprimerar JPEG, GIF och PNG bildtyper. Filstorlekar är begränsade till 1 MB.

• Den är kompatibel med några av de mest populära plugin-programmen för mediebibliotek som WP All Import och WPML.
• All bildoptimering görs med felfri komprimeringsteknik, vilket ger hög bildkvalitet.
• Det spelar ingen roll vilken katalog du sparar dina bilder i. Smush hittar dem och komprimerar dem.
• Smush har ett alternativ för att automatiskt ställa in bredd och höjd för alla bilder, så att alla dina bilder blir anpassade till samma proportioner.

TinyPNG (också komprimerade JPGs)

TinyPNG använder TinyJPG och TinyPNG-tjänsterna (det kostnadsfria kontot låter dig komprimera cirka 100 bilder per månad) för att optimera dina JPG- och PNG-bilder. Den komprimerar automatiskt nya bilder och mass-komprimerar dina befintliga bilder. Den konverterar CMYK till RBG för att spara utrymme. Den komprimerar JPEG-bilder upp till 60 % och PNG-bilder upp till 80 % utan en synlig förlust i bildkvaliteten. Den har ingen maxstorlek för filstorlek.

ImageRecycle

ImageRecyle plugin är en automatisk bild- och PDF-optimerare. Denna plugin fokuserar inte bara på bildkomprimering men även på PDF-filer. En väldigt användbar funktion är möjligheten att ställa in minsta filstorlek för komprimering. Om du till exempel har bilder som är 80 KB i storlek kan du automatiskt utesluta dem från komprimering. Detta säkerställer att bilder och filer aldrig komprimeras för mycket. Den innehåller också massoptimering och automatisk bildåterställning. Obs! De har en gratis 15-dagars provperiod, men det här är en premiumservice, och bilder laddas upp och komprimeras med deras servrar. De debiterar inte per månad, utan snarare det totala antalet bilder som komprimeras, från 10$ för 10 000.

Fallstudie för att optimera bilder för webb

Vi bestämde oss för att göra vår egen lilla fallstudie och test för att visa dig hur mycket optimering av dina bilder på webben kan påverka din WordPress-webbplats totala hastighet.

Okomprimerade JPG

Vi lade först upp sex stycken okomprimerade JPG, som alla var över 1 MB i storlek, på vår testplats. (Se de ursprungliga okomprimerade JPG-filerna). Vi körde sedan fem tester genom Pingdom och tog medeltalet. Som du kan se från hastighetsprovet nedan var vår totala laddningstid 1,55 sekunder och den totala sidstorleken var 14,7 MB.

Komprimerade JPG

Vi komprimerade sedan JPG-filerna med hjälp av Imagify WordPress-plugin, med ”aggressiv inställning”. (Se de nya komprimerade JPG, som fortfarande ser lika fina ut). Vi körde sedan fem tester genom Pingdom och tog medeltalet. Som du kan se från hastighetsprovet nedan sänktes vår totala laddningstid till 476 ms och den totala sidstorleken reducerades till 2,9 MB. Våra totala laddningstider minskade med 54,88 % och sidstorleken minskade med 80,27 %.

Det finns nästan ingen annan optimering du kan göra på din webbplats som ger dig över 50 % minskning i laddningstider. Det är därför bildoptimering är så viktig, processen ovan var helt automatiserad av plugin. Det är en hands-off-strategi för en snabbare WordPress-webbplats. Den enda andra dramatiska optimeringen du kan göra skulle vara att ändra dina WordPress-värdar. Många kunder som flyttar till Kinsta ser över 45 % hastighetsökning. Tänk dig att flytta till Kinsta och optimera dina bilder!

Genom att optimera dina bilder, oavsett om det använder ett bildredigeringsverktyg eller en WordPress-plugin, kan du också fixa varningen ”Optimera bilder” som du får i Google PageSpeed ​​Insights (som visas nedan.)

Om du har andra optimeringsvarningar från snabbtestverktyg, se till att kolla in vårt inlägg på Google PageSpeed och vår djupgående Pingdom-genomgång.

Att använda SVGs

En annan rekommendation är att använda SVG tillsammans med dina andra bilder. SVG är ett skalbart vektorformat som fungerar bra för logotyper, ikoner, text och enkla bilder. Här är några skäl till varför:

• SVGs kan automatiskt skalas i både webbläsare och bildredigeringsverktyg. Detta gör det till en webb- och grafisk designers dröm!
• Google indexerar SVGs, på samma sätt som PNG och JPG, så du behöver inte oroa dig för SEO.
• SVGs är traditionellt (inte alltid) mindre i filstorlek än PNG eller JPG. Detta kan resultera i snabbare laddningstider.

Genki skrev en bra artikel där han jämför storleken på SVG vs PNG vs JPEG. Nedan följer några provtagningar från hans tester, där han jämförde de tre olika bildtyperna.

JPG (optimerad storlek: 81.4 KB)

JPG bild

PNG (optimerad storlek: 85.1 KB)

PNG bild

SVG (optimerad storlek: 6.1 KB)

SVG bild

Som du kan se ovan är SVG en minskning av filstorlek med 92,51 % jämfört med JPG. Och jämfört med PNG, 92,83 %. Kolla in vår guide om hur du använder SVG på din WordPress-webbplats.

Bästa praxis

Här följer några allmänna bästa praxis när det gäller hur man optimerar bilder för webben:

• Om du använder en WordPress-plugin, använd en som komprimerar och optimerar bilder externt på sina servrar. Detta minskar belastningen på din egen webbplats.
• Använd vektorbilder tillsammans med dina PNG- och JPG-bilder när det är möjligt.
• Använd ett CDN för att snabbt visa dina bilder för besökare över hela världen
• Ta bort onödig bilddata.
• Beskär det vita utrymmet och återskapa det genom att använda CSS för att tillhandahålla vadderingen.
• Använd CSS3-effekter så mycket som möjligt.
• Spara dina bilder i rätt storlek. Men kom ihåg att WordPress nu stöder responsiva bilder för att visa dem utan att ändra storlek på dem med CSS.
• Använd alltid .ico-filformatet för din favicon.
• Använd webbfont istället för att placera text på bilder – de ser bättre ut när de skalas och tar mindre plats.
• Använd bara raster-bilder för scener med många former och detaljer.
• Minska bitdjupet till en mindre färgpalett.
• Använd destruktiv komprimering där det är möjligt.
• Experimentera med att hitta de bästa inställningarna för varje format.
• Använd GIF om du behöver animering (men komprimera dina animerade GIF-filer).
• Använd PNG om du behöver mycket detaljer och höga upplösningar.
• Använd JPG för allmänna bilder och skärmdumpar.
• Ta bort eventuella onödiga bildmetadata.
• Automatisera processen så mycket som möjligt
• I vissa fall kanske du vill ha lata laddningsbilder för snabbare förstasidesvisning.
• Spara bilder som ”optimerade för webben” i verktyg som Photoshop.
• Använd WebP i Chrome för att visa i mindre bilder.

Glöm inte att optimera dina bilder, annars kan din WordPress-hemsida komma att kännas som den rör sig i slow-motion. Och du vet hur frustrerande ‘långsamt’ är! 🐌Click to Tweet

När du har formaterat dina bilder för bättre prestanda och följt bästa praxis, kommer din webbplats att gillas bättre av sökmotorer, webbläsare och nätverk, och kommer att ladda snabbare för dina läsare. Åh, och se till att kolla in vår handledning om hotlinking, för att förhindra att människor stjäl dina bilder och bandbredd.

Har du formaterat dina bilder för bättre prestanda? Formaterar du dem manuellt, använder du en plugin eller båda? Finns det något annat verktyg eller plugin du skulle rekommendera? Har du något att lägga till? Låt oss veta om dina tekniker och bästa praxis i kommentarerna nedan!