Bilder på web: dette må du vite om kvalitet og formater

Bilder spiller en vesentlig rolle for å få en webside til å se bra ut. Som designer får jeg ofte spørsmål om bruk av bilder. Her får du mine tips for å velge det riktig filformat, bestemme fysisk størrelse på bildet, vurdere størrelsesforholdet i bildet og størrelse på bildefilen.

Filformat

JPEG og png er tradisjonelt de mest vanlige filformatene for bilder på web. Png støtter gjennomsiktig bakgrunn, mens JPEG gir hvit bakgrunn som default. Om du lagrer bilder fra en webside, kan du også komme over filformatene SVG og Webp.

SVG støtter vektoriserte filer, som typisk er elementer laget i Illustrator, og som kan skaleres uten tap av kvalitet. Dette formatet benyttes gjerne til logoer og ikoner. Når jeg er på jakt etter en logo på nett for en kunde, blir jeg alltid glad for å finne en SVG-fil. Da vet jeg at jeg kan enkelt skalere den til ønsket format, og til og med ta bort elementer fra den hvis det er behov for en annen variant.

Webp er et nyere bildeformat, utviklet av Google som en erstatning for JPEG og PNG for å minimere bildestørrelsen. Bilder i dette filformatet kan ikke åpnes i Photoshop, og bilder i Photoshop kan ikke lagres som Webp, og må derfor gjennom et konverteringsverktøy som for eksempel Cloudconvert.

Det finnes også flere bildeformater enn de jeg har nevnt her, men jeg anbefaler JPEG som generelt filformat for bilder, og PNG der du ønsker gjennomsiktig bakgrunn i et bilde (for eksempel en logo).

Les også: Dette bør alle markedsførere kunne i Photoshop

Fysisk størrelse på bildet

Den fysiske størrelsen på bildet, altså hvor mange piksler det bør ha, kommer an på hvor stort det skal være i bruk. I våre blogginnlegg skal bildene som benyttes aldri være større enn 930px brede. Hvis jeg bruker et bilde som er 2000px bredt, vil det tilpasses den tilgjengelige plassen, men fila vil bli unødvendig tung uten at vi får utbytte av de ekstra pikslene.

Du kan sjekke hvor stort et bilde faktisk er ved å høyreklikke på det i nettleseren din og velge «inspiser». Hold musepekeren over den markerte koden i inspiserings-verktøyet, og du vil få opp en boks med tall på faktisk størrelse. Merk: prøv også å skalere bredden på nettleservinduet ved å dra den smalere, for å sjekke om bildet benyttes i en større bredde på smalere skjermer.

Det varierer hvordan bilder er programmert til å fungere, men et generelt tips er å se på et bilde som allerede ligger inne. Det gjør du ved å høyreklikke på bildet og velge «åpne i ny fane». Sjekk i url-feltet om det ligger noe tekst der som dreier seg om høyde og bredde, og prøv å fjerne denne, slik at url’en ender på feks .JPEG. Lagre og åpne fila i utforskeren, sjekk egenskaper og detaljer og dimensjoner, så ser du størrelsen.

Les også: Hvordan velge bilde til ditt neste blogginnlegg

Størrelsesforholdet i bildet

Størrelsesforholdet i et bilde vil si forholdet mellom høyde og bredde. 16:9 og 4:3 er ofte brukte størrelsesforhold for å beskrive om et bilde skal være widescreen eller mer klassisk rektangel-format. Det viktigste å tenke på rundt dette, er at høyden på bilder som skal stå ved siden av hverandre er lik, altså at bildene har det samme størrelsesforholdet.

Jeg anbefaler også bruk av samme størrelsesforhold til bilder på brukes på samme sted, som for eksempel i toppen av et blogginnlegg, slik at layouten blir gjennomført.

Les også: Alt-tekst: hvorfor det er viktig og tips til hvordan det bør gjøres 

Størrelse på bildefilen

Hvor stor/tung bildefilen er har påvirkning på lastetiden til siden. Tilbake til eksemplet mitt fra tidligere, vil bildet med 2000px bredde i toppen av denne bloggposten være tyngre enn nødvendig, og gjøre at siden bruker lengre tid på å laste.

Sørg for at bildet ikke har en større fysisk størrelse enn nødvendig, og deretter kan du komprimere bildefila, for eksempel gjennom TinyPng.

Les også: 5 designprinsipper markedsførere bør kunne

Oppsummering

Bruk JPEG som filformat for bilder på web, og PNG der du ønsker gjennomsiktig bakgrunn i et bilde. Prøv å finne ut hvilken størrelse bildet skal ha i bruk, og sørg for minst mulig størrelse på fila.