Bilde

Denne guiden forklarer hvordan innstillinger for bilder fungerer samt anbefalt bruk for å optimalisere nettbutikken.

For noen blokker kan bilde fungere som et bakgrunnsbilde, mens det for andre viser bilde på vanlig måte, for eksempel om man lager en banner.

Bilder på ulike enheter

Det er mulig å laste opp 3 ulike bilder for 3 ulike enheter:

Standard
Bildet som er lastet opp under “Standard” vil være hovedbildet. Dette vises på skrivebord (PC, Mac).

Nettbrett
Bildet som lastes opp under “Nettbrett” vil kun vises når nettleseren som brukes har en størrelse som tilsvarer nettbrett.

Mobil
Bildet som lastes opp under “Mobil” vises kun når man besøker nettbutikken gjennom en mobil enhet, eller om man har et så lite nettleservindu at oppløsningen tilsvarer en mobil enhet.

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.

Gjenbruke samme bilde

Om man velger å kun laste opp bilde under “Standard” vil både nettbrett og mobil bruke samme bilde.
Om man velger å laste opp både “Standard” og “Nettbrett” vil det være bildet under “Nettbrett” som brukes på mobil oppløsning.

Hver oppløsning arver altså bildet fra oppløsningen som er på nivå over.

Bildestørrelser

For å forbedre lastetid på nettsiden, og igjen forbedre SEO, anbefales det å tilpasse størrelsen på de ulike bildene.

Eksempel:
Du laster opp et bilde til mobil som opprinnelig er 1200px bredt. Når man da laster inn nettsiden på mobil vil man måtte laste inn hele bildet på 1200px, selv om oppløsningen på mobil bare er 400px.

Det er derfor anbefalt å endre størrelsen til å bedre passe med enheten, slik at man reduserer størrelsen som må lastes inn.

Slik gjør du:

1. Last opp bildet du vil bruke

2. Klikk “Edit size”

3. Legg inn ønsket størrelse, avslutt med pixel. Eksempel: 400px

Om du bare ønsker å endre f.eks bredde kan høyde settes til auto slik at proporsjonene beholdes.

Lazy load

Innstillingen sørger for at bilder ikke lastes inn før seksjonen vises for besøkende.

For eksempel, om bildet er en banner langt ned på nettsiden burde lazy load være aktiv slik at den første innlastingen er raskere og bildet først hentes nå besøkende ruller ned.

Om seksjonen og blokken med bildet er plassert helt i toppen anbefales det å ha denne innstillingen avslått slik at bildet lastes når siden lastes.

Lenke

Legg inn lenke om du ønsker at klikk på bildet skal føre til en spesifikk side.

Alternativ tekst

Alternativ tekst, eller «alt-tekst», er en tekstbeskrivelse som legges til bilder på nettsider, i dokumenter og i sosiale medier. Det er flere viktige grunner til at man bør bruke alternativ tekst på bilder:

• Tilgjengelighet:

  • For personer med synshemminger eller som bruker skjermlesere, er alt-tekst avgjørende for å forstå innholdet i bildene. Skjermleseren leser opp alt-teksten, slik at brukeren får en forståelse av hva bildet viser.

  • Dette bidrar til at nettsider og digitalt innhold blir mer tilgjengelig for alle.

• SEO (søkemotoroptimalisering):

  • Søkemotorer kan ikke «se» bilder på samme måte som mennesker. De bruker alt-teksten for å forstå hva bildene inneholder.

  • Ved å bruke relevante nøkkelord i alt-teksten, kan du bidra til at bildene dine blir funnet i søkeresultater, spesielt i bildesøk.

  • Det vil si at man bruker alt-tekst for å gjøre bildene søkbare.

• Feil og manglende bilder:

  • Hvis et bilde ikke vises på grunn av en feil eller treg internettforbindelse, vil alt-teksten vises i stedet. Dette gir brukeren en indikasjon på hva bildet skulle vise.

• Universell utforming:

  • I Norge er det lovpålagt med universell utforming av IKT. Dette innebærer at digitale løsninger skal være tilgjengelige for alle, uavhengig av funksjonsevne. Dette er en av grunnene til at alt-tekst er så viktig.

Avanserte innstillinger

Med tilpassede klasser kan du gi blokken en egen CSS-klasse. Denne kan man så benytte i tilpasset CSS for å skrive egen kode som endrer utseende.

Relaterte artikler:

• Tilpasset CSS