I dag bruker flere mennesker internett på mobile enheter enn på stasjonære datamaskiner. Med et mangfold av skjermstørrelser i bruk, må du velge de beste bildestørrelsene når du bygger en nettsid, slik at alle besøkende får en god brukeropplevelse – uansett hvilken enhet de bruker.
Hvis du ikke optimaliserer bildene dine, kan besøkende oppleve at bildene er for små og uklare, eller for store, noe som fører til lengre lastetider og unødvendig rulling og zooming.
Den gode nyheten er at det er enkelt å gjøre bildene dine kompatible med flere enheter. Ved å velge de riktige bildedimensjonene, holde filstørrelsene minimale og bruke et responsivt nettsidedesign, kan du gi en førsteklasses nettleseropplevelse.
Følg veiledningen nedenfor for å optimalisere bildene dine for mobile og stasjonære enheter.
Beste bildestørrelser for nettsider
Pixelbredde: 2500 piksler er perfekt for å strekke seg fullskjerm over en nettleser i de fleste tilfeller. Ethvert bilde som er mindre enn dette kan bli kuttet av eller se uklart ut hvis det må fylle nettleserens bredde.
Bildestørrelse: Den optimale pikselstørrelsen på bildene dine avhenger av bruksområdet. For eksempel må bakgrunnsbilder være større enn bilder i blogginnlegg.
Filstørrelse: Alt større enn 20 megabyte kan dramatisk påvirke hastigheten på nettsiden din. Mindre bilder (opptil to megabyte, men rundt 500 kilobyte) er bedre i de fleste tilfeller.
Bildeattributt: Bildeattributter (alt-tekst eller alt-tag) er tekstbaserte og påvirker ikke nettstedets ytelse. De brukes imidlertid til å tolke bilder via skjermleserprogramvare og er et nøkkel-element i nettverks tilgjengelighet. Vær kortfattet med attributtteksten – det er best praksis å holde alt-tekst under 100 tegn.
Beste bildedimensjoner for stasjonære og mobile enheter
Tabellen nedenfor gir anbefalte dimensjoner for bilder på både stasjonære og mobile nettsider:
| Type nettsidebilde | Desktop bildedimensjoner (B x H) | Mobile bildedimensjoner (B x H) | Anbefalt aspekteratio |
|---|---|---|---|
| Bakgrunnsbilde | 2560 x 1400 piksler | 360 x 640 piksler | 16:9 |
| Hero-bilde | 1280 x 720 piksler | 360 x 200 piksler | 16:9 |
| Nettsidebanner | 1200 x 400 piksler | 360 x 120 piksler | 3:1 |
| Bloggbilde | 1200 x 800 piksler | 360 x 240 piksler | 3:2 |
| Logo (rektangulær) | 400 x 100 piksler | 160 x 40 piksler | 4:1 |
| Logo (kvadratisk) | 100 x 100 piksler | 60 x 60 piksler | 1:1 |
| Favicon | 16 x 16 piksler | 16 x 16 piksler | 1:1 |
| Ikoner for sosiale medier | 32 x 32 piksler | 48 x 48 piksler | 1:1 |
| Lightbox-bilder (fullskjerm) | 1920 x 1080 piksler | 360 x 640 piksler | 16:9 |
| Miniatyrbilde | 300 x 300 piksler | 90 x 90 piksler | 1:1 |
Dette er foreslåtte størrelser, som kan måtte justeres avhengig av om du bruker et responsivt nettsidedesign.
Det er nesten alltid en fordel at renderstørrelsen på bildene dine er mindre enn opplastingsstørrelsen.
Hvorfor er bildestørrelse viktig for nettsider?
For nettsider er bildestørrelse viktig av tre hovedgrunner:
- Det skaper en bedre brukeropplevelse.
- Det forbedrer hastigheten på nettsiden.
- Det hjelper med rangeringen av nettsiden.
Skaper en bedre brukeropplevelse
Å ha korrekt størrelse på bildene for hvert bruksområde på nettsiden din bidrar til å forbedre brukeropplevelsen. Besøkende kan få tilgang til et passende detaljnivå, og trenger ikke å scrolle for å se hele bildet.
Hvis bildene er av lav kvalitet, pikselerte eller for små, kan det påvirke den oppfattede kvaliteten på innholdet. For en nettbutikk kan dette føre til at kunder stiller spørsmål ved kvaliteten på virksomheten eller produktene dine.
Omvendt, bilder av høy kvalitet med korrekt størrelse øker den oppfattede verdien av produktene dine og gir mer visuell informasjon til potensielle kunder.
For eksempel, se hvordan bildene nedenfor fra det bærekraftige skomerket Allbirds forbedrer brukeropplevelsen ved å tydelig fremheve de ulike funksjonene ved produktet deres.
Forbedrer hastigheten på nettsiden
Når du laster opp store bilder til nettsiden din, tar det lengre tid for serveren å laste inn siden. Mindre bilder (både i dimensjoner og filstørrelse) har en tendens til å laste raskere på tvers av enheter.
Bildelastingshastighet kalles ofte “contentful paint.” Du kan sjekke innholdet på nettsidens contentful paint og andre hastighetsmålinger ved å bruke Google’s PageSpeed Insights.
Halvparten av kundene sier de ville forlate handlekurven hvis en nettbutikks nettside tar mer enn tre sekunder å laste. Innsikter som dette viser hvor viktig det er å optimalisere lastetidene for å unngå en høy avvisningsrate.
Hjelper rangeringen av nettsiden
Rangeringen av nettsiden refererer til posisjonen til nettsiden din i søkemotorresultatsider (SERP). Nettsider som er optimalisert for søk vil rangere høyt på SERP for relevante bruker søkespørsmål (kjent som søkeord).
Google bruker en rekke målinger for å avgjøre hvilke nettsider som skal rangere høyest i søkeresultatene deres. Kvaliteten på bildene (eller, mer presist, den forbedrede brukeropplevelsen de genererer) er en sannsynlig faktor i Google’s algoritme.
Retningslinjer for bildestørrelse på nettsider
Det finnes fem hovedtyper bilder du vil se på en nettside:
Ulike størrelseskrav gjelder for hver type nettsidebilde. La oss se på de beste bildestørrelsene for vanlige typer nettsidebilder.
Størrelser på bakgrunnsbilder
Bakgrunnsbilder er vanligvis de største bildene på en nettside. Bildet fungerer som bakgrunn for en hjemmeside eller annen landingsside.
For eksempel lar sykkelforhandleren Cowboy produktet sitt ta sentrum ved å bruke det som bakgrunn på hjemmesiden. Det fyller skjermen, uansett hvilken enhet det vises på.
Anbefalt bildebredde: 2560 piksler
Anbefalt bildehøyde: 1400 piksler
Aspekteratio: 16:9
Anbefalt filstørrelse: 20 MB
Størrelser på hero-bilder
Hero-bilder ligner på bakgrunnsbilder, men har en tendens til å være mindre i høyden – omtrent halvparten så store. Et hero-bilde er et flott alternativ hvis du trenger å vise mer tekst på skjermen uten at brukerne må scrolle for å se det.
I eksemplet ovenfor bruker BLK & Bold et hero-bilde med en smal aspekteratio for å fylle skjermen, samtidig som det er plass til innhold under.
Anbefalt bildebredde: Mellom 1280 piksler og 2500 piksler
Anbefalt bildehøyde: Mellom 720 piksler og 900 piksler
Aspekteratio: 16:9
Anbefalt filstørrelse: 10 MB
Størrelser på bannerbilder
Bannerbilder kan ha ulike størrelser og former, avhengig av hvor de befinner seg og hva du ønsker å vise til besøkende. Den mest typiske typen nettsidebanner er en bannerannonse. En av de mest populære tjenestene for å promotere bannerannonser er Google Ads.
Hvis du vurderer et bannerbilde som ikke er en annonse, er rektangulære alternativer (f.eks. 300 x 200 piksler eller 970 x 90 piksler) ofte bedre.
Anbefalt bildebredde: Sjekk med annonseplattformen
Anbefalt bildehøyde: Sjekk med annonseplattformen
Aspekteratio: Ulike
Anbefalt filstørrelse: 150 KB (Sjekk med annonseplattformen)
Størrelser på bloggbilder
Bloggbilder kan variere i type og størrelse. Innlegget ovenfor kommer fra søvnekspertene Kulala, og mens opplastingsstørrelsen på det fremhevede bildet er 1200 x 620 piksler, er den renderte størrelsen mindre, på 894 x 462 piksler.
Å sette en renderstørrelse for nettsidene dine hjelper med å raffinere designet ditt og holder filene små (bildet i Kulala-innlegget er bare 95,1 KB).
Når det gjelder hovedheaderbilder for blogginnleggene dine (de som er øverst på siden), bør de ha lik størrelse over hele bloggen din.
Anbefalt bildebredde: 1200 piksler
Anbefalt bildehøyde: 800 piksler
Aspekteratio: 3:2
Anbefalt filstørrelse: 3 MB
Størrelser på logoer
Logoen din vil sannsynligvis være et av de minste bildene på nettsiden din (med mindre du teller favicon i fanebaren). Avhengig av logoens design, bør du velge enten et rektangulært eller kvadratisk aspektforhold.
De fleste logoer passer til et kvadratisk 1:1-forhold, noe du kan se nederst til venstre i Kulala-eksemplet ovenfor.
Rektangulære forhold fungerer godt for lengre merkenavn eller der logoen består av ord i stedet for en grafikk. Shopifys egen nettside-logo bruker et lengre 4:1-forhold.
Anbefalt bildebredde: 100 piksler
Anbefalt bildehøyde: 100 piksler
Aspekteratio: 1:1, 2:3, 4:1
Anbefalt filstørrelse: 1 MB
Anbefalinger for bildestørrelser på mobile enheter
Velg de riktige bildedimensjonene
På mindre mobile skjermer setter mange brukere pris på å kunne zoome inn på et bilde. Så prøv å finne en balanse mellom bildestørrelse og filstørrelse.
Høyoppløselige bilder gir nettsiden din et profesjonelt og helhetlig utseende, med gode zoommuligheter. Hold aspekteratioen til lignende bilder den samme for å opprettholde et ensartet design på tvers av sidetyper.
For eksempel kan du gjøre alle produktbilder i en nettbutikk kvadratiske. Kvadratiske bilder er enklere å omplassere på mindre skjermer. I tillegg passer kvadratiske og vertikale bilder godt på mobile skjermer, slik at besøkende kan se mer av bildene dine uten å måtte scrolle.
💡 På Shopify kan du laste opp bilder på opptil 5000 x 5000 piksler med en filstørrelse på opptil 20 MB.
For kvadratiske produktbilder anbefales en størrelse på 2048 x 2048 piksler.
Husk at for zoomfunksjonalitet til å fungere, må bildene dine være mer enn 800 x 800 piksler.
Hold filstørrelsen i tankene
Bilder med større filstørrelser kan påvirke hastigheten på nettsiden din, spesielt når besøkende bruker en smarttelefon. Mange nettsidebyggingsplattformer har også maksimale filstørrelsesbegrensninger for opplastinger. For eksempel bruker Shopify en maksimal filstørrelse på 20 MB.
Hvis du trenger å komprimere bildene dine for å redusere størrelsen, finnes det online verktøy for bildekomprimering som kan hjelpe. Med disse verktøyene kan du omformatere store bildefiler til nye dimensjoner eller filtyper.
Vanligvis bør du prøve å ha header-bakgrunnsbilder under 10 MB, mens produktfotografier bør være mye mindre – rundt 300 KB.
Endre størrelsen på bilder for mobile skjermdimensjoner
Shopify endrer automatisk størrelsen på bildene dine for å passe til mindre skjermer. Men på andre plattformer kan bilder kreve manuell redigering for å gjøre dem mobile-klare. Husk at stasjonære og mobile skjermer har motsatte orienteringer.
Igjen, husk at store filer reduserer lastetiden på nettsiden din. Mens tapsfri komprimering kan gi deg det høyeste bildekvalitet, lager det ofte store filer som kan ta lang tid å laste inn. Vurder å bruke de minste bildefilene med best oppløsning.
Mens Shopifys responsive design og algoritmer er gode til å endre størrelsen på og vise bildene dine på tvers av enheter, kan det å gi dem en hånd med gjennomtenkt filstørrelse gjøre for en smidigere handleopplevelse.
Hva er den beste bildeformatet å bruke?
Det riktige bildeformatet sikrer høy kvalitet på bildene, samtidig som filstørrelsen holdes håndterbar for bedre ytelse på nettsiden. Her er de vanligste bildeformatene og deres beste bruksområder:
JPEG
JPEG (eller JPG) er et av de mest brukte digitale bildeformatene fordi det tilbyr en balanse mellom filstørrelse og bildekvalitet. Det er et populært valg for å vise fotografier og komplekse bilder med mange farger.
Imidlertid bruker JPEG tapskomprimering, noe som betyr at noe bildekvalitet går tapt når bildet komprimeres.
PNG
PNG er et tapsfritt komprimeringsformat, noe som betyr at det reduserer filstørrelsen uten å ofre bildekvaliteten. Det støtter gjennomsiktighet, noe som gjør det til et godt valg for bilder som krever en gjennomsiktig bakgrunn.
Selv om PNG-er ofte har større filstørrelser enn JPEG-er, gjør deres evne til å bevare klarheten dem egnet for detaljerte grafikker og logoer.
SVG
SVG (skalerbar vektorgrafikk) er et vektor bildeformat, noe som betyr at det bruker matematiske ligninger for å gjengi et bilde. Dette gjør at SVG-bilder kan skaleres til hvilken som helst størrelse uten tap av kvalitet.
SVG er et ideelt format for logoer, ikoner og annen grafikk som må brukes på flere steder. SVG-er er også vanligvis mindre i filstørrelse enn andre formater, noe som bidrar til å forbedre lastetidene.
HEIC
HEIC, eller high efficiency image format, er et filformat som brukes av Apple-enheter. Det bruker avansert komprimeringsteknologi for å lage høyoppløselige bilder med mindre filstørrelser enn tilsvarende JPEG-er.
Imidlertid er HEIC ikke universelt støttet på ikke-Apple-enheter.
WebP
WebP er et bildeformat utviklet av Google. Det gir tapsfri komprimering for bilder på nettet, og reduserer ofte filstørrelsen med mer enn 30 % sammenlignet med JPEG eller PNG.
Dette kan betydelig forbedre lastetidene på nettsiden, men det er verdt å merke seg at WebP ikke ennå er universelt støttet av alle nettlesere.
GIF
GIF er et bitmap bildeformat kjent for evnen til å støtte enkle animasjoner. Det bruker tapsfri komprimering og reduserer bilder til maksimalt 256 farger, noe som resulterer i mindre filstørrelser.
Selv om GIF i stor grad har blitt erstattet av PNG for statiske bilder, forblir det et populært valg for korte, loopende animasjoner og er universelt anerkjent av nettlesere.
TIFF
TIFF, eller tagged image file format, er et høyoppløselig, tapsfritt format som er mye støttet av bildebehandlingsprogrammer. Det er ideelt for lagring av bilder for profesjonell trykking på grunn av den høye oppløsningen og fargedybden.
Med TIFF kan flere bilder og sider enkelt lagres i en enkelt fil. Imidlertid har filstørrelsene en tendens til å være store.
Hvordan finne ut bildestørrelser på en nettside
Den raskeste måten å se opp størrelsen på et bilde på en hvilken som helst nettside (uten å laste ned bildet) er å bruke nettleserens Inspeksjonsverktøy.
Denne metoden fungerer på Mac og Windows, med Safari, Chrome eller Firefox nettlesere.
Gå til nettsiden og hold musen over bildet du vil ha informasjon om. Høyreklikk med musen for å åpne alternativmenyen og se etter Inspeksjon:
Å klikke på Inspeksjon vil vise sidens HTML-kode (det kan se skremmende ut, men ikke bekymre deg).
I inspeksjonspanelet skal informasjon om bildet du klikket på være uthevet. Når du holder musen over den relevante koden, vil bildet også bli uthevet:
I dette tilfellet forteller nettleseren deg hvor mange piksler bildet bruker. Hvis du endrer størrelsen på nettsiden, vil dette tallet endres tilsvarende.
Hvis du leter etter de opprinnelige opplastingsegenskapene til bildet, holder du musen over bildefilens lagringslenke:
For å avslutte inspeksjonspanelet klikker du bare på X i øverste høyre hjørne.
Verktøy for bildeoptimalisering
Online bildeoptimaliseringsverktøy er en enkel, rask (og vanligvis gratis) måte å endre størrelsen på bildene på nettsiden din. Her er tre populære verktøy for bildeoptimalisering:
Bildeomformer
Shopifys gratis online bildeomformingsverktøy er en praktisk måte å justere bildene dine for bruk på markedsføringskanaler og sosiale medier.
Du kan velge mellom en rekke offisielle dimensjoner for Instagram-innlegg og historier, YouTube-miniatyrbilder og andre typer sosialt innhold.
Bildeoptimalisator fra Squirai
Squirais bildeoptimaliseringsverktøy er hastighetstestet for å sikre at bildene dine er SEO-klare. Det optimaliserer automatisk alle bildene på nettsiden din – inkludert nye bilder du legger til senere.
I tillegg kan du tilpasse og bruke et vannmerke for å beskytte din produktfotografi uten å måtte kunne programmering.
LoyaltyHarbour Bildeoptimalisator
LoyaltyHarbour Bildeoptimalisator fungerer på samme måte som verktøyet fra Squirai, og komprimerer automatisk bilder på nettsiden din.
I tillegg lar dashbordet deg automatisk sette bilde alt-tekst og konvertere til det beste bildeformatet for bedre lastetid.
Alternativt kan du bruke Photoshop for å redusere filstørrelsen, men dette kan være en mer komplisert prosess enn de ovennevnte verktøyene.
Feilsøking: problemer med bildeformatering
Når du administrerer nettsiden din, vil du sannsynligvis støte på problemer med bildeformatering på et tidspunkt. Problemer med bilder kan variere fra feil størrelse til ødelagte lenker.
La oss se på løsninger på noen vanlige problemer med nettsidebilder.
Feil bildestørrelse
Problem: Bilder vises for store eller små, og kan bryte oppsettet på en nettside, noe som resulterer i en kompromittert brukeropplevelse.
Løsning: Hvis du bruker et nettside-tema eller mal, ser du etter ressurser om de riktige bildedimensjonene for designet ditt. I nettsidebyggeren må du sørge for å velge renderstørrelser for hvert bilde, slik at bildene ikke vises i sin fulle, opprinnelige størrelse.
Langsom lastetid
Problem: Bilder laster saktere enn resten av en nettside – eller ikke i det hele tatt.
Løsning: Feil filformat kan føre til unødvendig store filstørrelser som påvirker lastetidene. Bruk et bildebehandlings- eller konverteringsverktøy for å endre filformatet på bildene dine. For grafikker eller logoer, vurder å bruke SVG for skalerbarhet uten tap av kvalitet. For andre bilder bør du vurdere å konvertere til WebP for å komprimere store filer.
Dårlig bildekvalitet
Problem: Bilder ser pikselerte eller uklare ut.
Løsning: Hvis bildene dine ser pikselerte eller uklare ut, bør du prøve å finne en høyoppløselig versjon. Husk at bildekvalitet er forskjellig fra bildestørrelse. Oppløsning refererer til mengden detaljer et bilde har, ofte målt i piksler per tomme (PPI). Høyere oppløsning betyr et skarpere bilde, uansett størrelse.
Hvis bildekvaliteten reduseres av komprimering, justerer du komprimeringsinnstillingene eller bytt til et tapsfritt komprimeringsformat som PNG.
Bilder vises ikke i det hele tatt
Problem: Ødelagte bildelenker resulterer i at ingen bilder vises.
Løsning: Verifiser kilde-URL-en til bildene dine. Denne URL-en bør føre direkte til plasseringen av bildefilen din. Sammenlign bildefilnavnet i URL-en med det faktiske navnet på bildefilen din. De bør matche nøyaktig, inkludert filtypen (.jpg, .png, .svg).
Optimaliser nettsidebilder for suksess
Å legge til bilder på nettsiden din handler ikke bare om å få ting til å se bra ut – det er en nøkkelfaktor for å forbedre brukeropplevelsen og øke rangeringen i søkemotorene.
Størrelsen på bildene dine påvirker begge disse elementene. Hvis de er for store, vil nettsidene dine lastes inn sakte. Er de for små, vil bildene dine se pikselerte eller uklare ut.
Sørg for å forstå kravene til bildedimensjoner i nettsidedesignet ditt, og velg det riktige filformatet for å balansere bildekvalitet og filstørrelse.
Ofte stilte spørsmål om beste bildestørrelse for nettsider
Hva er den beste bildestørrelsen for en nettside?
Fullskjermbilder bør ha en minimum bredde på 2500 piksler. Den beste bildestørrelsen for en nettside avhenger av bildets bruk og renderstørrelse, samt effekten av bildefilstørrelse på lastetiden.
Hva er det beste bildeformatet for en nettside?
WebP er et populært bildeformat for nettsider for å sikre rask ytelse. Utviklet av Google, tilbyr WebP tapsfri komprimering for bilder på nettet, og reduserer filstørrelsen med opptil 30 % sammenlignet med JPEG og PNG. Det er imidlertid verdt å merke seg at WebP ikke er universelt støttet av alle nettlesere.
Hva er forskjellen mellom bildekvalitet og oppløsning?
Bildekvalitet betyr størrelsene til et bilde, vanligvis målt i pikselbredde og -høyde. Bildeoppløsning viser til hvor mange detaljer et bilde har, ofte målt i piksler per tomme (PPI). Høyere oppløsning betyr mer detaljer og et skarpere bilde, uansett størrelse.
Hvordan påvirker bildekvalitet lastetiden på nettsiden?
Jo større filstørrelsen på et bilde er, jo lenger tid tar det for bildet å laste ned og vises på en brukers skjerm. Dette kan redusere lastetiden på nettsider, noe som kan påvirke brukeropplevelsen og ytelsen i søkemotorene negativt. Derfor er det viktig å optimalisere bilder ved å balansere kvalitet og filstørrelse.
Hvordan kan jeg redusere filstørrelsen på bilder uten å miste kvalitet?
Du kan redusere filstørrelsen på bilder uten å miste kvalitet ved å bruke tapsfri komprimering, som fjerner unødvendige data fra bildefilen uten å påvirke bildets utseende. Verktøy som Adobe Photoshop eller online bildeoptimaliseringsverktøy tilbyr alternativer for tapsfri komprimering.
