# WebP vs PNG og JPG: moderne billedformater til nettet [Canonical HTML page](https://gradiently.design/da/guide/webp-images) Dit website behøver ikke vise de samme filer, som du poster på Instagram. WebP og AVIF gør det samme som PNG og JPG med færre bytes, hvis du sætter dem rigtigt op. ## The short version - WebP er et billedformat, der kan være komprimeret med tab som JPG eller tabsfrit som PNG og understøtter gennemsigtighed og animation. - Ved samme visuelle kvalitet er WebP-filer som regel mærkbart mindre end tilsvarende JPG og PNG. - Alle nye versioner af Chrome, Safari, Firefox og Edge understøtter WebP, så en reserveløsning er kun nødvendig til meget gamle browsere. - AVIF komprimerer mere end WebP og er nu bredt understøttet, men det koder langsommere. - Behold PNG og JPG til uploads på sociale platforme og til filer, du sender til folk; brug WebP eller AVIF på dit eget website. I spørgsmålet om **WebP vs PNG** og JPG vinder WebP på dit eget website: det kan komprimere som en JPG eller tabsfrit som en PNG, understøtter gennemsigtighed og giver mindre filer ved samme visuelle kvalitet. Alle nye browsere understøtter det. Der, hvor PNG og JPG stadig vinder, er alle steder uden for dit website: uploads til Instagram og LinkedIn, vedhæftede filer i e-mails, filer til kunder og trykkerier. Så den praktiske regel er enkel. Lav og gem masterfiler i PNG, og vis WebP (eller AVIF) til besøgende. ## Hvad WebP er WebP er et billedformat udviklet af Google og dokumenteret på [web.dev](https://web.dev/articles/serve-images-webp). Ét format dækker det, der før krævede tre: fotos med tab som JPG, tabsfri grafik med gennemsigtighed som PNG og korte animationer som GIF. Besparelsen kommer fra smartere komprimering, der forudsiger hver blok af pixels ud fra naboerne og kun gemmer forskellen. | Egenskab | JPG | PNG | WebP | AVIF | | --- | --- | --- | --- | --- | | Med tab | Ja | Nej | Ja | Ja | | Tabsfri | Nej | Ja | Ja | Ja | | Gennemsigtighed | Nej | Ja | Ja | Ja | | Animation | Nej | Begrænset (APNG) | Ja | Ja | | Browserunderstøttelse | Overalt | Overalt | Alle nye browsere | Alle nye browsere | | Accepteres af sociale platforme | Ja | Ja | Uensartet | Sjældent | Tjek den aktuelle understøttelse på [caniuse.com](https://caniuse.com/webp), hvis dit publikum bruger gamle enheder. ## WebP vs PNG til grafik og gennemsigtighed Til logoer, billeder i brugerflader og fritlagte motiver bevarer tabsfri WebP hver pixel ligesom PNG og er som regel mindre. Den store gevinst er WebP med tab og gennemsigtighed: et fritlagt produkt, der skal have en blød, gennemsigtig kant, kan fylde en brøkdel af PNG-størrelsen uden synlig forskel. Gradienter er undtagelsen, der kræver omhu. En glat, mørk overgang kan få striber i WebP med tab, præcis som i JPG. Er dit hero-billede mest gradient, så sammenlign tab ved høj kvalitet med tabsfrit, og overvej, om det overhovedet skal være et billede: en [CSS-gradient](https://gradiently.design/da/guide/css-linear-gradient) kræver ingen download. - Mørk marineblå: test tabsfrit: `linear-gradient(160deg, #0c1222 0%, #13294b 50%, #1e3a8a 100%)` - Bleg lyserød: med tab, høj kvalitet: `radial-gradient(circle at 70% 30%, #f9a8d4 0%, #fbcfe8 35%, #fdf2f8 80%)` - Klar med tre farver: tab er fint: `linear-gradient(135deg, #f97316 0%, #ec4899 50%, #8b5cf6 100%)` Mørke, subtile overgange viser komprimering først; klare, livlige skjuler den. Vælg WebP-indstillinger efter indholdet, ikke af vane. ## WebP vs JPG til fotos Til fotografier matcher WebP med tab ved en kvalitet omkring 75 til 80 som regel en JPG ved 85 og er samtidig mindre. Forskellen løber op på sider med mange billeder: produktgitre, porteføljer, blogs. På et enkelt hero-foto er gevinsten reel, men mindre dramatisk, og de rigtige pixelmål betyder mere end formatet. 1. **Størrelse først** Eksportér fotoet i den største størrelse, det faktisk vises i. Et [hero-billede på et website](https://gradiently.design/da/guide/website-hero-background) i 1920×1080 har aldrig brug for en original på 6000 pixels. 2. **Vælg en kvalitet** Start med WebP med tab på 80. Se på hud, himmel og mørke hjørner ved 100 % zoom, gå så ned, til noget ændrer sig, og gå et trin tilbage. 3. **Lav mindre versioner** Eksportér i bredderne 640, 1280 og 1920 pixels, så telefoner henter den lille. 4. **Vis med srcset** Lad browseren vælge den rigtige bredde med `srcset` og `sizes`, som i koden nedenfor. ## AVIF vs WebP AVIF er nyere og komprimerer som regel mere end WebP, især på fotografier og bløde toner. Det understøttes i alle nye større browsere. Prisen er langsommere kodning, som betyder noget, hvis du konverterer billeder løbende, og færre værktøjer, der kan åbne det. Mange websites viser AVIF først, WebP som nummer to og JPG til sidst og lader browseren tage det første, den forstår. ```html Evening light over the harbour ``` Browseren bruger den første `source`, den understøtter, og falder tilbage på `img`. Bredde og højde forhindrer layoutet i at hoppe, mens det indlæses. Bruger du et framework eller et billed-CDN, gør det måske alt dette automatisk ud fra én uploadet original. Tjek, hvad det leverer, før du konverterer noget i hånden. > **Animeret WebP og GIF** Animeret WebP er langt lettere end GIF og bevarer alle farver, så det passer til små grafikker, der kører i loop på en side. Til alt, der varer mere end et par sekunder, er en lydløs MP4- eller WebM-video endnu lettere. [GIF vs MP4](https://gradiently.design/da/guide/gif-vs-mp4) sammenligner dem i detaljer. ## Hvor PNG og JPG stadig vinder ### Brug WebP eller AVIF - Billeder på dit eget website - Produktgitre og gallerier - Billeder i blogs og artikler - Gennemsigtige fritlagte motiver på nettet ### Brug PNG eller JPG - Uploads til Instagram, LinkedIn, X og Facebook - Open Graph-billeder til linkforhåndsvisninger - Filer, du mailer eller sender til kunder - Masterfiler, du vil redigere igen Sociale platforme konverterer selv uploads, og nogle afviser eller fejlbehandler WebP. Crawlere til linkforhåndsvisninger varierer også, så behold dit [Open Graph-billede](https://gradiently.design/da/guide/open-graph-image-size) som PNG eller JPG i 1200×630. Og en WebP sendt til en kunde åbner ofte i det forkerte program eller slet ikke. Et bredt billede til linkforhåndsvisning, der annoncerer en forårskollektion på en gradientbaggrund En linkforhåndsvisning i 1200×630. Behold den som PNG, så alle platformes crawlere kan læse den. ## Sådan konverterer du PNG til WebP Googles gratis kommandolinjeværktøj `cwebp` konverterer én fil eller en hel mappe, og de fleste billedredigerings- og designværktøjer eksporterer nu 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-originalerne. At konvertere WebP tilbage til PNG genskaber ikke detaljer, der er tabt ved komprimering med tab. Dine masterfiler kan blive i PNG: Gradiently eksporterer design som PNG og JPG, som er de rigtige filer til dette trin og til alle uploads på sociale medier. Baggrunden for kvalitetsindstillingerne finder du i [billedkomprimering uden at ødelægge gradienter](https://gradiently.design/da/guide/image-compression); det ældre par i [PNG vs JPG](https://gradiently.design/da/guide/png-vs-jpeg); og hele tjeklisten for hastighed i [optimering af billeder til nettet](https://gradiently.design/da/guide/lighthouse-image-performance). ## FAQ ### Er WebP bedre end PNG? På et website som regel ja: tabsfri WebP bevarer de samme pixels i en mindre fil og understøtter gennemsigtighed. Til uploads på sociale medier og filer, du sender til folk, er PNG mere sikkert, fordi det åbner overalt. ### Understøtter alle browsere WebP? Alle nye versioner af Chrome, Safari, Firefox og Edge understøtter WebP. Brug et `picture`-element med JPG eller PNG som reserve, hvis du skal nå meget gamle browsere. ### Skal jeg bruge AVIF eller WebP? AVIF er som regel mindre, WebP koder hurtigere og understøttes af flere værktøjer. Viser du AVIF først med WebP som reserve, får de fleste besøgende den mindste fil. ### Kan jeg uploade WebP til Instagram? Understøttelsen er uensartet, så upload hellere PNG eller JPG i den præcise størrelse, som 1080×1350 til et stående opslag. ### Understøtter WebP gennemsigtighed? Ja, både med og uden tab, hvilket gør det til en god erstatning for gennemsigtige PNG’er på nettet.