Guide for bildehåndtering og optimalisering

Bilder er avgjørende for nettbutikkens utseende, men de påvirker også tekniske faktorer som lastetid og synlighet i søkemotorer. Denne guiden forklarer hvordan du bruker bildeinnstillingene for å skape en profesjonell og rask brukeropplevelse.

Selv om samme blokkinnstilling brukes på flere blokker kan innholdet variere. Det er derfor ikke sikkert du finner igjen alle innstillinger under i blokken du benytter.

Bilder på ulike enheter (Responsivitet)

For å sikre at designet ser bra ut på både store dataskjermer og små mobiler, kan du laste opp tre ulike versjoner av samme bilde. Systemet bytter automatisk bilde basert på kundens skjermstørrelse.

Standard: Hovedbildet som vises på PC og Mac.
Nettbrett: Vises når skjermbredden er mellom 500px og 767px.
Mobil: Vises på smarttelefoner eller svært små vinduer.

Slik arves bildene:

Hvis du bare laster opp et "Standard"-bilde, brukes dette på alle enheter. Laster du opp både "Standard" og "Nettbrett", vil mobilen bruke bildet fra nettbrett-feltet. Vi anbefaler å laste opp egne mobilbilder med et stående format eller tettere utsnitt for best effekt.

Bildestørrelse og SEO-optimalisering

Store bildefiler er den vanligste årsaken til trege nettsider. Ved å tilpasse bildestørrelsen til enheten, forbedrer du både brukeropplevelsen og din rangering i Google (SEO).

Eksempel: Et bilde på 1200px bredde er unødvendig tungt å laste inn på en mobilskjerm som bare er 400px bred.

Slik tilpasser du størrelsen:

Last opp bildet ditt.
Klikk på Edit size.
Angi ønsket størrelse (f.eks. 400px for mobil).
Tips: Sett høyden til auto for å bevare proporsjonene, eller sett faste mål for å tvinge bildet inn i en bestemt form.

Tips!

Du kan laste opp helt ulike bilder på de ulike størrelsene, noe som er med på å skape en dynamisk nettside. F.eks kan bildet på mobil ha et annet utsnitt for å bedre matche mobile enheter.

Lazy Load (Smart innlasting)

Denne funksjonen bestemmer når et bilde skal hentes fra serveren.

PÅ (Anbefalt): Bruk dette på bilder som ligger lenger ned på siden. Bildet lastes først når kunden skroller ned til det. Dette gjør at selve siden åpner seg mye raskere.
AV: Bruk dette på bilder helt øverst (f.eks. hovedbanner). Disse bildene må være synlige umiddelbart når siden lastes.

Alternativ tekst (Alt-tekst)

Alt-tekst er en tekstlig beskrivelse av bildet som ligger skjult i koden. Dette er kritisk av to grunner:

Tilgjengelighet: Skjermlesere for synshemmede leser opp denne teksten slik at alle kan forstå innholdet. Dette er et lovpålagt krav om universell utforming.
SEO: Søkemotorer bruker alt-teksten til å "forstå" hva bildet viser. Gode beskrivelser gjør at produktene dine dukker opp i Google Bildesøk.

God alt-tekst: "Rød strikkegenser i ull til herre" Dårlig alt-tekst: "bilde123" eller "merke-navn"

[Image showing alt-text field in the design builder image settings]

Avanserte muligheter

Lenke: Du kan gjøre hele bildet klikkbart ved å legge inn en URL til en spesifikk kategori eller et produkt.
Tilpassede klasser: I avansert modus kan du gi bildet en egen CSS-klasse for å legge på unike effekter (som skygger eller animasjoner) via Tilpasset CSS.
- Lær mer om tilpasset CSS →