WebP

WebP er et billedformat udviklet til brug på nettet. Det understøtter både komprimering med og uden kvalitetstab, transparens og animation. I mange tilfælde kan en WebP-fil være mindre end en tilsvarende JPEG- eller PNG-fil.

Mindre billedfiler kan gøre en side hurtigere og støtte arbejdet med Core Web Vitals. Det er især relevant i en stor hero-sektion, et produktgalleri eller en side med mange cases.

WebP er ikke automatisk det bedste format til alt. Logoer og simple illustrationer kan stadig egne sig bedre som vektorgrafik i SVG. Originale trykfiler skal heller ikke erstattes af webkomprimerede billeder.

Start med at eksportere billedet i de dimensioner, det faktisk skal vises i. Et foto på 4.000 pixels i bredden er unødvendigt, hvis det højst vises i 1.200 pixels. Format, dimensioner og komprimeringsgrad arbejder sammen.

Vælg derefter en kvalitet, hvor filen bliver mindre uden synlige blokke, udtværede detaljer eller mærkelige kanter. Fotografier kan ofte tåle mere komprimering end grafik med små bogstaver. Transparente billeder skal testes mod den rigtige baggrund.

WordPress har kunnet uploade WebP siden version 5.8. Mange cache- og billedplugins kan også generere WebP-varianter automatisk. Kontrollér dog, om originalen bevares, hvordan gamle browsere håndteres, og om pluginet skaber unødvendige kopier.

På en hjemmeside hjælper korrekt optimerede billeder med hastighed og oplevelse. På en webshop kan besparelsen blive stor, fordi samme kunde henter kategori-, produkt- og miniaturebilleder i én session.

En restaurant har et hero-foto som JPEG på 2,8 MB og 3.600 pixels i bredden. Billedet vises højst i 1.600 pixels. Efter beskæring, nedskalering og WebP-eksport fylder det 240 kB.

På en mobilforbindelse betyder det, at der skal hentes cirka 2,56 MB mindre på forsiden. Hvis 1.000 besøgende åbner siden, svarer forskellen til omtrent 2,56 GB overført data. Det er et regneeksempel, men det viser, hvorfor ét stort billede kan betyde mere end mange små ikoner.

Restauranten beholder den originale fil til fremtidig redigering. WebP-versionen får en konkret alt-tekst og indgår i et responsivt billedsetup, så mobilen ikke henter desktopfilen.

Guiden om en god hjemmeside til håndværkere beskriver også betydningen af billeder, der viser arbejdet uden at gøre siden tung.

Den typiske fejl er at installere et konverteringsplugin og regne med, at opgaven er løst. Hvis kilden er alt for stor, kan den nye WebP stadig fylde meget. Hvis siden samtidig indlæser fem varianter, lazy loading er forkert opsat, eller billedet bliver hentet før det skal bruges, er formatet kun én lille del.

En anden fejl er at komprimere grafiske filer for hårdt. Produktetiketter, skærmbilleder og grafik med tekst kan blive slørede. Her kan PNG, SVG eller en WebP uden kvalitetstab være bedre.

WebP forbedrer heller ikke et forkert udsnit. Et billede kan være teknisk let, men stadig dårligt, hvis motivet forsvinder på mobil. Det skal testes sammen med det responsive design.

Moderne browsere understøtter WebP bredt, men et robust setup bør stadig kende målgruppen og de systemer, billederne skal bruges i. Et billede til en ekstern markedsplads, et trykkeri eller et ældre mailsystem kan have andre krav.

Billedformatet ændrer ikke farverummet til tryk. WebP bruges normalt i RGB på skærm, mens tryksager ofte arbejder med CMYK og højere krav til opløsning.

Kombinér WebP med fornuftig cache, korrekte dimensioner og lazy loading. Det er summen, der gør siden hurtig — ikke filendelsen alene.

JPEG er stadig velegnet til fotografier og understøttes næsten overalt. PNG er nyttigt til grafik og billeder med transparens, men kan blive tungt. WebP kan håndtere både foto og transparens og giver ofte mindre filer. SVG er vektorbaseret og passer til logoer, ikoner og simple illustrationer.

