Guide for bildehåndtering og optimalisering

Bildeinnstillingen brukes i bildeblokken, karusellen (Lysbilde), bildebanneret og flere andre blokker. Her finner du anbefalte bildestørrelser for PC, nettbrett og mobil, og hvordan du får bildene til å se skarpe ut uten å gjøre butikken treg.

Samme bildeinnstilling brukes i flere blokker, men ikke alle blokker har alle valgene. Det er derfor ikke sikkert du finner igjen alt under i blokken du bruker.

Slik tilpasser bildene seg skjermen

Bilder i designbyggeren er dynamiske. De fyller alltid hele bredden de har tilgjengelig, enten det er hele skjermen, innholdsbredden eller en kolonne.

Høyden følger bildets egne proporsjoner. Et bilde som er 1920 × 600 px, har alltid formatet 3,2 : 1, uansett hvor bredt det vises. Bildet blir ikke beskåret, og det blir ikke høyere på små skjermer.

Dette betyr to ting:

• Du bestemmer formen på banneret ved å velge bildets proporsjoner. Et bredt bilde gir et lavt banner, et kvadratisk bilde gir et høyt banner.
• Et bredt PC-banner blir en smal stripe på mobil. Et banner på 1920 × 600 px blir bare rundt 120 px høyt på en mobil som er 390 px bred. Tekst i bildet blir da for liten til å lese. Derfor kan du laste opp egne bilder for nettbrett og mobil.

💡 Heltebanner fungerer annerledes
Seksjonen Heltebanner har én fast høyde som du stiller inn selv, og bildet beskjæres for å fylle den. Se egen seksjon om heltebanner lenger ned.

Bilder på ulike enheter

Du kan laste opp opptil tre versjoner av samme bilde. Butikken velger automatisk riktig bilde ut fra skjermbredden til kunden.

Feltene for nettbrett og mobil vises først når du har lagt inn et standardbilde.

Hvis du ikke laster opp alle tre

Nettbrett og mobil deler altså bildet når bare ett av dem er fylt ut. Har du bare et kvadratisk mobilbilde, vises det også på nettbrett. Det blir et høyt banner der.

Anbefalte bildestørrelser

Størrelsene under gjelder bannere som går over hele bredden: karusell, bildebanner og bildeblokk i full bredde.

Hvorfor akkurat disse størrelsene

Standard, 1920 px bredt. De fleste PC-skjermer er 1920 px brede eller smalere. Bildet strekkes til hele bredden. Er bildet smalere enn skjermen, blir det forstørret og ser uskarpt ut. Et bilde på 1600 px blir for eksempel forstørret 20 % på en skjerm som er 1920 px bred. Høyden velger du selv. 600 px gir et banner som synes godt uten å skyve alt annet innhold ned.

Nettbrett, 1280 px bredt. Nettbrettbildet vises på skjermer som er 768–1023 px brede. Nettbrett har retinaskjermer, så bildet må være bredere enn skjermen for å bli skarpt (se neste avsnitt). 1280 px er skarpt på de fleste nettbrett uten at filen blir tung. Formatet 2 : 1 gir et banner som er høyt nok til at tekst og motiv synes. Vil du bruke samme motiv som på PC, kan du beholde standardformatet. Da blir banneret lavere, rundt 240–320 px høyt.

Mobil, 800 px bredt. Mobiler viser innholdet rundt 360–430 px bredt, men har minst dobbelt så mange piksler (se neste avsnitt). 800 px er skarpt på de fleste mobiler. Et kvadratisk eller stående bilde gir et banner som fyller en god del av skjermen, og tekst i bildet blir lesbar. Har bildet tekst eller logo, bruk 1080 px bredde. Tekst viser uskarphet tydeligere enn et fotografi. Har dere brukt 1000 × 1000 px til nå, fungerer det fint.

Hvorfor en liten mobil trenger et større bilde

En mobil som er 390 px bred, har ikke 390 piksler i skjermen. Nesten alle mobiler og nettbrett har retinaskjermer, eller skjermer med høy oppløsning. Der brukes to eller tre fysiske piksler for hver piksel i nettsiden:

Laster du opp et mobilbilde som er 400 px bredt, må mobilen strekke det to til tre ganger for å fylle skjermen. Det ser uskarpt ut, særlig tekst og logoer. Et bilde på 800 px fyller en 2×-skjerm helt, og ser nesten like skarpt ut på en 3×-skjerm.

Dette gjør ikke mobilsiden tung. Mobilen laster bare ned mobilbildet, ikke PC-bildet. Og det er komprimeringen, ikke antall piksler, som avgjør filstørrelsen. Et godt komprimert bilde på 800 × 800 px er som regel under 100 KB.

💡 Samme proporsjoner på bilder i samme karusell
Høyden på karusellen følger bildet. Har lysbildene ulike proporsjoner, hopper karusellen i høyde når den bytter bilde. Bruk samme størrelse på alle lysbildene for hver enhet.

Bilder i kolonner

Et bilde i en kolonne vises bare så bredt som kolonnen. Med fire kolonner på PC er hver kolonne rundt 300–400 px bred.

