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 många webbplatsägare förbises detta.

Genomsnittliga byte per sida (KB)

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)

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ätt ä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 5 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 av alla webbläsare universellt. 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.

Låg komprimering (högkvalitativ) JPG – 590 KB

Hög komprimering (låg kvalitet) JPG – 68 KB

Som du kan se är den första bilden ovan 590 KB. Det är ganska stort för bara ett foto! Det är generellt 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 hemskt 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 bra ut nu, 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 borde enklare bilder som PNG-filer vara under 100 kB eller mindre för bästa prestanda.

Medium kompression (bra kvalitet) JPG – 151 KB

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 stort. 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 förlustfri 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 det valet, 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 med Adobe Photoshop.

Komprimera bilder in Affinity Photo

Här är några ytterligare 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å vad din kod faktiskt ser ut som nedan.

srcset responsiva bilder, exempel i kod

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.

WordPress-mediainställningar

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 detsamma 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.

Bildoptimerings-plugin Du Kan Använda

Tack och lov behöver du med WordPress inte göra all formatering eller komprimering för hand. 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 pluginsen för att formatera dina bilder för bättre prestanda.

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

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

Imagify Bildoptimering

Imagify Bildtoptimeringsplugin

Imagify är skapad av samma team som utvecklat WP Rocket, som de flesta av er förmodligen är bekanta med. Det är WooCommerce, NextGen Gallery och WP Retina-kompatibelt. Det har också en mass-optimeringsfunktion och du kan välja mellan tre olika nivåer av kompression, normal, aggressiv och ultra. Det har också en återställningsfunktion, så om du är missnöjd med kvaliteten kan du enkelt klicka på att å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 borde inte sakta ner din WordPress-webbplats.

ShortPixel Bildoptimering

ShortPixel plugin

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

Optimole

Optimole plugin

Optimole är en bildoptimeringsplugin för WordPress som automatiskt minskar dina bilder storlek utan att det krävs något arbete från din sida. Den har en stor fördel när det gäller hemsidan laddningshastighet eftersom den är helt molnbaserad och aldrig visar bilder som är större än de borde vara, mao den visar 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 plugin

EWWW Image Optimizer Cloud hjälper dig att göra dina bilder mindre, och din webbplats snabbare, med mindre krångel. Med inga storleksgränser, och massor av flexibilitet, kan du använda standardinställningarna, eller anpassa detta 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 och välja specifika bilder för att komprimera.

Ytterligare mappar kan skannas för att se till att varje enskild bild på din webbplats är korrekt optimerad. EWWW IO kan du ä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 börjar för 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 börjar vid $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 Bildoptimering

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 WooCoomerce och multi-site och har en bra massoptimeringsfunktion för dem med redan stora befintliga mediebibliotek. Den är också kompatibel med WP Retina WordPress plugin. Det finns en fri och premium version. I premium versionen 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 plugin

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

• Det är kompatibelt med några av de mest populära mediebiblioteks-plugin 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 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 plugin

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 kommer automatiskt komprimera nya bilder och mass-komprimera dina befintliga bilder. Det kommer att konvertera 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. Det har ingen maxstorlek för filstorlek.

ImageRecycle

ImageRecycle – Bild & PDF-optimering plugin

ImageRecyle plugin är en automatisk bild och PDF-optimerare. Detta plugin fokuserar inte bara på bildkomprimering men även 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 premium service, och bilder laddas upp och komprimeras med deras servrar. De debiterar inte per månad, utan snarare av 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 tester 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 6 okomprimerade JPG, som alla var över 1 MB i storlek, till vår testplats. (Se de ursprungliga okomprimerade JPG-filerna). Vi körde sedan 5 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.

Hastighetstest med okomprimerade JPG

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 vackra ut). Vi körde sedan 5 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 %.

Hastighetsprov med komprimerade JPG

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 ett WordPress-plugin, kan du också fixa varningen ”Optimera bilder” som du får i Google PageSpeed ​​Insights (som visas nedan.)

PageSpeed ​​Insights optimerar bildvarning

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 på 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 Praktiker

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

• Om du använder ett WordPress-plugin, använd en som komprimerar och optimerar bilder externt på sina servrar. Detta minskar belastningen på din egen webbplats.
• Använd vektorbilder när det är möjligt tillsammans med dina PNG och JPG
• 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 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

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 ett 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!