Optimaliser bildefiler for bruk på hjemmesiden din.

Kanskje er dette tiden da du kan sette deg ned og lage en hjemmeside for å vise fram alle de flotte bildene dine. Kanskje har du allerede en hjemmeside som ikke fungerer helt optimalt, eller som aldri blir besøkt.
Vi ba Jan Thomas Pettersen dele noen tips om hvordan du optimaliserer bildefiler som skal legges på hjemmesiden og hvordan dette kan gjøre underverker for siden din:

«På et klubbmøte i høst hadde jeg et foredrag om hvordan man enklest mulig kan sette opp en egen hjemmeside. I foredraget snakket jeg primært om to forskjellige plattformer, WordPress og Square Space. Dette er to løsninger jeg fortsatt anbefaler for å lage en nettside. Square Space er den aller enkleste, mens WordPress krever litt mer teknisk innsikt.

Hvordan du behandler bildene før de legges ut på nettet er uavhengig av valg av plattform for nettsiden. Det er viktig å forstå forskjellen på hvordan bilder brukes på nettet i motsetning til når de skal printes. Når du printer bilder er det veldig viktig å ha mest mulig informasjon i printfilen. Det kan gi veldig store og tunge filer, men det er ikke noe som merkes på det ferdige resultatet. Blekk på papiret veier ikke mer om filen er tyngre. På Internett derimot, er det veldig viktig å optimalisere alt som skal legges ut. Google, som er den største søkemotoren og dermed også de-facto portvakten til alt innhold på nettet, belønner nettsider som har optimalisert innholdet sitt. Belønningen kommer i form av å komme høyere opp i søk, og å være mer relevant. Det betyr at om du lager en hjemmeside med store tunge bildefiler, som ikke er optimalisert for å bruke på nettet, blir du straffet med å ikke dukke opp i søk.

Så, hva betyr å optimalisere bildefiler? Det kan deles inn i to kategorier. Pixelstørrelse, og Kilobyte-“vekt”.

Pixler: Alt som vises på en skjerm, er pixler. Men forskjellige skjermer kan ha forskjellige oppløsninger (Antall pixler tilgjengelig). Dataskjermer i dag har i snitt mellom 1366×768 pixler og opp til 2560×1440 pixler. Det finnes lavere, og det finnes mye høyere. Men de er ikke så vanlige. Så å si alle moderne kameraer kan ta bilder med mange flere pixler enn det er mulig og vise på en skjerm. (Det er grunnen til at et bilde som vises i sin helhet på skjerm, som regel er zoomet ut, 25%, 40% 60% osv.) Noe som igjen betyr at et bilde, rett ut av kamera, har mye mer data enn hva som er nødvendig for å vises på internett. Og husk hva Google synes om det. 

Det første steget for å optimalisere et bilde for skjerm er å skalere det ned. Her er det litt opp til deg å finne balansen mellom hvor stort bilde du vil vise på din nettside, og om du vil begrense den mulige bruken av bildet ved å gjøre det så lite at det ikke kan printes pent. Personlig vektlegger jeg at et bilde skal sees så fint som mulig på skjerm, og velger å tro at bildet ikke blir misbrukt. Selv skalerer jeg bilder ned til mellom 2000 og 2500 pixler i bredden. 

 

Det tallet har jeg valgt utfra, som forklart over, at de største skjermene har rundt 2500 pixler i bredden. Det betyr igjen at bildet mitt vil bli vist 1:1 på en slik skjerm. Skarpt og fint! Mindre skjermer, vil skalere bilde ned, og de vil se det bra også. Det man vil unngå, er at et bilde blir skalert opp. Det kan gjøre at bilder oppleves uskarpe og får dempet fargekontrast.

For bilder i stående format, så skalerer jeg bare til 1500 pixler i bredden. Dette er for å få med så mye som mulig av bildet inn i høyden, da de fleste dataskjermer har breddeformat. Det finnes ingen faste regler her, bortsett fra at du bør skalere ned fra originalfilen, og så finne hva du synes ser pent ut på din hjemmeside.

Jeg bruker enten Adobe Photoshop, eller Adobe Lightroom for å skalere bildet ned. I Photoshop gjør du det via «Image size/Bilde størrelse». I Lightroom gjør du det når du eksporterer og velger å skalere bildet til ønsket størrelse. Har du ingen av disse, så kan du bruke denne nettsiden: https://www.reduceimages.com/ Det finnes en hel del lignende nettsider der ute. Søk og test den du liker best. Men det beste er å ha et verktøy som Photoshop eller lignende på din datamaskin.


Da har vi optimalisert størrelsen. Nå må vi håndtere “vekten”. Akkurat som i et foto negativ, så er det et avvik mellom potensialet i et bilde, og hva et menneskelig øye kan oppfatte. Dette har data-ingeniører benyttet seg av for å kunne minske “vekten” på en bildefil ved å fjerne data som uansett ikke kan sees av oss. Og på den måten gjøre filer lette og enklere å overføre via internett. Måten man optimaliserer “vekten” på et bilde er å komprimere det når man lagrer/eksporterer. Det gjør man ved å velge filformat JPG eller PNG for foto. (Det finnes flere bildeformater, men de brukes ikke så mye. Det er bl.a. et nytt format på vei, HEIF, som kan bli relevant. Men vi er ikke helt der enda.)


Her starter også prosessen enten i Photoshop eller Lightroom. Eksporter bildene dine ut som vanlig fra Photoshop/Lightroom. Bruk gjerne JPG innstillinger mellom 70 og 90. For PNG, bruk 24bit valget. Ideelt hadde dette vært alt man trengte å gjøre. Disse verktøyene har dessverre blitt litt forbigått av mer spesialiserte løsninger for å virkelig optimalisere “vekten” på bildefiler. Så derfor vil jeg anbefale alle å bruke et steg nr 2 for å virkelig optimalisere «vekten»: Nettsiden
https://tinypng.com/

JPGene eller PNGene du eksporterte, drar du over i Tinypng og lar den nettsiden kjøre sin optimalisering på dem igjen. Gratisversjonen av denne nettsiden tar bare 20 bilder av gangen.

Det du da har igjen er et foto som er mellom 1500 og 2500 pixler bredt, og “veier” så lite som det kan uten nevneverdig (oppfattet) tap av kvalitet. Google vil takke deg for at du gjorde en god jobb med å holde internett lett og ledig for oss alle. I tillegg vil de som kommer innom galleriet ditt ha en smidig og kjapp opplevelse.

Unntak: Ja, det finnes unntak. Det kan være situasjoner hvor du vil laste opp mye større bilder. For eksempel når du ønsker at folk skal zoome inn og se skarpe fine detaljer. Eller det kan være andre grunner. Du kan fortsatt følge guiden, bare øk pixel størrelsen. Det er fremdeles viktig å optimalisere “vekten”.

Lykke til!»