Hopp til innhold

Image

Bildekomponenten viser et bilde i riktig oppløsning ut fra størrelsen det vises i på skjermen, og kan vise en lavoppløselig forhåndsvisning under innlasting av store bilder.

For å se effekten ordentlig, skru ned hastigheten i nettverksloggen din. For å se effekten på nytt, tøm cachen, still inn komponenten og trykk på last bilde.

Bruk

Forhåndsvisningen, eller thumbnail, vil vises uskarpt først, og animeres til et skarpt fullstørrelse bilde når det er lastet ferdig.

For å få mest ut av denne komponenten må du sende inn et srcSet, altså en liste over bilder i forskjellig oppløsning sammen med informasjon om bildenes bredde. Dette brukes av nettleseren for å laste ned riktig bilde i forhold til størrelse og skjermoppløsning. Du kan generere dette automatisk, f.eks. ved hjelp av responsive-loader for Webpack, eller sette det sammen manuelt.

Det er også mulig å sende inn kun ett enkelt bilde som kilde. I så fall lastes bildet inn på vanlig måte, uten forhåndsvisning.

Retningslinjer for bildestørrelser

Det er viktig at forhåndsvisningen er betydelig mindre enn fullstørrelse. Poenget med å gi en bedre forhåndsvisning på trege forbindelser faller helt bort om brukeren også må vente på å laste ned forhåndsvisningen! Det er forventet at forhåndsvisningen er så liten at det er umulig å se detaljer.

Forhåndsvisning

Forhåndsvisningen bør ikke være mer enn ca. 50 piksler bred, og ikke mer enn 2-5 kB i filstørrelse.

Responsive bildestørrelser

Den laveste opppløsningen bør fungere fint på mobiltelefoner uten å være for stor. 400 piksler er en god minstestørrelse. Den største oppløsningen bør være det dobbelte av den største bredden bildet kan ha, for å imøtekomme skjermer med retina-oppløsning. Du trenger imidlertid ikke lage bilder med noe særlig mer enn 1920px bredde, ellers blir filstørrelsen for veldig stor!

Filformater

Bruk gjerne moderne bildeformater som WebP! Disse tar gjerne mindre plass for tilsvarende størrelse enn tradisjonelle formater som jpg, og støttes av alle nettlesere vi har støtte for i Jøkul. Ikke bruk png for fotografier, kun for grafiske fremstillinger.

Når bruker vi bildekomponenten?

Dette er ment som et hjelpeverktøy hovedsakelig til dekorative bilder. Det er ikke meningen at vi skal animere inn ikoner på denne måten, for eksempel.

Dersom utvikleren allerede har liknende hjelpemidler, for eksempel i Gatsby, trenger de ikke bruke denne komponenten.

React API

Her finner du en oversikt over props på komponentene i pakken.