Hvordan behandle bilder for bruk på nett og sosiale medier

Bruk av for store bilder på nett er dyrt og tar lengre tid å laste inn, samtidig så har de fleste platformer begrensninger på filstørrelse og noen ganger veldig spesifikke krav.

Derfor er det greit å behandle eller komprimere bildene dine til formålet det skal brukes til - her er en oversikt over verktøy og annen nyttig informasjon.

‍

Velg riktig filformat

• JPEG – Best for fotografier og bilder med mange farger. Gir en god balanse mellom kvalitet og filstørrelse.
• WEBP – Et moderne format som gir god kvalitet med lav filstørrelse, ideelt for nettsider.
• AVIF – Et nyere format som gir enda bedre komprimering enn WEBP, men kommer på bekostning av å være mer krevende å laste inn og er ikke like godt støttet ennå.

‍

I de fleste tilfeller vil jeg anbefale å bruke WebP på nettsider og i sosiale media, da det er både mindre enn JPEG, støtter gjennomsiktighet og ofte ser likt eller bedre ut. I de tilfellene WebP ikke støttes, funker JPEG også.

Hvis kvalitet er en høy prioritet, for eksempel til en bildeportefølje, så støtter WebP også lossless komprimering, samtidig som det blir en del mindre enn lossless PNG. (Lossless refererer her til komprimering uten tap av data).

Blant annet Facebook, Instagram og Linkedin støtter WebP - men hvis du publiserer innlegg gjennom Meta Business Suite, så støttes ikke WebP.

‍

Komprimering av bilder

Bilder med høy oppløsning kan føre til lange lastetider. Komprimering reduserer filstørrelsen, ofte uten merkbart tap av kvalitet. Noen gode verktøy for dette er:

‍

TinyPNG

Lar deg komprimere bilder i bulk, til jpg, webp, osv.

‍

Squoosh

Verktøyet jeg liker mest å bruke. Lar deg sammenligne før-etter, og spesifisere veldig godt hvordan bildet skal behandles. Behandlingen skjer lokalt på din maskin, så du slipper å laste bilde opp på nett.
‍
Verktøyet lar deg også endre størrelse på bildet - sånn at du slipper å laste opp bildet i 4K når det ikke trenger å være så stort.

‍

‍

‍

‍

XnConvert

I de tilfellene man har hundredevis av bilder som skal behandles, gjerne på lik måte - så liker jeg et mer avansert verktøy kalt XnConvert.

I programmet kan man predefinere alle innstillingene, og kjøre gjennom alle bildene i samme slengen. Her er en kort bruksanvisning:

• Legg til bilder ved å dra og slippe filene inn i programmet, velg bilder gjennom "add files" eller en mappe gjennom "add folder".
• Gå til "Actions"-fanen for å legge til ekstra behandlinger som:
  • Endre størrelse – Juster bildets bredde/høyde proporsjonalt.
  • Beskjæring – Fjern uønskede deler av bildet.
  • Fargejustering – Endre kontrast, lysstyrke og fargetoner.
  • Vannmerking – Legg til en logo eller tekst for å beskytte innholdet ditt.

• Gå til "Output"-fanen og velg ønsket format, for eksempel JPEG, PNG eller WEBP.

• Juster kvalitet og komprimering ved å endre kvalitetsskyveren eller bruke forhåndsinnstillinger.
• Klikk "Convert" for å behandle bildene, og de lagres i den valgte mappen.

‍

Ekstra: problemer med feil rotasjon av bilder fra iPhone

Når du tar bilder med en iPhone, lagres rotasjonsinformasjonen i EXIF-metadataen i stedet for å endre selve pikslene i bildet.
Dette kan føre til at bilder ser riktige ut på Apple-enheter, men vises sidelengs eller opp-ned på enkelte nettsider og sosiale medier.

‍

Slik fikser du feil rotasjon med XnConvert

Du kan bruke XnConvert til å automatisk korrigere rotasjonen i bildene dine.

• Gå til "Actions"-fanen og klikk "Add action".
• Velg "Image" → "Rotate" → "EXIF Orientation".

• Gå til "Output"-fanen og velg ønsket format (JPEG, PNG, WEBP, etc.).
• Klikk "Convert" for å lagre de korrigerte bildene.

Dette kan gjøres mens man kjører gjennom alle de andre behandlingene, så slipper man å tenke på det i fremtiden.

‍

Endre størrelse og beskjæring

Mange nettsider og sosiale medier har maksimum størrelser eller spesifikke krav til bildestørrelser og bildeforhold(aspect ratio). For at bildene skal se profesjonelle ut og vises optimalt på ulike plattformer, må de ofte ha riktig størrelse, beskjæring og bildeforhold.

Jeg anbefaler Squoosh for enkelte bilder eller Xnconvert for bulk - dog hvis du har egne programmer for bilderedigering, så er det enda bedre! Her kan man bruke program som Figma, Canva, Adobe Lightroom/Photoshop, Affinity Photo, Paint, GIMP, osv..

‍

Bildestørrelse

Når du laster opp bilder på nettet, bør de være optimalisert for både visuell kvalitet og lastetid. Et bilde som er for stort kan gjøre en nettside treg, mens et bilde som er for lite kan bli pikselert og uklart. Som regel vil stedet du laster bildene opp på behandle bildene automatisk for deg, men det er ikke alltid resultatet blir like bra.

Relevante bildestørrelser for sosiale medier:

‍

Bildeforhold

Bildeforhold(aspect ratio) beskriver forholdet mellom bredden og høyden på et bilde. For eksempel betyr 16:9 at bredden er 16 enheter og høyden er 9 enheter.

Som regel kommer du deg unna med med å tilpasse bildene du bruker til å fungere i flere roller. F.eks. et bilde med forholdet 1:1 og fokusobjektet i midten av bildet samt. bruk av sikkerhetsmargin(luft rundt objektet), kan brukes til det meste selv om det blir automatisk croppet på ulike plasseringer.

Vanlige bildeforhold:

• 1:1 (kvadratisk) – kan brukes på de fleste plasser, facebook feeden er ofte i 1:1. Profilbilder og ansattebilder er ofte gode i 1:1.
• 3:2 (fotografi) - ofte brukt som standard i fotografi og vanlig til bruk på nettsider. Gir et balasert utseende kombinert med tekstinnhold.
• 4:5 (portrettformat) – brukes også i facebook og instagram feeden.
• 16:9 (landskap) – Standard for videoer og bredskjermbilder, passer ofte som øverste bilde på forsider og i artikler.
• 9:16 (vertikalt format) – Ideelt for korte videoer som vises på mobil - Stories, Reels og TikTok. Passer også godt til portrettbilder og ansattebilder.

‍

Kort fortalt

Kort fortalt, så vil du dekke de fleste tilfeller ved å bruke WebP, tilpasse bilder til 1:1 bildeforhold, redusere størrelse ned til 2000x2000 hvis bildet er stort, og sørge for at objektet eller personen er sentrert i bildet med litt luft rundt.