# WebP, PNG og JPG: moderne bildeformater til nettet [Canonical HTML page](https://gradiently.design/nb/guide/webp-images) Nettstedet trenger ikke levere de samme filene som du publiserer på Instagram. WebP og AVIF gjør samme jobb som PNG og JPG med færre byte når de settes opp riktig. ## The short version - WebP er et bildeformat med tapskomprimering som JPG eller tapsfri komprimering som PNG, og støtter gjennomsiktighet og animasjon. - Ved tilsvarende visuell kvalitet er WebP-filer vanligvis merkbart mindre enn tilsvarende JPG og PNG. - Alle dagens versjoner av Chrome, Safari, Firefox og Edge støtter WebP, så reserveformat trengs bare til svært gamle nettlesere. - AVIF komprimerer mer enn WebP og har nå bred støtte, men tar lengre tid å kode. - Behold PNG og JPG til sosiale plattformer og filer du sender folk; bruk WebP eller AVIF på eget nettsted. I valget **WebP eller PNG** og JPG vinner WebP på ditt eget nettsted: Det kan komprimere med tap som JPG eller tapsfritt som PNG, støtter gjennomsiktighet og gir mindre filer ved samme visuelle kvalitet. Alle dagens nettlesere støtter det. PNG og JPG vinner fortsatt utenfor nettstedet: opplasting til Instagram og LinkedIn, e-postvedlegg og filer til kunder og trykkerier. Den praktiske regelen er derfor enkel. Lag og behold originaler i PNG, og lever WebP eller AVIF til besøkende. ## Hva WebP er WebP er et bildeformat utviklet av Google og dokumentert på [web.dev](https://web.dev/articles/serve-images-webp). Ett format dekker det som tidligere krevde tre: fotografier med tap som JPG, tapsfri grafikk med gjennomsiktighet som PNG og korte animasjoner som GIF. Besparelsen kommer fra smartere komprimering som forutsier hver pikselblokk fra naboene og bare lagrer forskjellen. | Egenskap | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Med tap | Ja | Nei | Ja | Ja | | Tapsfritt | Nei | Ja | Ja | Ja | | Gjennomsiktighet | Nei | Ja | Ja | Ja | | Animasjon | Nei | Begrenset (APNG) | Ja | Ja | | Nettleserstøtte | Universell | Universell | Alle dagens nettlesere | Alle dagens nettlesere | | Godtas av sosiale plattformer | Ja | Ja | Varierende | Sjelden | Sjekk gjeldende støtte på [caniuse.com](https://caniuse.com/webp) hvis publikum bruker gamle enheter. ## WebP eller PNG til grafikk og gjennomsiktighet Til logoer, grensesnittbilder og frilagte bilder bevarer tapsfri WebP hver piksel som PNG og er vanligvis mindre. WebP med tap og gjennomsiktighet gir den større gevinsten: Et frilagt produkt som trenger en myk, gjennomskinnelig kant, kan være en brøkdel av PNG-størrelsen uten synlig forskjell. Gradienter er unntaket som krever omtanke. En jevn, mørk blanding kan få fargebånd i WebP med tap, akkurat som i JPG. Består toppbildet mest av gradient, sammenlign høy kvalitet med tap mot tapsfritt. Vurder også om det bør være et bilde i det hele tatt: En [CSS-gradient](https://gradiently.design/nb/guide/css-linear-gradient) krever ingen nedlasting. - Mørk marineblå: test tapsfritt: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Lys rosa: med tap ved høy kvalitet: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Klar, tre stopp: med tap går fint: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Mørke, subtile blandinger viser komprimering først; lyse, travle skjuler den. Velg WebP-innstillinger etter innholdet, ikke av vane. ## WebP eller JPG til fotografier Til fotografier tilsvarer WebP med tap ved kvalitet rundt 75 til 80 vanligvis JPG ved 85, med mindre fil. Forskjellen summerer seg på sider med mange bilder: produktoversikter, porteføljer og blogger. På ett toppfoto er gevinsten reell, men mindre dramatisk, og riktige pikseldimensjoner betyr mer enn formatet. 1. **Størrelse først** Eksporter bildet i den største størrelsen det faktisk vises. Et [toppbilde](https://gradiently.design/nb/guide/website-hero-background) i 1920×1080 trenger aldri en original på 6000 piksler. 2. **Velg kvalitet** Start WebP med tap på 80. Se på hud, himmel og mørke hjørner ved 100% zoom, og senk til noe endres. Gå så ett trinn tilbake. 3. **Lag mindre versjoner** Eksporter bredder på 640, 1280 og 1920 piksler, slik at telefoner laster den lille. 4. **Lever med srcset** La nettleseren velge riktig bredde med `srcset` og `sizes`, som i koden under. ## AVIF eller WebP AVIF er nyere og komprimerer vanligvis mer enn WebP, særlig fotografier og jevne toner. Det støttes i alle dagens store nettlesere. Ulempene er langsommere koding, som betyr noe ved løpende konvertering, og færre verktøy som åpner formatet. Mange nettsteder leverer AVIF først, WebP deretter og JPG sist, og lar nettleseren ta det første den forstår. ```html Evening light over the harbour ``` Nettleseren bruker første `source` den støtter, og faller tilbake til `img`. Bredde og høyde hindrer at oppsettet hopper mens bildet laster. Bruker du et rammeverk eller bilde-CDN, kan det gjøre alt dette automatisk fra én opplastet original. Sjekk hva det leverer før du konverterer for hånd. > **Animert WebP og GIF** Animert WebP er langt mindre enn GIF og beholder fulle farger, så det passer små grafiske løkker på en side. Til alt over noen sekunder er en lydløs MP4- eller WebM-video enda mindre. [GIF eller MP4](https://gradiently.design/nb/guide/gif-vs-mp4) sammenligner dem i detalj. ## Hvor PNG og JPG fortsatt vinner ### Bruk WebP eller AVIF - Bilder på eget nettsted - Produktoversikter og gallerier - Blogg- og artikkelbilder - Gjennomsiktige frilagte bilder på nettet ### Bruk PNG eller JPG - Opplasting til Instagram, LinkedIn, X og Facebook - Open Graph-lenkeforhåndsvisninger - Filer du sender kunder eller på e-post - Originaler du skal redigere igjen Sosiale plattformer konverterer opplastinger selv, og noen avviser eller håndterer WebP feil. Roboter som henter lenkeforhåndsvisninger, varierer også. Behold derfor [Open Graph-bildet](https://gradiently.design/nb/guide/open-graph-image-size) som PNG eller JPG i 1200×630. En WebP sendt til en kunde åpnes dessuten ofte i feil app eller ikke i det hele tatt. Et bredt lenkeforhåndsvisningsbilde som annonserer en vårkolleksjon på en gradientbakgrunn En lenkeforhåndsvisning i 1200×630. Behold denne som PNG, slik at alle plattformenes roboter kan lese den. ## Slik konverterer du PNG til WebP Googles gratis kommandolinjeverktøy `cwebp` konverterer én fil eller en hel mappe, og de fleste bilde- og designverktøy eksporterer nå WebP direkte. ```bash # lossy, good for photos cwebp -q 80 photo.png -o photo.webp # lossless, good for logos and interface graphics cwebp -lossless logo.png -o logo.webp # a whole folder for f in *.png; do cwebp -q 80 "$f" -o "${f%.png}.webp"; done ``` Behold PNG-originalene. Å konvertere WebP tilbake til PNG gjenoppretter ikke detaljer tapt ved komprimering med tap. Designoriginalene kan fortsatt være PNG: Gradiently eksporterer design som PNG og JPG, som er riktige utgangsfiler for dette trinnet og for alle sosiale opplastinger. Les [bildekomprimering uten å ødelegge gradienter](https://gradiently.design/nb/guide/image-compression) for tankene bak kvalitetsinnstillinger, [PNG eller JPG](https://gradiently.design/nb/guide/png-vs-jpeg) for de eldre formatene og [optimalisere bilder for nettet](https://gradiently.design/nb/guide/lighthouse-image-performance) for hele sjekklisten for fart. ## FAQ ### Er WebP bedre enn PNG? På et nettsted, vanligvis ja: Tapsfri WebP bevarer samme piksler i en mindre fil og støtter gjennomsiktighet. Til sosiale opplastinger og filer til folk er PNG tryggere, fordi det åpnes overalt. ### Støtter alle nettlesere WebP? Alle dagens versjoner av Chrome, Safari, Firefox og Edge støtter WebP. Bruk et `picture`-element med JPG eller PNG som reserve hvis du må nå svært gamle nettlesere. ### Bør jeg bruke AVIF eller WebP? AVIF er vanligvis mindre, mens WebP kodes raskere og støttes av flere verktøy. AVIF først med WebP som reserve gir de fleste besøkende den minste filen. ### Kan jeg laste opp WebP til Instagram? Støtten varierer, så last heller opp PNG eller JPG i nøyaktig størrelse, som 1080×1350 til et stående innlegg. ### Støtter WebP gjennomsiktighet? Ja, både med tap og tapsfritt. Det gjør formatet til en god erstatning for gjennomsiktige PNG-er på nettet.