• Bilde i en kolonne av fire: 800 px bredt holder.
• Bilde i en kolonne av to: 1200 px bredt holder.
• Bilde over hele innholdsbredden (ikke full skjermbredde): 1600 px bredt holder.

Et større bilde ser ikke bedre ut. Det gjør bare siden tregere.

Heltebanner

Heltebanner har ett bilde for alle enheter. Du stiller inn høyden i seksjonens avanserte innstillinger, med Bannerhøyde på datamaskin og Bannerhøyde på mobil. Tallene er i piksler. Standardhøyden på PC er 450 px. Lar du høyden for mobil stå tom, brukes høyden for PC også på mobil. Bildet fylles inn og beskjæres slik at det dekker hele banneret.

• Bruk et bilde på 1920 × 1080 px.
• Legg det viktigste av motivet midt i bildet. På smale skjermer beskjæres sidene.
• Ikke legg tekst inn i selve bildet. Bruk tekstfeltene i seksjonen, så blir teksten lesbar på alle skjermer.
• Komprimer bildet godt før du laster det opp. Heltebanneret bruker filen slik du laster den opp, uten automatisk nedskalering.

Bakgrunnsbilde i kolonneseksjon

Et bakgrunnsbilde vises som standard i sin opprinnelige størrelse. Det strekkes ikke. Sett Bakgrunnsstørrelse til Cover, så fyller bildet hele feltet, og bruk et bilde på 1920 px bredde. Det finnes ikke eget mobilbilde for bakgrunnsbilder, så legg motivet midt i bildet.

Filstørrelse og filtype

Store bildefiler er den vanligste årsaken til trege nettsider. En treg side gir færre kjøp og dårligere plassering i Google.

• JPG for fotografier.
• PNG for grafikk med skarpe kanter, logoer og bilder med gjennomsiktig bakgrunn.
• WebP gir minst fil med samme kvalitet, og støttes av alle moderne nettlesere.
• GIF bare for enkle animasjoner. GIF-filer blir ikke gjort om til et mer effektivt format.

Største tillatte fil er 2 MB. Bildet komprimeres ikke når du laster det opp. Komprimer det derfor selv først, for eksempel med TinyPNG eller Squoosh. Forskjellen er som regel ikke synlig, men filen blir ofte halvparten så stor.

Edit size

Under bildet finner du Edit size, der du angir bredde og høyde. Standard, nettbrett og mobil har hver sin Edit size, så fyll ut målene for hvert bilde du laster opp. Målene fylles ikke ut automatisk. Du finner bildets mål under Dimensjoner når du velger bildet i mediebiblioteket.

1. Last opp bildet.

2. Klikk på Edit size.

3. Skriv inn de faktiske målene på bildefilen, for eksempel 1920 og 600.

Tallene brukes til to ting:

• Nettleseren holder av riktig plass til bildet før det er lastet. Da hopper ikke siden når bildet dukker opp. Dette krever at både bredde og høyde er fylt ut med tall.
• Butikken henter bildet i denne størrelsen. Setter du mindre mål enn filen, lastes en mindre versjon. Står feltet på auto, lastes bildet i full størrelse. Klikk på pilen ved feltene for å sette dem tilbake til auto.

Bildet vises alltid så bredt som plassen tillater. Edit size endrer ikke hvor stort bildet ser ut på siden.

⚠️ Ikke sett for små mål
Setter du bredden til for eksempel 400 på mobilbildet, blir bildet uskarpt på mobiler med høy pikseltetthet. Bruk målene fra tabellen over.

Lazy Load (smart innlasting)

Lazy Load bestemmer når et bilde hentes.

• På: Bildet lastes først når kunden skroller ned til det. Siden åpner seg raskere. Bruk dette på bilder lenger ned på siden.
• Av: Bildet lastes med en gang. Bruk dette på bilder helt øverst, som hovedbanneret, slik at det synes med en gang siden åpner.

Alternativ tekst (alt-tekst)

Alt-tekst er en tekst som beskriver bildet. Kunden ser den ikke, men den brukes til to ting:

1. Tilgjengelighet: Skjermlesere leser opp teksten for kunder med nedsatt syn. Dette er et krav om universell utforming.

2. SEO: Google bruker alt-teksten til å forstå hva bildet viser. Gode beskrivelser gjør at bildene kan dukke opp i Google Bildesøk.

God alt-tekst: «Rød strikkegenser i ull til herre». Dårlig alt-tekst: «bilde123» eller bare merkenavnet.

Avanserte muligheter

• Lenke: Gjør hele bildet klikkbart ved å legge inn en URL til en kategori eller et produkt.
• Tilpassede klasser: I avansert modus kan du gi bildet en egen CSS-klasse og legge på effekter som skygger eller animasjoner med tilpasset CSS. Les mer om tilpasset CSS.

Tips

• Du kan laste opp helt ulike bilder for PC, nettbrett og mobil. Et tettere utsnitt på mobil gjør ofte motivet tydeligere.
• Legg tekst i tekstfeltene i blokken i stedet for inn i bildet. Da blir teksten skarp og lesbar på alle skjermer, og Google kan lese den.
• Sjekk banneret på en ekte mobil og et ekte nettbrett før du publiserer. Forhåndsvisningen viser formen, men ikke hvor lesbar teksten er.