Idag surfar fler människor på mobila enheter än på stationära datorer. Med en mängd olika skärmstorlekar i bruk behöver du välja de bästa bildstorlekarna när du skapar din webbplats, så att dina besökare får en bra användarupplevelse oavsett vilken enhet de använder.
Om du inte optimerar dina bilder kan webbplatsbesökarna se bilder som är för små och suddiga, eller för stora, vilket ökar laddningstiderna och tvingar till onödig scrollning och zoomning.
Den goda nyheten är att det är enkelt att göra dina bilder kompatibla med flera enheter. Genom att välja rätt bilddimensioner, hålla filstorlekarna minimala och använda en responsiv webbdesign kan du erbjuda en förstklassig surfupplevelse.
Följ guiden nedan för att optimera dina bilder för mobila och stationära enheter.
De bästa storlekarna för bilder på webbplatser
Pixelbredd: 2 500 pixlar är i de flesta fall perfekt för att sträcka sig över hela skärmen. Eventuella bilder som är mindre än så kan bli avklippta eller se suddiga ut om de behöver fylla webbläsarens bredd.
Bildstorlek: Den bästa övergripande (pixel) storleken på dina bilder beror på användningsområdet. Exempelvis behöver bakgrundsbilder vara större än bilder i blogginlägg.
Filstorlek: Allt som är större än 20 megabyte kan dramatiskt påverka hastigheten på din webbplats. Mindre bilder (upp till två megabyte, men runt 500 kilobyte) är bättre i de flesta fall.
Bildattribut: Bildattribut (alt-text eller alt-tag) är textbaserade och påverkar inte webbplatsens prestanda. De används dock för att tolka bilder via skärmläsarprogramvara och är betydande bland annat för webbtillgänglighet. Var kortfattad med attributtexten – det är god praxis att hålla alt-text under 100 tecken.
Bästa bilddimensionerna för stationära och mobila enheter
Tabellen nedan visar de rekommenderade dimensionerna för bilder på både stationära och mobila webbplatser:
| Webbplatsbildtyp |
Dimensioner för stationära bilder |
Dimensioner för mobila bilder |
Rekommenderat bildförhållande |
|---|---|---|---|
| Bakgrundsbild | 2560 x 1400 pixels | 360 x 640 pixels | 16:9 |
| Herobild | 1280 x 720 pixels | 360 x 200 pixels | 16:9 |
| Webbplatsbanner | 1200 x 400 pixels | 360 x 120 pixels | 3:1 |
| Bloggbild | 1200 x 800 pixels | 360 x 240 pixels | 3:2 |
| Logotyp (rektangel) | 400 x 100 pixels | 160 x 40 pixels | 4:1 |
| Logotyp (fyrkant) | 100 x 100 pixels | 60 x 60 pixels | 1:1 |
| Favicon | 16 x 16 pixels | 16 x 16 pixels | 1:1 |
| Sociala medier-ikoner | 32 x 32 pixels | 48 x 48 pixels | 1:1 |
| Lightbox-bilder (fullskärm) | 1920 x 1080 pixels | 360 x 640 pixels | 16:9 |
| Miniatyrbild | 300 x 300 pixels | 90 x 90 pixels | 1:1 |
Dessa är föreslagna storlekar, som kan behöva justeras beroende på om du använder en responsiv webbdesign.
En bra tumregel är att hålla renderingsstorleken på bilderna mindre än deras uppladdningsstorlek.
Varför är bildstorlek så viktig för webbplatser?
För webbplatser är rätt bildstorlek viktig av tre huvudsakliga skäl:
- Det skapar en bättre användarupplevelse.
- Det förbättrar hastigheten på webbplatsens sidor.
- Det höjer webbplatsens ranking.
Skapar en bättre användarupplevelse
Att ha korrekt storlek på bilder för varje användningsområde på din webbplats förbättrar användarupplevelsen. Besökare kan få tillgång till en lämplig detaljnivå och behöver inte scrolla för att se hela bilden.
När bilderna är av låg kvalitet, pixliga eller för små kan upplevelsen av kvaliteten på ditt innehåll påverkas. För en e-handelswebbplats kan detta leda till att kunder ifrågasätter kvaliteten på ditt företag eller dina produkter.
Å andra sidan förbättrar högkvalitativa och korrekt storleksanpassade bilder det upplevda värdet av dina produkter och ger mer visuell information till potentiella kunder.
Som exempel kan man se hur bilderna nedan från det hållbara skomärket Allbirds förbättrar användarupplevelsen genom att tydligt påpeka de olika funktionerna hos deras produk.
Förbättrar webbplatsens sidladdningshastighet
När du laddar upp stora bilder till din webbplats tar det längre tid för servern att ladda sidan. Mindre bilder (både i dimensioner och filstorlek) tenderar att laddas snabbare på olika enheter.
Bildladdningshastighet kallas ofta för ”contentful paint”. Du kan kontrollera din webbsidas contentful paint och andra sidladdningsmetrik med hjälp av Googles PageSpeed Insights.
En stor del av onlinekunderna säger att de skulle överge sin kundvagn om en butiks webbsida tar mer än tre sekunder att ladda. Insikter som dessa visar hur viktigt det är att optimera sidladdningshastigheten för att undvika en hög avvisningsfrekvens.
Höjer webbplatsens ranking
Webbplatsranking hänvisar till positionen för din webbplats i sökmotorresultatsidor (SERP). Webbplatser som är optimerade för sökning kommer att rankas högt på SERP för relevanta användarsökningar (kända som nyckelord).
Google använder en mängd metrik för att avgöra vilka webbsidor som rankas högst i sina sökresultat. Kvaliteten på bilder (eller snarare den förbättrade användarupplevelsen som de genererar) är en trolig faktor i Googles algoritm.
Riktlinjer för bildstorlek på webbplatser
Det finns fem huvudsakliga typer av bilder som du kommer att se på en webbplats:
- Bakgrundsbildsstorlekar
- Herobildsstorlekar
- Bannerbildsstorlekar
- Bloggbildsstorlekar
- Logotypstorlekar
Olika storlekskrav gäller för varje typ av bild för webben. Låt oss ta en titt på de bästa bildstorlekarna för vanliga typer av webbplatsbilder.
Bakgrundsbildsstorlekar
Bakgrundsbilder är vanligtvis de största bilderna på en webbplats. Bilden fungerar som en bakgrund för en hemsida eller annan landningssida.
Till exempel låter cykelåterförsäljaren Cowboy sin produkt ta centrum genom att använda den som bakgrund på hemsidan. Den fyller hela skärmen, oavsett vilken enhet den visas på.
Rekommenderad bildbredd: 2 560 pixlar
Rekommenderad bildhöjd: 1 400 pixlar
Bildförhållande: 16:9
Rekommenderad filstorlek: 20 MB
Herobildstorlekar
Herobilder liknar bakgrundsbilder men tenderar att vara mindre i höjd, ungefär hälften så stora. En herobild är ett bra alternativ om du behöver visa mer text på skärmen utan att användarna behöver scrolla för att se det.
I exemplet ovan använder BLK & Bold en herobild med ett smalt bildförhållande för att fylla skärmen men lämna utrymme för innehåll under.
Rekommenderad bildbredd: Mellan 1 280 pixlar och 2 500 pixlar
Rekommenderad bildhöjd: Mellan 720 pixlar och 900 pixlar
Bildförhållande: 16:9
Rekommenderad filstorlek: 10 MB
Bannerbildstorlekar
Bannerbilder kan ha olika storlekar och former, beroende på var de finns och vad du vill visa dina besökare. Den mest typiska typen av webbplatsbanner är en bannerannons. En av de mest populära tjänsterna för att marknadsföra bannerannonser är Google Ads.
Om du funderar på en bannerbild som inte är en annons, är de rektangulära alternativen (t.ex. 300 x 200 pixlar eller 970 x 90 pixlar) generellt bättre.
Rekommenderad bildbredd: Kontrollera med annonsplattformen
Rekommenderad bildhöjd: Kontrollera med annonsplattformen
Bildförhållande: Olika
Rekommenderad filstorlek: 150 KB (Kontrollera med annonsplattformen)
Bloggbildstorlekar
Bloggbilder kan variera i typ och storlek. Inlägget ovan kommer från sömnexperterna Kulala, och medan uppladdningsstorleken på den utvalda bilden är 1 200 x 620 pixlar är den renderade storleken mindre, med 894 x 462 pixlar.
Att ställa in en renderingsstorlek för dina webbsidor hjälper till att förfina din design och att hålla filerna små (bilden i Kulala-inlägget är bara 95,1 KB).
När det gäller huvudheaderbilderna på dina blogginlägg (de högst upp på sidan) bör de vara enhetligt storleksanpassade över hela din blogg.
Rekommenderad bildbredd: 1 200 pixlar
Rekommenderad bildhöjd: 800 pixlar
Bildförhållande: 3:2
Rekommenderad filstorlek: 3 MB
Logotypstorlekar
Din logotyp kommer sannolikt att vara en av de minsta bilderna på din webbplats (om man inte räknar med favicon i flikfältet). Beroende på din logotypdesign bör du välja antingen ett rektangulärt eller fyrkantigt bildförhållande.
De flesta logotyper passar bra med ett fyrkantigt 1:1-förhållande, vilket du kan se i nedre vänstra hörnet av exemplet från Kulala.
Rektangulära förhållanden fungerar bra för längre varumärkesnamn eller där logotypen består av ord snarare än en grafik. Shopifys egen webbplatslogotyp använder ett längre 4:1-förhållande.
Rekommenderad bildbredd: 100 pixlar
Rekommenderad bildhöjd: 100 pixlar
Bildförhållande: 1:1, 2:3, 4:1
Rekommenderad filstorlek: 1 MB
Rekommendationer för bildstorlek på mobila enheter
Välj rätt bilddimensioner
På mindre mobila skärmar uppskattar många användare att kunna zooma in på en bild. Försök därför att hitta en balans mellan bildstorlek och filstorlek.
Bilder med hög upplösning ger din webbplats ett professionellt och välbalanserat utseende, med utmärkta zoommöjligheter. Håll bildförhållandet för liknande bilder likvärdigt, för att upprätthålla en enhetlig design över sidtyper.
Till exempel kan du göra alla produktbilder i en e-handelsbutik fyrkantiga. Fyrkantiga bilder är lättare att arrangera om på mindre skärmar. Dessutom passar fyrkantiga och vertikala bilder bra på mobila skärmar, vilket gör att besökare kan se mer av dina bilder utan att behöva scrolla.
💡 På Shopify kan du ladda upp bilder med upp till 5000 x 5000 pixlar och en filstorlek på upp till 20 MB.
För fyrkantiga produktbilder rekommenderas en storlek på 2048 x 2048 pixlar.
Kom ihåg att för att zoomfunktionen ska fungera måste dina bilder vara större än 800 x 800 pixlar.
Tänk på filstorleken
Bilder med större filstorlekar kan påverka hastigheten på din webbplats, särskilt när besökare använder en smartphone. Många plattformar för webbplatsskapande har också maximala filstorleksbegränsningar för uppladdningar. Till exempel använder Shopify en maximal filstorlek på 20 MB.
Om du behöver komprimera dina bilder för att minska deras storlek finns det onlineverktyg för bildstorleksändring som kan hjälpa. Med dessa verktyg kan du formatera om stora bildfiler till nya dimensioner eller filtyper.
För det mesta vill du ha headerbakgrundsbilder under 10 MB, medan produktfoton bör vara bra mycket mindre: runt 300 KB.
Ändra storlek på foton för mobila skärmdimensioner
Shopify ändrar automatiskt storleken på dina bilder för att passa mindre skärmar. Men på andra plattformar kan bilder kräva manuell redigering för användning på smartphones. Tänk på att stationära och mobila skärmar har motsatt bildorientering.
Kom också ihåg att stora filer saktar ner laddningstiden för din webbplats. Medan förlustfri kompression kan ge dig den högsta bildkvaliteten skapar den ofta stora filer som kan ta lång tid för din webbplats att ladda. Överväg att använda de minsta bildfilerna med bästa upplösning.
Även om Shopifys responsiva designer och algoritmer är bra på att ändra storlek och visa dina bilder på olika enheter kan en genomtänkt filstorlek göra shoppingupplevelsen smidigare.
Vilken är den bästa bildfilstypen att använda?
Den rätta bildfiltypen säkerställer högkvalitativa bilder, samtidigt som filstorleken hålls hanterbar för bättre webbplatsprestanda. Här är de vanligaste bildfilformaten och deras bästa användningsområden:
JPEG
JPEG (eller JPG) är ett av de mest använda digitala bildfilformaten eftersom det erbjuder en balans mellan filstorlek och bildkvalitet. Det är ett populärt val för att visa fotografier och komplexa bilder med många färger.
JPEG använder dock förlustkompression, vilket innebär att viss bildkvalitet går förlorad när bilden komprimeras.
PNG
PNG är ett format med förlustfri kompression, vilket innebär att det minskar filstorleken utan att offra bildkvaliteten. Det stöder transparens, vilket gör det till ett bra val för bilder som kräver en transparent bakgrund.
Även om PNG-filer ofta har större filstorlekar än JPEG-filer, gör deras förmåga att behålla tydlighet dem lämpliga för detaljerad grafik och logotyper.
SVG
SVG (scalable vector graphic) är ett vektorbildformat, vilket innebär att det använder matematiska ekvationer för att rendera en bild. Detta gör att SVG-bilder kan skalas till vilken storlek som helst utan kvalitetsförlust.
SVG är ett idealiskt format för logotyper, ikoner och andra grafik som behöver användas på flera platser. SVG-filer är också vanligtvis mindre i filstorlek än andra format, vilket hjälper till att förbättra laddningstiderna.
HEIC
HEIC, eller high efficiency image format, är ett filformat som används av Apple-enheter. Det använder avancerad kompressionsteknik för att skapa högkvalitativa bilder med mindre filstorlekar än motsvarande JPEG-filer.
Men HEIC stöds inte universellt på icke-Apple-enheter.
WebP
WebP är ett bildformat utvecklat av Google. Det erbjuder förlustfri kompression för bilder på webben, vilket ofta minskar filstorleken med mer än 30 % jämfört med JPEG eller PNG.
Detta kan avsevärt förbättra webbplatsens laddningstider, men det är värt att notera att WebP ännu inte stöds universellt av alla webbläsare.
GIF
GIF är ett bitmap-bildformat känt för sin förmåga att stödja enkla animationer. Det använder förlustfri kompression och reducerar bilder till ett maximum av 256 färger, vilket resulterar i mindre filstorlekar.
Även om GIF till stor del har ersatts av PNG för statiska bilder, förblir det ett populärt val för korta, loopande animationer och är universellt erkänt av samtida webbläsare.
TIFF
TIFF, eller tagged image file format, är ett högkvalitativt, förlustfritt format som stöds av bildredigeringsprogram. Det är idealiskt för att lagra bilder för professionell tryckning på grund av sin höga upplösning och färgdjup.
Med TIFF kan flera bilder och sidor bekvämt sparas i en enda fil. Filstorlekarna tenderar dock att vara stora.
Hur man tar reda på bildstorlekar på en webbplats
Det snabbaste sättet att ta reda på storleken på en bild på en webbsida (utan att ladda ner bilden) är att använda din webbläsares Inspektera-verktyg.
Denna metod fungerar på Mac och Windows, med Safari, Chrome eller Firefox webbläsare.
Gå till webbsidan och håll muspekaren över den bild du vill ha information om. Högerklicka med musen för att få upp alternativmenyn och leta efter Inspektera:
Genom att klicka på Inspektera kommer sidans HTML-kod att visas (det kan se skrämmande ut, men oroa dig inte).
I inspektionspanelen bör information om den bild du klickade på vara markerad. När du håller muspekaren över den relevanta koden kommer bilden också att bli markerad:
I det här fallet berättar webbläsaren hur många pixlar bilden använder. Om du ändrar storlek på webbsidan kommer den siffran att ändras i enlighet med detta.
Om du letar efter de ursprungliga uppladdningsegenskaperna för bilden, håll muspekaren över bildens lagringslänk:
För att stänga inspektionspanelen, klicka bara på X i det övre högra hörnet.
Verktyg för att optimera bilder på webben
Onlineverktyg för bildoptimering är ett enkelt, snabbt och oftast gratis sätt att ändra storlek på bilderna på din webbplats. Här är tre populära verktyg för bildoptimering:
Bildstorleksändrare
För den som klarar av engelska är Shopifys kostnadsfria Shopifys kostnadsfria onlineverktyg ett bekvämt sätt att redigera dina bilder för användning på marknadsföringskanaler och sociala medier.
Du kan välja mellan en mängd olika officiella dimensioner för Instagram-inlägg och berättelser, YouTube-miniatyrer och andra typer av socialt innehåll.
Bildoptimerare från Squirai
Squirais bildoptimeringsverktyg är hastighetstestad för att säkerställa att dina bilder är SEO-klara. Det optimerar automatiskt alla bilder på din webbplats – inklusive nya som du lägger till senare.
Dessutom kan du anpassa och applicera en vattenstämpel för att skydda dina produktfotografier utan att behöva kunna någon kod.
LoyaltyHarbour Bildoptimerare
LoyaltyHarbour Bildoptimerare fungerar på liknande sätt som verktyget från Squirai, och komprimerar automatiskt bilder på din webbplats.
Dessutom tillåter instrumentpanelen dig att automatiskt ställa in bildens alt-text och konvertera till den bästa bildfiltypen för bättre sidladdningshastighet.
Alternativt, om du har möjlighet, kan du också använda Photoshop för att hjälpa till att minska filstorleken. Men detta kan vara en mer komplicerad process än ovanstående verktyg.
Felsökning: problem med bildformat
När du hanterar din webbplats kommer du förmodligen att stöta på problem med bildformat vid något tillfälle. Problem med bilder kan variera från felaktig storlek till brutna länkar.
Låt oss titta på lösningar på några vanliga problem med webbplatsbilder.
Felaktig bildstorlek
Problem: Bilder verkar för stora eller små och kan bryta layouten på en webbsida, vilket resulterar i en sämre användarupplevelse.
Lösning: Om du använder webbplatstema eller mall bör du leta efter resurser om de korrekta bilddimensionerna för din design. I din webbplatsbyggare bör du se till att välja renderingsstorlekar för varje bild så att bilderna inte visas i sin fulla, ursprungliga storlek.
Långsamma laddningstider
Problem: Bilder laddas långsammare än resten av webbsidan – eller inte alls.
Lösning: Felaktigt filformat kan leda till onödigt stora filstorlekar som påverkar dina laddningstider. Använd ett bildredigerings- eller konverteringsverktyg för att ändra bildens filformat. För grafik eller logotyper bör du överväga att använda SVG för skalbarhet utan kvalitetsförlust. För andra bilder, överväg att konvertera till WebP för att komprimera stora filer.
Dålig bildkvalitet
Problem: Bilder verkar pixliga eller suddiga.
Lösning: Om dina bilder verkar pixliga eller suddiga, försök att hitta en högre upplöst version. Kom ihåg att bildupplösning skiljer sig från bildstorlek. Upplösning hänvisar till mängden detaljer en bild har, ofta mätt i pixlar per tum (PPI). En högre upplösning innebär en skarpare bild, oavsett storlek.
Om bildkvaliteten minskas av kompression, justera dess kompressionsinställningar eller byt till ett format med förlustfri kompression som PNG.
Bilder visas inte alls
Problem: Brutna bildlänkar resulterar i att ingen bild visas.
Lösning: Verifiera käll-URL:en för dina bilder. Denna URL bör leda direkt till platsen för din bildfil. Jämför bildfilnamnet i URL:en med det faktiska namnet på din bildfil. De bör matcha exakt, inklusive filändelsen (.jpg, .png, .svg).
Optimera webbplatsbilder för framgång
Att lägga till bilder på din webbplats handlar inte bara om att få saker att se bra ut. Det är en nyckelfaktor för att förbättra användarupplevelsen och öka sökmotorrankingen.
Storleken på dina bilder påverkar båda dessa element. För stora kan leda till att dina webbsidor laddar långsamt. För små kan göra så att dina bilder ser pixliga eller suddiga ut.
Se till att förstå bilddimensionernas krav för din webbplatsdesign och välj rätt filformat för att balansera bildupplösning och filstorlek.
Vanliga frågor om bästa bildstorlek för webbplatser
Vad är den bästa bildstorleken för en webbplats?
Fullskärmsbilder bör ha en minimibredd på 2 500 pixlar. Den bästa bildstorleken för en webbplats beror på bildens användning och renderingsstorlek, samt hur bildfilstorleken påverkar sidladdningstiden.
Vad är det bästa bildformatet för en webbplats?
WebP är ett populärt bildformat för webbplatser för att säkerställa snabb prestanda. WebP är utvecklat av Google och erbjuder förlustfri kompression för bilder på webben, vilket minskar filstorleken med så mycket som 30 % jämfört med JPEG och PNG. Det är dock värt att notera att WebP inte stöds universellt av alla webbläsare.
Vad är skillnaden mellan bildstorlek och upplösning?
Bildstorlek hänvisar till dimensionerna av en bild, vanligtvis mätt i dess bredd och höjd i pixlar. Bildupplösning hänvisar till mängden detaljer en bild har, ofta mätt i pixlar per tum (PPI). En högre upplösning innebär mer detalj och en skarpare bild, oavsett storlek.
Hur påverkar bildstorlek webbplatsens laddningstid?
Ju större filstorleken på en bild är, desto längre tid tar det för bilden att laddas ner och visas på en användares skärm. Detta kan sakta ner laddningstiden för webbsidor, vilket kan påverka användarupplevelsen och sökmotorns prestanda negativt. Därför är det viktigt att optimera bilder för webben genom att balansera kvalitet och filstorlek.
Hur kan jag minska filstorleken på bilder utan att förlora kvalitet?
Du kan minska filstorleken på bilder utan att förlora kvalitet genom att använda förlustfri kompression, som tar bort onödig data från bildfilen utan att påverka bildens utseende. Verktyg som Adobe Photoshop eller nätbaserade bildoptimerare erbjuder alternativ för förlustfri kompression.