Valget afhænger af motivet. Et foto af et butikslokale kan være JPEG eller WebP. Et logo bør normalt være SVG. Et skærmbillede med små bogstaver kan kræve PNG eller lossless WebP for at stå skarpt. En animeret grafik kan måske være WebP, men videoformat kan være mere effektivt ved længere sekvenser.

Lav en visuel sammenligning ved samme omtrentlige filstørrelse. Et format kan se bedre ud i ét motiv og dårligere i et andet. Hud, fine mønstre, gradienter og tekst afslører forskellige typer komprimeringsfejl.

Bevar masterfiler i et redigerbart format med høj kvalitet. WebP-filen er en leveringsversion. Hvis den senere skal beskæres eller bruges til tryk, er originalen langt bedre.

Automatik kan spare tid, især på webshops med mange produktbilleder. En god løsning genererer passende størrelser, vælger format efter browser og undgår at konvertere den samme fil igen og igen.

Men kontrollér diskforbruget. Nogle plugins gemmer original, flere WordPress-størrelser og både JPEG- og WebP-version af hver størrelse. Ét upload kan blive til mange filer. Det kan være acceptabelt, men bør være kendt.

Kontrollér også backup og flytning. Hvis WebP-filer skabes i en cachemappe, skal de kunne gendannes eller genereres igen. Hvis de ligger i mediebiblioteket, skal migreringsværktøjet tage dem med.

Efter opsætning bør et udvalg af sider testes i flere browsere. Se netværkspanelet og bekræft, at WebP faktisk leveres, at filerne har rimelige dimensioner, og at der ikke hentes både original og konverteret version uden grund.

Automatik er bedst, når den ledsages af klare regler for upload. Et 12 MB kameraoriginal bør stadig beskæres og vurderes, før det bliver en del af en offentlig side.

WebP kan gemmes med både tabsgivende og tabsfri komprimering. Til fotografier er en tabsgivende indstilling normalt passende, mens grafik med skarpe flader eller gennemsigtighed kan kræve højere kvalitet eller tabsfri lagring. Den rigtige indstilling findes ved at sammenligne den faktiske fil, ikke ved at vælge ét kvalitetsniveau til alle billeder.

Se især på ansigter, teksturer, gradienter og kanter. For hård komprimering kan skabe blokke, udtvære detaljer eller give banding i rolige farveforløb. Et billede kan være teknisk lille og stadig være en dårlig optimering, hvis produktet ser forkert ud. Gem originalen, så filen kan genereres igen med andre indstillinger.

Dimensionerne betyder ofte mere end formatet. Et hero-billede på 4.000 pixels er stadig tungt, selv om det er WebP. Generér flere størrelser, og lad browseren vælge den passende via responsive billedattributter. Det reducerer unødvendige bytes på mobil og understøtter et hurtigere responsivt design.

Nyere WordPress-versioner kan håndtere WebP i mediebiblioteket, men den praktiske opsætning afhænger af tema, plugins, hosting og eksisterende billeder. Nogle optimeringsplugins konverterer filer ved upload eller i baggrunden og leverer det bedste format gennem omskrivningsregler eller en CDN.

Kontrollér, at miniaturestørrelser bliver oprettet korrekt, og at regeneration af thumbnails ikke efterlader brutte referencer. På en WooCommerce-butik skal produktzoom, galleri, variationer og feedintegrationer testes. En tredjepart kan kræve JPEG, selv om hjemmesiden viser WebP.

Hvis gamle billeder massekonverteres, bør processen køres i et stagingmiljø med backup. Kontrollér et repræsentativt udvalg: portrætter, logoer, transparente filer, meget brede bannere og små produktbilleder. En automatisk konvertering kan ikke vurderes alene på den samlede besparelse.

Sammenlign filstørrelse og visuel kvalitet før og efter. Brug derefter en ydelsesmåling på de sider, hvor billederne fylder mest. Et mindre hero-billede kan forbedre Largest Contentful Paint, mens optimering af et ikon nederst på siden næppe kan mærkes.

Hold øje med cache. Hvis gamle filer fortsat serveres, kan testen vise blandede resultater. Ryd relevant cache, og kontrollér den faktiske filtype og størrelse i browserens netværkspanel.

WebP bør være en del af en samlet billedproces: korrekt beskæring, passende dimensioner, beskrivende filnavne, alt-tekst og effektiv levering. Formatet er et værktøj i den proces, ikke en erstatning for den.