Så optimerar du bilder till din hemsida, en komplett guide!
Du som driver en hemsida eller webbplats har mycket att vinna på att optimera dina bilder till din hemsida. Många associerar bildoptimering med att sänka kvaliteten på bilderna och därav inte ha lika “fina” bilder på sin hemsida, detta behöver inte alltid vara fallet.
I den här guiden går vi först igenom varför det är så viktigt att optimera sina bilder för sin hemsida, samt steg för steg hur du gör detta.
Varför är det viktigt att optimera bilder till min hemsida?
De två främsta anledningarna till varför det är viktigt att optimera dina bilder till din hemsida är att din hemsida blir snabbare, och att det i förlängningen driver mer trafik till din hemsida via högre ranking på Google. Detta då Google premierar snabbladdade webbsidor.
Bara dessa är anledningar nog att optimera dina bilder, men nedan följer ännu fler fördelar med att göra detta.
6 fördelar med att optimera bilder till din hemsida 2022
Bilder påverkar din hemsida väldigt mycket, nedan lyder en lista på de 6 viktigaste fördelarna med att optimera bilderna till din hemsida.
- Snabbare hemsida. Hela 21 % av den totala hemsidans vikt utgörs av bilder. Det är viktigare att optimera bilder än teckensnitt och skript. Har du en långsam hemsida är det stor sannolikhet att besökarna kryssar ner och lämnar sidan. Eftersom bilder är bland de största elementen som gör hemsidor långsamma så måste dom optimeras.
- Bättre mobilanpassad hemsida. En mobilanpassad hemsida måste ha optimerade bilder och vara snabb. Bilden nedan visar tydligt hur mycket bilderna på din hemsida påverkar hemsidans hastighet jämfört med många andra komponenter.
- Högre ranking på Google. Eftersom hastigheten på hemsidor är väldigt viktigt för besökare, tycker även Google att detta är viktigt. Snabbare hemsida leder till högre ranking på sökningar. Redan 2018 meddelade Google att de börjat använda laddningstid som en rankingfaktor.
- Högre ranking med visuellt sök. Efter introduktionen av Google Lens så är det möjligt för folk att göra sökningar med bilder istället för ord. Detta innebär att bilderna på din hemsida driver mer besökare till hemsidan, därför är det viktigt att optimera dem.
- Enklare att säkerhetskopiera. Vill du säkerhetskopiera vissa sidor eller hela hemsidan så går detta mycket snabbare med optimerade bilder.
- Använder mindre bandbredd. Mindre filer (optimerade bilder) kräver mindre bandbredd, vilket både nätverk och webbläsare kommer uppskatta.
Nedan visas en fördelning över vilka element som tynger din hemsida samt hur mycket.
Så optimerar du dina bilder till din hemsida 2022
Det primära målet med att optimera dina bilder för din hemsida är att hitta rätt balans mellan låg filstorlek och acceptabel kvalitet. Genom att välja rätt kombination av filformat och kompressionstyp så kan du minska bildstorleken med så mycket som 5 gånger utan att tappa för mycket kvalitet.
Oavsett om du redan har en hemsida med bilder på, ska bygga en ny hemsida, funderar på att köpa en hemsida, eller helt enkelt bara är nyfiken, så följer här en komplett guide med bästa praxis för hur du kan optimera dina bilder för webben 2021.
Använd rätt filformat
Vilket filformat som är bäst för dina bilder, beror på vad det är för typ av bilder. De vanligaste formaten är JPEG för bilder med mycket färg, detta format ger rimlig kvalitet och hyfsat liten storlek. Använd istället PNG för bilder med färre färger, exempelvis logotyper eller bilder med med transparent bakgrund.
Nedan beskriver vi vad de olika filformaten innebär.
- JPEG använder destruktiv och felfri optimering. Det är möjligt för dig att justera kvalitetsnivån för att hitta rätt balans mellan filstorlek och önskad kvalitet.
- PNG har större filstorlek, samt producerar bilder i högre kvalitet. PNG använder icke-destruktiv komprimering och används främst för ikoner eller loggor istället för hela bilder i och med den stora filstorleken.
- GIF är det bästa valet för animerade bilder. Det använder endast felfri kompression, samt använder bara 256 färger.
Namnge dina filer rätt
Google och andra sökmotorer använder sig av bland annat filnamnet för att förstå vad din bild föreställer. Därför är de viktigt för att namnge dina bilder utefter vad de föreställer, det kan även vara fördelaktigt att använda sig av sökord för SEO-syften. Skippa också konstiga tecken som “!, ?, å, ä, ö”.
Komprimera dina bilder
Att komprimera bilder innebär att du minskar storleken på bilderna. Detta är viktigt för att få en snabbare hemsida. Du kan enkelt komprimera dina bilder med hjälp av bildredigeringsprogram som Photoshop, eller via olika gratis online-verktyg. Tyvärr medför detta ofta en lägre kvalitet på bilderna, men det beror på hur mycket du komprimerar dem.
Destruktiv eller felfri optimering
Det finns två typer av kompression du kan använda, destruktiv och felfri. Destruktiv komprimering är ett filter som eliminerar data, detta medför försämrad kvalitet på bilderna om du minskar dem för mycket. Felfri komprimering är ett filter som komprimerar data, det minskar ej kvaliteten men måste utföras innan bilderna kan återges.
Båda dessa kompressionstekniker går att utföra i redigeringsprogram som Photoshop, FileOptimizer eller ImageOptim, det bästa är att testa sig fram med de olika teknikerna för att se vad som passar varje bild och format bäst. Se till att du sparar dom i formatet “för webben” när du experimenterar med dessa. Det kommer ge dig förutsättningen för optimal komprimering för dina bilder.
12 bästa verktygen för bildoptimering 2022
Vi har tidigare nämnt att du kan optimera dina bilder i exempelvis Photoshop, men det finns många andra program du kan använda också. Det finns både gratis verktyg, samt premium verktyg. Vissa gör det möjligt för dig att utföra dina egna optimeringar, medan vissa utför dem åt dig.
- Adobe Photoshop
- Gimp
- Net
- GIFsicle
- JPEGtran
- JPEG Mini
- OptiPNG
- Pngquant
- FileOptimizer
- ImageOptim
- Trimage
- org
5 bästa WordPress plugins för att komprimera bilder 2022
Om du driver en WordPress hemsida och vill komprimera alla bilder automatiskt vid uppladdning av bilder på hemsidan, så följer här en lista på bästa WordPress plugins för det.
- Smush Image Compression and Optimization
- it Image Optimizer
- EWWW Image Optimizer
- Compress JPEG & PNG images By TinyPNG
- ShortPixel Image Optimizer
Välj vilket plugin som passar dig bäst, installera det sedan, efter det går du till media-inställningar och väljer att ställa in så att alla bilder komprimeras automatiskt vid uppladdning. Du kan även välja att komprimera redan uppladdade bilder.
Spara bilder i rätt storlek
Ta reda på vilken pixelstorlek bilden kommer ha på din hemsida, detta varierar beroende på om det ska vara en produktbild, en bild till slider, profilbild eller annan typ av bild. När du ser pixelstorleken så skalar du ner bilden till rätt storlek via något verktyg som exempelvis Photoshop samt använder funktionen “spara för webben”.
När du vet vilka storlekar du behöver på dina bilder så kan du i exempelvis WordPress ange dessa storlekar som förinställda val när du laddar upp bilder i mediabiblioteket. Det gör du genom att gå till inställningar -> media och sedan klicka på spara.
Använd alt-texter
Alt-texter betyder alternativa texter och är ett attribut till HTML-språkets bild-tagg. Du ska skriva alt-texter som beskriver dina bilder, precis som när du namnger dina filer. Dess ursprungliga funktion är att funktionshindrade och synskadade personers skärmar ska kunna läsa bilden. Men detta är även viktigt i SEO-syfte för att hjälpa sökmotorer förstå vad dina bilder föreställer och handlar om, som i sin tur gör att de blir synliga vid sökningar.
Som tidigare nämnt är det viktigt för att göra Google och andra sökmotorer nöjda genom att exempelvis använda alt-texter på rätt sätt. Detta eftersom du vill att ditt content ska visas vid sökningar, som i sin tur leder till att du får mer trafik till hemsidan.
Nu när du vet varför det är viktigt att optimera dina bilder efter din hemsida samt vet vilka steg du behöver göra och hur du ska gå tillväga, så är det bara att börja. Om du fortfarande känner dig osäker på vad som passar just din hemsida bäst, eller inte har tid för att implementera allt detta själv, så kan du kontakta oss så hjälper vi dig.
Vanliga frågor
Varför är det viktigt att optimera mina bilder till min hemsida?
De två främsta anledningarna till varför det är viktigt att optimera dina bilder till din hemsida är att hemsidan blir snabbare, och att det driver mer trafik till din hemsida via högre ranking på Google. Detta gör att besökare stannar längre på hemsidan och det driver mer trafik till din hemsida.
Vad betyder det att komprimera bilder till sin hemsida?
Att komprimera bilder innebär kort och gott att du minskar storleken på bilderna. Du kan enkelt komprimera dina bilder med hjälp av bildredigeringsprogram som Photoshop, eller via olika gratis online-verktyg som nästa alltid är gratis. Det är vanligt att detta medför lägre kvalitet på bilderna.
Varför laddar min hemsida långsamt?
Vanligaste orsaken till att du upplever din hemsida som långsam är för att du har för mycket bilder, eller för stora bilder på hemsidan. Storleken på bilderna påverkar hastigheten på hemsidan markant. Det är därför viktigt att du optimerar dem (förminskar bilderna) så de inte gör din hemsida långsam.
Relaterade artiklar: Så mycket kostar en webbutvecklare
