Riktlinjer för att optimera bilder för webben år 2025

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 bygger din webbplats, så att alla besökare får en bra användarupplevelse—oavsett vilken enhet de använder.

Om du inte optimerar dina bilder kan webbplatsbesökare 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.

Bästa bildstorlekar för webbplatser

Pixelbredd: 2500 pixlar är perfekt för att sträcka sig över hela skärmen i de flesta fall. Eventuella bilder som är mindre än så kan bli avklippta eller se suddiga ut om de behöver fylla bredden på webbläsaren.

Bildstorlek: Den bästa övergripande (pixel) storleken på dina bilder beror på användningsområdet, till exempel 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 en viktig del av webbtillgänglighet. Var kortfattad med attributtexten—det är god praxis att hålla alt-text under 100 tecken.

Bästa bilddimensioner för stationära och mobila enheter

Tabellen nedan visar de rekommenderade dimensionerna för bilder på både stationära och mobila webbplatser:

Dessa är föreslagna storlekar, som kan behöva justeras beroende på om du använder en responsiv webbdesign.

Det är nästan alltid en bra idé att renderingsstorleken på dina bilder är mindre än deras uppladdningsstorlek.

Varför är bildstorlek viktig för webbplatser?

För webbplatser är bildstorlek viktig av tre huvudsakliga skäl:

• Det skapar en bättre användarupplevelse.
• Det förbättrar hastigheten på webbplatsens sidor.
• Det hjälper med webbplatsens ranking.

Skapar en bättre användarupplevelse

Att ha korrekt storlek på bilder för varje användningsområde på din webbplats hjälper till att förbättra 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 bilder är av låg kvalitet, pixelerade eller för små kan de påverka den upplevda kvaliteten på ditt innehåll. 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, korrekt storleksanpassade bilder det upplevda värdet av dina produkter och ger mer visuell information till potentiella kunder.

Till exempel, 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 produkt.

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.

Hälften av kunderna 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.

Hjälper 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 olika metrik för att avgöra vilka webbsidor som rankas högst i sina sökresultat. Kvaliteten på bilder (eller, mer exakt, den förbättrade användarupplevelsen 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
• Hero-bildsstorlekar
• Bannerbildsstorlekar
• Bloggbildsstorlekar
• Logotypstorlekar

Olika storlekskrav gäller för varje typ av webbbild. 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: 2560 pixlar

Rekommenderad bildhöjd: 1400 pixlar

Bildförhållande: 16:9

Rekommenderad filstorlek: 20 MB

Hero-bildsstorlekar

Hero-bilder liknar bakgrundsbilder men tenderar att vara mindre i höjd—ungefär hälften så stora. En hero-bild ä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 hero-bild med ett smalt bildförhållande för att fylla skärmen men lämna utrymme för innehåll under.

Rekommenderad bildbredd: Mellan 1280 pixlar och 2500 pixlar

Rekommenderad bildhöjd: Mellan 720 pixlar och 900 pixlar

Bildförhållande: 16:9

Rekommenderad filstorlek: 10 MB

Bannerbildsstorlekar

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)

Bloggbildsstorlekar

Bloggbilder kan variera i typ och storlek. Inlägget ovan kommer från sömnexperterna Kulala, och medan uppladdningsstorleken på den utvalda bilden är 1200 x 620 pixlar, är den renderade storleken mindre, på 894 x 462 pixlar.

Att ställa in en renderingsstorlek för dina webbsidor hjälper till att förfina din design och håller 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: 1200 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 Kulala-exemplet ovan.

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

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 webbplatsbyggarplattformar 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 omformatera stora bildfiler till nya dimensioner eller filtyper.

För det mesta vill du ha headerbakgrundsbilder under 10 MB, medan produktfoton bör vara 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 att bli mobila klara. Tänk på att stationära och mobila skärmar har motsatta orienteringar.

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

Men JPEG använder 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 detaljerade 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 laddningstider.

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 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. Men filstorlekar tenderar 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 bildoptimering

Onlineverktyg för bildoptimering är ett enkelt, snabbt (och vanligtvis gratis) sätt att ändra storlek på bilderna på din webbplats. Här är tre populära verktyg för bildoptimering:

• Bildstorleksändrare
• Bildoptimerare av Squirai
• LoyaltyHarbour Bildoptimerare

Bildstorleksändrare

Shopifys gratis online bildstorleksändringsverktyg är ett bekvämt sätt att justera 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 av Squirai

Squirais bildoptimeringsverktyg är hastighetstestat 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 din produktfotografi 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 kompromissad användarupplevelse.

Lösning: Om du använder ett webbplatstema eller mall, leta efter resurser om de korrekta bilddimensionerna för din design. I din webbplatsbyggare, 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 en webbsida—eller inte alls.

Lösning: Felaktigt filformat kan leda till onödigt stora filstorlekar som påverkar laddningstider. Använd ett bildredigerings- eller konverteringsverktyg för att ändra bildens filformat. För grafik eller logotyper, överväg 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 pixelerade eller suddiga.

Lösning: Om dina bilder verkar pixelerade 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, och dina webbsidor kan ladda långsamt. För små, och dina bilder kan se pixelerade 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.

---

Från första gången säljare till globala återförsäljare, Shopify fungerar för alla. Se planer och priser.