Slik redigerer du bilder til din hjemmeside

Slik redigerer du bilder til din hjemmeside
Lesetid: 3 minutter

Når vi har opplæring går vi alltid igjennom hvor viktig det er å redigere (få korrekte dimensjoner) og optimalisere (redusere størrelsen på bildet i kb eller mb) bilder før dem lastes opp på hjemmesiden. Hvis man ikke optimaliserer bilder risikerer man å få en tung og treg hjemmeside, samt at produktvisningen blir usymetrisk.

Hvis man f.eks driver en nettbutikk (eller har en portefølje) anbefaler vi at alle produktbilder (porteføljebilder) har nøyaktig samme størrelse. Da blir visning av produktene optimal. Spesielt når dem står ved siden av hverandre.

Du har helt sikkert hørt om Photoshop før. Hvis du ikke allerede har Photoshop kan du kjøpe det her for en drøy hundrelapp i måneden. Pakken som heter «Fotografering» som bl.a inneholder Adobe CC holder for de fleste og er det vi anbefaler.

La oss si den optimale størrelsen for dine produktbilder er 800px X 800px, men bildene du har fremskaffet er f.eks 1920px x 1080px.
Slik går du fram for å redigere dine bilder med Adobe Photoshop (Adobe CC) basert på nevnte kriterier:

1. Åpne Photoshop (Adobe CC)

Når programmet er åpnet går du på FIL --> NY. Da kommer du hit:

adobe-photoshop-1

Her velger du størrelsen på dokumentet. Bredden skal være 800px og høyden skal være 800px. Bakgrunnen kan godt være hvit. Trykk «OK».
Du har nå et helt hvitt bilde på 800px x 800px som skal se slik ut:

adobe-photoshop-2

2. Nå skal vi lime inn bilde av produktet

Trykk på FIL --> «Plasser…»

adobe-photoshop-3

Et nytt vindu dukker opp og du får nå muligheten til å navigere deg til lokasjonen du har lagret produktbildet ditt. Merk bildet og trykk «Plasser».
Slik som dette:

adobe-photoshop-4

Bildet er nå limt inn og det bør se slik ut på dokumentet ditt:

adobe-photoshop-5

Som du ser har ikke bildet samme dimensjoner som dokumentet. Du må nå «croppe» (tilpasse) bildet slik at det passer inn.
I hvert hjørne av bildet er det en liten firkant. Når du legger musepekeren over en av firkantet blir muse-markøren til to diagonale piler. Du kan nå dra i bildet.
PS! Hold SHIFT nede mens du drar i bildet. Da beholder du samme dimensjoner.
Når ferdig ser det slik ut:

adobe-photoshop-6

Trykk deretter knappen øverst til venstre, så «Plasser»:

adobe-photoshop-7

Bra! Du har nå fått korrekt størrelse på bildet.

Nå skal vi optimalisere bildet for web. Trykk på FIL --> «Save for web…».
Du vil få opp et nytt skjermbilde som ser slik ut:

adobe-photoshop-8

Først velger du kvaliteten på bildet (punkt 1). Vi anbefaler et sted mellom 50 og 70.
Punkt 2 viser størrelsen på bildet etter at du har valgt kvalitet. Et bilde på 800px x 800px bør ikke være større enn 200kb.

Trykk «Lagre…» (punkt 3) og velg hvor du vil lagre filen.

Gratulerer! Du har nå redigert og optimalisert produktbildet ditt og kan trygt laste det opp på din hjemmeside.