Slik bruker du moderne bildeformater på nett uten å ødelegge kvaliteten

Bilder er ofte det som veier mest på en nettside, både bokstavelig og teknisk. Feil valg av format kan gjøre at siden føles treg, spesielt på mobil og dårlig nett.

Moderne bildeformater som WebP og AVIF kan redusere filstørrelsen betydelig, men mange er usikre på hva de egentlig bør bruke i hverdagen. Her får du en konkret gjennomgang som hjelper deg å ta gode valg uten å gjøre alt for avansert.

Hvorfor bildeformat har så mye å si

Hver gang en bruker åpner en side må alle bildene lastes ned. Har du mange store filer, vil det merkes på både lastetid og dataforbruk. Dette påvirker ikke bare opplevelsen, men kan også ha betydning for rangering i søk.

Samtidig ønsker du ikke at bildene skal se kornete ut eller få rare farger. Nøkkelen er å finne riktig balanse mellom kvalitet og filstørrelse, og her spiller formatet en stor rolle.

De vanligste bildeformatene på web

JPEGbrukes ofte til fotografier og bilder med mange detaljer. Det gir liten filstørrelse, men kan få synlige komprimeringsartefakter hvis du komprimerer for hardt.

PNGegner seg godt til grafikk, logoer og ikoner, spesielt hvis du trenger gjennomsiktighet. Ulempen er at filene ofte blir betydelig større enn JPEG.

SVGer vektorbasert og passer perfekt til logoer, ikoner og enkle illustrasjoner. Fordelen er at det skalerer skarpt i alle størrelser, og filstørrelsen kan være svært liten.

GIFbrukes mest til enkle animasjoner, men er sjelden et godt valg for vanlig grafikk eller foto, siden fargebegrensningen gir dårlig kvalitet og ofte større filer enn nødvendig.

Hva er WebP og AVIF, egentlig

WebPer et bildeformat utviklet for nett, som typisk gir mindre filer enn JPEG og PNG ved samme opplevde kvalitet. Det støttes nå av de fleste moderne nettlesere.

AVIFkan komprimere enda mer effektivt enn WebP og gir ofte svært små filer med god kvalitet. Støtten i nettlesere er blitt bedre, men kan fortsatt variere noe, spesielt på eldre enheter.

Begge formatene kan brukes for både fotografier og grafikk, og de støtter gjennomsiktighet. Det gjør at du i mange situasjoner kan erstatte både JPEG og PNG.

Hvilket format bør du velge til hva

Som hovedregel kan du tenke slik: foto, produktbilder og store hero-bilder kan med fordel eksporteres til WebP eller AVIF, med JPEG som reserveformat der det trengs.

Logoer og ikoner passer ofte best som SVG, spesielt hvis de er rene vektorfiler. Da får du skarpe kanter uansett skjermstørrelse, og du kan endre farge i CSS.

En mulig tilnærming er å bruke AVIF der nettleserstøtten er god nok, WebP som nest beste alternativ og JPEG eller PNG som siste fallbakke. Da dekker du både nye og gamle nettlesere uten å ofre kvalitet.

Slik bruker du <picture> for å støtte flere formater

HTML-elementet<picture>lar deg tilby flere versjoner av samme bilde, og nettleseren velger selv det beste alternativet den støtter. Et enkelt eksempel kan se slik ut:

<picture>
<source srcset=”bilde.avif” type=”image/avif”>
<source srcset=”bilde.webp” type=”image/webp”>
<img src=”bilde.jpg” alt=”Beskrivende alternativtekst”>
</picture>

I dette eksemplet vil moderne nettlesere bruke AVIF hvis mulig, falle tilbake til WebP der AVIF ikke støttes, og til slutt bruke JPEG for resten. Du trenger bare å oppgi en godalt-tekst på <img>-elementet, siden det fungerer som standardbilde.

Konkrete tips for bildeoptimalisering i hverdagen

Start med å fjerne unødvendig store originaler. Mange laster opp bilder rett fra mobil eller kamera, selv om de aldri vises større enn for eksempel 1200 piksler i bredde på nettstedet.

Bruk et fast arbeidsløp: først endre størrelse til maks nødvendig dimensjon, deretter lagre i passende format (for eksempel AVIF eller WebP), og til slutt juster komprimeringsnivået til du ikke ser tydelig kvalitetsfall.

Har du mange like bilder, som produktbilder med samme utsnitt, kan du teste forskjellige komprimeringsnivåer på én fil først. Når du finner et nivå som ser bra ut, bruker du samme innstilling på resten.

Vanlige feil som gjør bilder tyngre enn nødvendig

En typisk felle er å bruke PNG til alt, fordi det ser skarpt ut i utgangspunktet. For fotografier og store bakgrunnsbilder vil dette ofte gi unødvendig store filer sammenlignet med WebP eller JPEG.

En annen feil er å skalere bildene kun i CSS i stedet for å tilpasse den faktiske filen. Da laster brukeren fortsatt ned en stor fil, selv om den vises lite på skjermen.

Det er også lett å glemme at komprimering kan gjøres flere ganger. Du kan ofte redusere filstørrelsen ytterligere etter første eksport, ved å kjøre filene gjennom et optimaliseringsverktøy som fjerner overflødige metadata.

Slik prioriterer du hvis du har begrenset tid

Har du ikke kapasitet til å gå gjennom alt på en gang, fokuser på de sidene som har mest trafikk og de største bildene øverst på siden. Små ikoner nederst i en artikkel gir sjelden store gevinster.

Deretter kan du innføre nye rutiner for alle nye opplastinger, slik at du ikke bygger opp et nytt problem. Etter hvert kan du ta en opprydding i gamle bilder når du har tid.

Husk også at verktøy og støtte for moderne formater utvikler seg over tid. Det kan være lurt å jevnlig sjekke oppdatert informasjon om nettleserstøtte og anbefalte verktøy før du gjør større endringer.