Å være nøye med opplasting av bilder til nettsiden er viktigere enn de fleste tror. Vi har derfor valgt å samle våre beste tips til hva du bør tenke på når du skal laste opp et bilde.
En av synderne som forårsaker trege nettsider og unødvendig høye kostnader tilknyttet webhotellet ditt er bilder. Synes du nettsiden din er treg og den består av masse bilder, da bør man se på hvor store bildefilene er. Det går fint ann å kombinere god bildekvalitet og mindre filstørrelse.
Den andre store synderen er at man ikke endrer navnet på bildene eller fyller inn metadataene som er helt avgjørende for god SEO og brukeropplevelse.
Dette bør du tenke på ved opplasting av bilder til nettsiden:
Søkemotorer som Google innhenter informasjon fra blant annet navnet på et bilde for å avgjøre bildets relevans. Dette er en av de tingene som vil gi et hint om hva bildet handler om, for å kunne tilby deg relevante søkeresultater ut i fra dine søkekriterier.
Navngi derfor bildene dine strategisk ved å bruke nøkkelord som er relevante for bildets innhold. Et bilde av et par Nike Air max joggesko vil få vesentlig bedre resultater dersom det for eksempel heter “Nike-Air-max-joggesko.jpeg” fremfor “IMG0000324.jpeg”.
Tips: Bindestrek mellom ordene fungerer bedre, da søkemotorer tolker bindestrek som delende og understrek som bindende.
Alt-tekst er en tekst som beskriver bildet: hva er det bilde av og hva slags type bilde er det (foto, illustrasjon, graf osv.). Dette er den teksten som synes dersom bildet ikke kan lastes, i tillegg til å være den teksten som leses av skjermlesere for svaksynte og blinde. Alt-tekst er også et krav i henhold til loven om universell utforming.
En alt-tekst bør inneholde sidens søkeord, men må være beskrivende ovenfor hva bildet er (unngå å ramse opp masse søkeord). Bruk korte beskrivelser, vær konsekvent i skrivemåten og begynn alltid med det viktigste først – hvor du gjerne avslutter med om det er et foto, illustrasjon eller graf.
Alle bilder skal ha en alt-attributt, men dersom bildet kun er ment for å være dekorativ skal det ikke legges inn noen verdi. Dette fordi det ikke gir noen mening å forklare hva disse bildene er. Bilder som er en link skal ha en alt-tekst som beskriver hvor linken peker (ikke bildet i seg selv).
Bildetekst kan være en mer utfyllende beskrivelse av bildet, og brukes der det er naturlig. Denne beskrivelsen er ikke avgjørende for søkemotoroptimalisering, men kan være en fin indikator for brukerne av nettsiden. Brukerne ser ofte på bildene og bildeteksten før de leser resten av innholdet.
Når du skal lagre et bilde er det viktig å tenke på både oppløsning, bildeformat og filstørrelse. Med riktig kombinasjon av disse vil du oppnå bilder i høy kvalitet, en raskere lastetid på nettsiden og mindre bruk av lagringsplass på webhotellet.
Når det kommer til oppløsning, snakker vi om hvor mange piksler det er i et bilde. Her er det stor forskjell på hvor høy oppløsning man bruker til trykk og på skjerm (digitale flater). Et bilde optimalisert for skjerm vil ikke fungere i trykk, da trykk ofte krever bilder i høyere oppløsning enn på skjerm. Det som uansett teller mest, er hvor mange piksler bildet skal være i bredden og høyden.
Det finnes ingen fasit på hvilken oppløsning du bør bruke, da dette varierer fra nettside til nettside og hvordan bildet skal brukes på nettsiden. Uansett vil det å laste opp bilder i for høy oppløsning medføre til at nettsiden laster tregere og tar mye av lagringskapasiteten på webhotellet ditt. Samtidig er det viktig å tenke på at bilder med for lav oppløsning igjen kan oppleves som “kornete” og skjemmende.
De to mest brukte bildeformatene på en nettside er JPEG og PNG. Disse er godt egnet for web, er enklere å komprimere og tar lite plass på nettsiden. Et annet format som er verdt å nevne er WeBP, et moderne og enda lettere bildeformat som kun blir brukt på web.
Når man ønsker gjennomsiktig (transparent) bakgrunn eller bildet er designet digitalt (f.eks. logoer, grafer og illustrasjoner) kan man bruke PNG. PNG har høyere kvalitet enn JPEG, men filstørrelsen er også større. Bruker man PNG bør man derfor justere ned oppløsningen, slik at bildet har mindre piksler i bredden og høyden.
Vi har tidligere snakket om oppløsning, og at bilder med høyere oppløsning vil ha bedre kvalitet. Samtidig vil for høy oppløsning på bildene resultere i at nettsiden laster tregere og reduserer lagringskapasiteten på webhotellet. Årsaken til dette er at jo høyere oppløsning et bilde har, desto høyere blir filstørrelsen. Det samme gjelder hvilket bildeformat bildet lagres i: PNG gir større filer fremfor JPEG eller WeBP.
Så hvordan kan vi beholde bildekvaliteten uten at det går på bekostning av lastetid? – Ved å komprimere det! Kombinasjonen av å velge riktig oppløsning, bildeformat og filstørrelse gir som sagt den beste opplevelsen på nettsiden din.
Ved å bruke verktøy for å komprimere bildene før de lastes opp på nettsiden, vil du få bilder i mindre filstørrelse og samtidig beholde kvaliteten. Det finnes mange nettsider som lar deg redusere størrelsen på et bilde uten at du trenger å laste ned noe, og vår favoritt er TinyPNG:
TinyPNG er den mest vanlige nettsiden for å komprimere bilder, i tillegg til å være det letteste alternativet når du leter etter et enkelt og gratis verktøy. Her er det bare å laste opp bildene dine (en etter en eller flere samtidig) og de gjør jobben med å redusere størrelsen på bildet automatisk. Deretter er det bare å laste ned bildene og laste de opp på nettsiden.
Med TinyPNG kan du komprimere opptil 20 bilder samtidig og det er kompatibelt med både WeBP, PNG- og JPEG-formater.
TinyPNG bruker intelligent komprimering for å redusere antall farger som brukes på bildet. Ved å redusere antall farger i bildet, kreves det også færre “bytes”. Effekten er nesten usynlig, men den utgjør som du ser på bildet, en veldig stor forskjell i filstørrelse.
Viktig å tenke på: Bilder med flere farger vil være vanskeligere å komprimere. F.eks. vil et bilde med mye sort i seg alltid ha høyere filstørrelse enn et bilde med hvit bakgrunn.
