Bildeformat på din nettside
Vi får ofte en del spørsmål rundt bilder og bildeformat, spesielt når det kommer til Slideshow på nettsider vi utvikler.
Årsaken er rett og slett at nettsidene er responsive.
Problemet folk opplever er at bilder kuttes på mindre skjermer, eller at bilder de selv laster opp kuttes i høyden.
Årsaken til at bildene kuttes er egentlig rimelig enkel, og dette skal vi se nærmere på i denne artikkelen.
Først må vi forklare et par begrep:
Canvas
Canvas er et engelsk ord, og betyr lerret på norsk.
Dette er hovedsaklig området du har å jobbe på, når det kommer til digitale bilder.
Canvas defineres av piksler i bredden og i høyden.
Eksempel: 1920 x 1080 px = 1920 piksler i bredden, og 1080 piksler i høyden.
Piksler
Alle skjermer har et satt antall med piksler.
Eksempelvis har en full-HD skjerm 1920 piksler i bredden, og 1080 piksler i høyden.
Hver individuelle piksel er rett og slett bare lyspunkter i skjermen, som gjengir en farge.
På lavoppløste skjermer, kan du faktisk se pikslene dersom du er nær nok.
Ratio
Ratio (eller forhold på Norsk), er bredde og høydeforholdet til bildet, eller en skjerm for all del.
Dersom et bilde har 1920×1080 piksler, er forholdet 16:9.
Et bilde med 1920×1200 piksler, har et forhold på 16:10.
Litt om responsive nettsider
Responsive nettsider tilpasser bredden sin i henhold til skjermbredden.
Dersom du krymper nettleservinduet, mens du sitter inne på våre nettsider, vil du se at nettsiden gjør om på formatet og innholdet for å tilpasse seg nettleservindet.
Dette gjør det like enkelt for mobile brukere å bruke nettsiden, som for de som sitter på en PC.
Definisjon på responsiv nettside her
Canvas, bildeformat, og forhold
Som nevnt tidligere i artikkelen, har canvas normalt sett en satt størrelse.
I responsive nettsider er ikke dette alltid tilfellet.
Når skjermbredden endrer seg, vil også forholdet til canvas endre seg.
For eksempel kan bredden endre seg fra 1920px til 1200px, som gjør at forholdet endrer seg fra 16:9 til 10:9.
Et bilde som da er 16:9 vil havne utenfor canvas, noe som vil føre til at bildet blir kuttet.
Under ser du et eksempel på hva som skjer om du forsøker å sette et bilde med forholdene 4:3, i en canvas som har forholdene 3:4.
Hvordan kan vi løse dette?
De fleste skulle vel ønske at man kunne fylle ut hele canvasen, uten å måtte kutte bildet.
Dette er praktisk talt umulig med responsive nettsider, siden canvas alltid endrer seg etter skjermstørrelsen.
Den beste løsningen er dersom bildet sentreres i canvas, slik at bildet potensielt blir kuttet i sidene, topp og bunn.
En annen løsning kan være å alltid få hele bildet innenfor canvas, men dette vil føre til at deler av canvasen alltid er tom.
En siste ting
Bildeformat og hvordan nettsiden din blir mer responsiv er flotte ting å bli mer bevisst på.
Vi opplever ofte at folk stiller spørmål om det samme gjelder for font, farger, og stil på nettsiden deres.
Nytting informasjon og svar finner du her