Hoppa till huvudinnehåll
Bilder
Uppdaterad denna vecka

I Webbas kan du ladda upp bilder i din Filhanterare för att placera på sidor, i dina mejlutskick, blogg, portfolio med mera. Filhanteraren hittar du i dina webbplatsinställningar. Läs mer om den här.

Vilken bildstorlek ska man ha?

Din hemsida kommer att vara responsiv vilket betyder att storleken på sidorna och bilderna kommer att ändras beroende på storlek av skärm som den visas på. Medan en bild tagen med en mobilkamera kommer se bra ut på en mindre skärm, kommer den troligtvis se suddig ut om den visas på en större skärm. Om bilden har en dålig kvalitet

kommer det att påverka kvaliteten på hela hemsidan.

En bra tumregel är att undvika använda bilder som är tagna med en mobilkamera.

De bästa bilderna är de som tas med en DSLR kamera. Om du trots allt tar

med en mobilkamera, se till att du valt den bästa upplösningen i dina kamerainställningar.

Använd nedan som vägledning till ungefärlig storlek lämplig för olika placeringar.

  • Bakgrundsbilder för Block/Hero/Banner
    Detta är en stor bild som oftast är i fullbredd. Här bör du gärna satsa på en bild som är minst 1500px bred och med fördel mellan 1750 - 2500px bred. Det finns ingen vägledning för höjdmått då du ställer in önskad höjd i blocket. Detta kan därmed variera stort. Börja med halva breddmåttet i höjd och se om det blir bra för din webbplats om du är osäker.

  • Övriga bilder
    Mellan 500 - 1000px i bredd är att bra utgångsläge. Men som beskrivet i texten ovan är plattformen responsiv vilket innebär att bilder kan va olika stora/små på olika enheter/skärmar. När du placerar bilder i t.ex. bildwidget kan du via små pilar i widgeten dra ut bilden i bredd/höjd till önskad storlek i px. Vet du med dig bredden där kan du spara ned din bild i samma mått för bästa möjliga anpassning.

  • Logotyp
    Försök efter förmåga spara ned den i exakt den höjd du väljer att visa i webbplatsen. Ett tips är att om du sparar ned din logotyp från program som t.ex. Canva att säkerställa att du har minimalt med tomt utrymme runt logotypen ut till bildkanterna. Även om du laddar ned logotypen i transparent bakgrund kommer allt det tomma runt logotypen räknas som del av bilden vilket kan göra det svårt för dig att få till det bra när du placerar din logotyp i exempelvis din header.

  • Favikon
    Detta är den lilla ikonen du ser i webbläsarfliken längst upp i webbläsaren. Denna ska vara fyrkantig och ha en storlek på helst max 16x16px. Vissa program tillåter inte att spara ned så litet. Spara då ned i minsta möjliga tillåtna storlek i kvadratiskt format.

Tips kring bilder

  • Bildstorlek i kb. En webbplats är inte tänkt för att ha stora högupplösta bilder. Det påverkar hastigheten och prestandan på webbplatsen samt påverkar din ranking på Google negativt. Spara därför alltid ned dina bilder i max 500kb. Men med stor fördel betydande lägre än så.

  • Bildformat. Du kan använda flera av de vanliga formaten så som JPG, PNG, SVG och WebP. Vi rekommenderar att använda WebP då detta format är ett mer komprimerat format skapat för just webbplatser.

  • Om du placerar din bild som bakgrund i en kolumn, kan du i mobila läget behöva placera en avståndsbricka och dra ut bilden lite så den ser bra ut även i mobilen. Läs mer om hur du redigerar i mobila läget här. Detta kan även vara bra att kolla för att mobilanpassa om du i desktopversion har horisontella stora bilder som bakgrund i ett block. Då en mobil är i ett stående format kan man behöva mobilanpassa sin bild i mobila läget så det ser bra ut på enheter i både stående och liggande format.

  • Royaltyfria bilder från Unsplash direkt i Webbas plattform
    I filhanteraren kan du längst ned till vänster klicka på Bildkatalog för att söka och bläddra igenom miljontals royaltyfria Unsplash-bilder som du kan använda på din hemsida. Unsplash utgår från engelska och dina sökord behöver därmed bestå av engelska ord.

Bilder blir pixliga eller suddiga

Då rekommenderar vi dig att läsa vår guide om vad detta kan bero på och tips på hur du kan åtgärda felet.

Bilder blir felvända

Har du råkat ut för att bilden du laddat upp i Filhanteraren blir vänd uppochned eller åt fel håll?

Eftersom det inte går att redigera bilder i plattformen behöver du se till så att bilden är rättvänd från början.

När bilder laddas upp så läses meta-filen in (informationen bakom bilden) och är den t.ex vänd med ett inbyggt program på datorn eller din mobiltelefon så kan det innebära att du ser den rätt där men att informationen inte har ändrats från hur originalbilden är tagen.

Det finns två olika sätt att prova för att få bilderna rättvända även i plattformen.

Tips 1

  1. Spara bilden på din dator.

  2. Öppna bilden och rotera den två gånger (så den blir rättvänd på nytt på skärmen).

  3. Spara igen.

  4. Ladda upp i plattformen.

Tips 2

  1. Prova att spara ned bilden korrekt via ett redigeringsprogram som Adobe Photoshop om du har det eller Canva online, eller om du provar med en sida på nätet så som https://www.adobe.com/express/feature/image/rotate.

  2. Ladda sedan upp bilden på nytt i plattformen.

Fick du svar på din fråga?