# Optimaliser bilder for nettet uten å miste kvalitet
[Canonical HTML page](https://gradiently.design/nb/guide/lighthouse-image-performance)
Bilder er som regel den tyngste delen av en side og grunnen til at Lighthouse klager. Her er en metode som virker: riktige pikselstørrelser, riktig format, responsiv markup og lastehint, uten synlig tap.
## The short version
- For å optimalisere bilder for nettet eksporterer du hvert bilde i størrelsen det vises i, omtrent doblet for skjermer med høy tetthet, i stedet for å laste opp originalen.
- AVIF og WebP gir mye mindre filer enn JPEG og PNG med lignende visuell kvalitet, og alle dagens nettlesere støtter WebP.
- Attributtene srcset og sizes lar nettleseren laste ned det minste bildet som fortsatt ser skarpt ut på hver skjerm.
- Bruk lazy loading med loading="lazy" på bilder under bretten, men last hovedbildet øverst med en gang med fetchpriority="high", fordi det som regel avgjør Largest Contentful Paint.
- Oppgi alltid width og height på bilder, så nettleseren reserverer plass og oppsettet ikke hopper mens de lastes.
For å **optimalisere bilder for nettet** uten synlig tap gjør du fem ting: eksporter hvert bilde i pikselstørrelsen det vises i (omtrent det dobbelte for skarpe skjermer), velg et moderne format som AVIF eller WebP, komprimer til en moderat kvalitet og sammenlign med øynene, server flere størrelser med `srcset`, og bruk lazy loading på alt under bretten. Disse stegene fjerner de fleste bildeadvarslene i Lighthouse og kutter som regel sidevekten kraftig, fordi originalbildet rett fra kameraet eller designverktøyet er mange ganger større enn skjermen trenger.
## Steg 1: eksporter i visningsstørrelsen
Et bilde som vises 800 piksler bredt, trenger ikke være 4000 piksler bredt. Lighthouse flagger for store bilder fordi de ekstra pikslene lastes ned, dekodes og kastes. Mål hvor bredt bildet vises i oppsettet ditt når det er på sitt største, og eksporter i omtrent dobbel bredde for telefoner og bærbare med høy tetthet. Mer enn det dobbelte ser sjelden skarpere ut og koster alltid byte.
| Bilde | Vises i | Eksportbredde |
| --- | --- | --- |
| Toppbilde i full bredde | Opptil 1920 px | 1920 px, pluss mindre versjoner |
| Artikkelbilde | Omtrent 720 px | 1440 px |
| Miniatyr på kort | Omtrent 360 px | 720 px |
| Profilbilde | 48 px | 96 px |
| Open Graph-bilde | Utenfor siden | Nøyaktig 1200×630 |
Typiske mål. Et toppbilde i full bredde er unntaket fra doblingen: 1920 px dekker de fleste skjermer, og svært store skjermer får et litt mykt bilde til en fornuftig pris.
- Toppbilde nettside 1920×1080: 1920 × 1080
- Bloggbanner 1200×600: 1200 × 600
- Lenkeforhåndsvisning 1200×630: 1200 × 630
Tre vanlige bildestørrelser for nettet tegnet i riktig forhold. Design i endelig størrelse, så ingenting beskjæres eller skaleres etter eksport.
## Steg 2: velg riktig format
Formatet betyr mer enn noen komprimeringsglidebryter. AVIF gir som regel den minste filen, WebP kommer nær og støttes av alle dagens nettlesere, og JPEG og PNG er fortsatt de trygge reserveløsningene. [WebP eller PNG](https://gradiently.design/nb/guide/webp-images) og [PNG eller JPG](https://gradiently.design/nb/guide/png-vs-jpeg) går dypere inn i hvert par.
| Format | Best til | Merknader |
| --- | --- | --- |
| AVIF | Foto, gradienter, store toppbilder | Minste filer; tregere å kode |
| WebP | Nesten alt | Med og uten tap, gjennomsiktighet, bred støtte |
| JPEG | Foto, som reserve | Ingen gjennomsiktighet; striper i myke gradienter |
| PNG | Skjermbilder, flat grafikk, gjennomsiktighet | Tapsfritt og stort for foto |
| SVG | Logoer, ikoner, illustrasjoner | Vektor, bitteliten når den er enkel; se [SVG eller PNG](https://gradiently.design/nb/guide/svg-vs-png) |
Velg etter innhold, ikke vane. Myke gradienter er det vanskeligste tilfellet for JPEG, og det er der WebP og AVIF hjelper mest.
> **Gradienter komprimeres dårlig** Myke fargeoverganger viser komprimering som synlige trinn. Legg på litt korn før eksport, som beskrevet i [striper i gradienter](https://gradiently.design/nb/guide/gradient-banding), så kan koderen komprimere hardere uten at noen ser det. Enda bedre: tegn gradienter på nettet med CSS.
En toppgradient på rundt 70 byte: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 50%, #0ea5e9 100%)`
Denne gradienten koster som CSS mindre enn én linje på siden. Eksportert som et bilde på 1920×1080 ville det samme veid mange kilobyte. Se [ytelse for CSS-gradienter](https://gradiently.design/nb/guide/css-gradient-performance).
## Steg 3: komprimer, og se etter
Formater med tap har en kvalitetsinnstilling, og riktig verdi avhenger av bildet. Start rundt 75 til 80 for WebP og rundt 50 til 60 for AVIF, eksporter og sammenlign med originalen i 100 % zoom. Senk til du ser en forskjell, og gå så ett hakk opp igjen. Ansikter, liten tekst og gradienter trenger høyere kvalitet enn travle landskap. [Bildekomprimering](https://gradiently.design/nb/guide/image-compression) forklarer hva koderen kaster.
Fjern metadata som kameradetaljer og innebygde miniatyrer mens du er i gang. De fleste eksportverktøy gjør det med én avkrysningsboks, og det fjerner byte ingen ser.
## Steg 4: responsiv markup med srcset og sizes
Når du har eksportert flere bredder, lar du nettleseren velge. `srcset` lister filene og breddene deres; `sizes` forteller nettleseren hvor bredt bildet vil vises. Nettleseren laster da ned den minste filen som er skarp nok for den skjermen.
```html
```
Nettleseren bruker den første kilden den støtter. img-elementet er både reserven og stedet for alt, width, height og lastehint.
For et bilde i en kolonne beskriver du oppsettet i `sizes`, for eksempel `sizes="(min-width: 1024px) 720px, 100vw"`. Feil `sizes` er den vanligste grunnen til at et responsivt oppsett likevel laster ned den store filen.
## Steg 5: lastehint som betyr noe
```html
```
Med width og height kan nettleseren reservere plass ut fra sideforholdet, så ingenting flytter seg når bildene kommer. CSS kan fortsatt gjøre bildet flytende med max-width: 100% og height: auto.
### Vanlige feil
- `loading="lazy"` på toppbildet
- Ingen width og height, så siden hopper
- Én enorm fil for alle skjermer
- En JPEG av en flat logo eller et skjermbilde
- Gradientbakgrunner lagret som bilder
### Gjør heller
- Toppbildet lastes med en gang med `fetchpriority="high"`
- Oppgi begge attributtene på hver img
- `srcset` med tre eller fire bredder
- SVG eller PNG for flat grafikk
- CSS-gradienter, med korn ved behov
Disse hintene henger direkte sammen med Core Web Vitals. Toppbildet er ofte Largest Contentful Paint-elementet, som ifølge [web.dev](https://web.dev/articles/lcp) bør vises innen 2,5 sekunder, og manglende dimensjoner er en klassisk årsak til layoutforskyvning. Er toppen din en video i stedet for et bilde, gjelder samme tankegang i [videobakgrunner på nettsider](https://gradiently.design/nb/guide/video-background-website).
## En sjekkliste før du publiserer
1. **Mål plassen** Finn den største viste bredden for hvert bilde i oppsettet ditt.
2. **Eksporter i riktige størrelser** En til to ganger plassens bredde, pluss mindre versjoner for telefoner.
3. **Velg format** AVIF eller WebP for foto og gradienter, SVG for logoer, PNG bare når det vinner.
4. **Komprimer med øynene** Senk kvaliteten til du ser en endring, og hev den så ett hakk.
5. **Skriv markup** `srcset`, `sizes`, `width`, `height`, `alt` og lazy loading under bretten.
6. **Test** Kjør Lighthouse i et inkognitovindu og sjekk bilderevisjonene og LCP-elementet.
Mye av dette blir enklere når bildet lages i endelig størrelse fra starten. I Gradiently designer du én gang, og Pro endrer størrelsen til alle formater i ett steg og eksporterer PNG, JPG eller SVG i nøyaktige mål opptil 4K, så toppbildet, banneret og [Open Graph-bildet](https://gradiently.design/nb/guide/open-graph-tags) alle starter i størrelsen siden vil vise.
## FAQ
### Hvordan optimaliserer jeg bilder for nettet uten å miste kvalitet?
Eksporter i visningsstørrelsen, bruk AVIF eller WebP, senk kvalitetsinnstillingen bare til du ser en forskjell, og server flere størrelser med srcset. Det meste av synlig tap kommer fra hard komprimering, ikke fra skalering.
### Hva er det beste bildeformatet for nettsider?
WebP er det trygge moderne standardvalget, og AVIF er som regel enda mindre. Bruk SVG for logoer og ikoner, og behold JPEG eller PNG som reserve.
### Bør jeg bruke lazy loading på alle bilder?
Nei. Bruk lazy loading på bilder under bretten, men last hovedbildet øverst med en gang, fordi forsinkelse gjør Largest Contentful Paint tregere.
### Hvilken størrelse bør bilder på en nettside ha?
Omtrent dobbelt så bredt som de vises, for skarpe skjermer med høy tetthet. Et toppbilde i full bredde på 1920 px dekker de fleste skjermer.
### Hvorfor sier Lighthouse at bildene mine ikke har riktig størrelse?
Filen har flere piksler enn plassen den fyller på siden. Eksporter en mindre versjon og bruk srcset og sizes, så nettleseren velger den riktige.
```
Med width og height kan nettleseren reservere plass ut fra sideforholdet, så ingenting flytter seg når bildene kommer. CSS kan fortsatt gjøre bildet flytende med max-width: 100% og height: auto.
### Vanlige feil
- `loading="lazy"` på toppbildet
- Ingen width og height, så siden hopper
- Én enorm fil for alle skjermer
- En JPEG av en flat logo eller et skjermbilde
- Gradientbakgrunner lagret som bilder
### Gjør heller
- Toppbildet lastes med en gang med `fetchpriority="high"`
- Oppgi begge attributtene på hver img
- `srcset` med tre eller fire bredder
- SVG eller PNG for flat grafikk
- CSS-gradienter, med korn ved behov
Disse hintene henger direkte sammen med Core Web Vitals. Toppbildet er ofte Largest Contentful Paint-elementet, som ifølge [web.dev](https://web.dev/articles/lcp) bør vises innen 2,5 sekunder, og manglende dimensjoner er en klassisk årsak til layoutforskyvning. Er toppen din en video i stedet for et bilde, gjelder samme tankegang i [videobakgrunner på nettsider](https://gradiently.design/nb/guide/video-background-website).
## En sjekkliste før du publiserer
1. **Mål plassen** Finn den største viste bredden for hvert bilde i oppsettet ditt.
2. **Eksporter i riktige størrelser** En til to ganger plassens bredde, pluss mindre versjoner for telefoner.
3. **Velg format** AVIF eller WebP for foto og gradienter, SVG for logoer, PNG bare når det vinner.
4. **Komprimer med øynene** Senk kvaliteten til du ser en endring, og hev den så ett hakk.
5. **Skriv markup** `srcset`, `sizes`, `width`, `height`, `alt` og lazy loading under bretten.
6. **Test** Kjør Lighthouse i et inkognitovindu og sjekk bilderevisjonene og LCP-elementet.
Mye av dette blir enklere når bildet lages i endelig størrelse fra starten. I Gradiently designer du én gang, og Pro endrer størrelsen til alle formater i ett steg og eksporterer PNG, JPG eller SVG i nøyaktige mål opptil 4K, så toppbildet, banneret og [Open Graph-bildet](https://gradiently.design/nb/guide/open-graph-tags) alle starter i størrelsen siden vil vise.
## FAQ
### Hvordan optimaliserer jeg bilder for nettet uten å miste kvalitet?
Eksporter i visningsstørrelsen, bruk AVIF eller WebP, senk kvalitetsinnstillingen bare til du ser en forskjell, og server flere størrelser med srcset. Det meste av synlig tap kommer fra hard komprimering, ikke fra skalering.
### Hva er det beste bildeformatet for nettsider?
WebP er det trygge moderne standardvalget, og AVIF er som regel enda mindre. Bruk SVG for logoer og ikoner, og behold JPEG eller PNG som reserve.
### Bør jeg bruke lazy loading på alle bilder?
Nei. Bruk lazy loading på bilder under bretten, men last hovedbildet øverst med en gang, fordi forsinkelse gjør Largest Contentful Paint tregere.
### Hvilken størrelse bør bilder på en nettside ha?
Omtrent dobbelt så bredt som de vises, for skarpe skjermer med høy tetthet. Et toppbilde i full bredde på 1920 px dekker de fleste skjermer.
### Hvorfor sier Lighthouse at bildene mine ikke har riktig størrelse?
Filen har flere piksler enn plassen den fyller på siden. Eksporter en mindre versjon og bruk srcset og sizes, så nettleseren velger den riktige.