Billedkomprimering

Billedkomprimering reducerer størrelsen på en billedfil ved at gemme billedets data mere effektivt. Komprimeringen kan være tabsfri, hvor informationen bevares, eller tabsgivende, hvor noget billeddata fjernes for at opnå en mindre fil.

På en hjemmeside betyder mindre billedfiler, at browseren har færre data at hente. Det kan give hurtigere indlæsning, lavere dataforbrug og bedre oplevelse på mobil. Billeder fylder ofte en stor del af sidens samlede download.

Komprimering er ikke det samme som at ændre billedets dimensioner. Et foto kan være 4.000 × 3.000 pixels og komprimeret hårdt, men stadig være alt for stort til en plads på 800 × 600. Den bedste optimering kombinerer passende dimensioner, filformat og komprimeringsniveau.

Det er heller ikke det samme som lazy loading. Komprimering gør hver fil mindre. Lazy loading udsætter hentningen af billeder, som endnu ikke er i nærheden af skærmen. De to teknikker kan bruges sammen.

Målet er ikke den mindste mulige fil for enhver pris. Et produktfoto med grødede kanter og blokke i farvefladerne kan koste mere i troværdighed end det sparer i kilobytes. God billedkomprimering finder balancen mellem hastighed og synlig kvalitet.

Start med den faktiske visningsstørrelse. Et hero-billede kan kræve større dimensioner end et lille kort. Eksportér ikke alle billeder i samme størrelse “for en sikkerheds skyld”. Brug responsive billedstørrelser, så mobilen ikke skal hente desktopfilen, hvis den ikke har brug for den.

Vælg format efter motivet. Fotografier egner sig ofte til JPEG, WebP eller AVIF. Grafik med gennemsigtighed og skarpe flader kan passe til PNG eller SVG, afhængigt af typen. Et format er ikke bedst til alt.

Juster komprimeringen visuelt. Se billedet i den størrelse, det bruges, og kontrollér ansigter, tekst, produktkanter og farveovergange. Artefakter kan være næsten usynlige i et landskab og meget tydelige rundt om et logo.

Fjern unødvendige metadata ved webeksport, medmindre de har et konkret formål. Kameraoplysninger og store indlejrede profiler kan øge filen. Sørg samtidig for korrekt alt-tekst i selve CMS’et. Komprimering og tilgængelig beskrivelse er to forskellige opgaver.

Automatisér processen, hvor det giver mening. En WordPress-plugin, build-proces eller CDN kan generere varianter og moderne formater. Men kontrollér kvalitet og backup. Automatisk betyder ikke, at alle gamle originaler trygt kan slettes.

Mål effekten med PageSpeed Insights og rigtige enheder. Billeder kan påvirke Core Web Vitals, særligt hvis det største synlige element er tungt. Et hurtigt laboratorietal er nyttigt, men en langsom mobilforbindelse afslører ofte mere.

En frisørsalon uploader 18 billeder direkte fra kameraet til en galleriside. Hvert billede er omkring 5 MB og 6.000 pixels bredt. Siden kræver derfor omtrent 90 MB billeder, selv om galleriet viser dem i maksimalt 1.200 pixels.

Billederne beskæres og eksporteres i 1.600 pixels til store visninger samt mindre varianter til kort. De gemmes som WebP med et niveau, hvor hårstrå og farveovergange stadig ser naturlige ud. Den gennemsnitlige fil bliver i regneeksemplet 180 KB.

Det fulde galleri falder dermed fra cirka 90 MB til lidt over 3 MB, og kun de første billeder hentes med det samme. Resten bruger lazy loading. Browseren får desuden bredde og højde, så layoutet ikke hopper, mens billederne kommer.

Salonen kontrollerer billederne på en nyere mobil og en ældre laptop. Ét mørkt billede har fået tydelige blokke i skyggerne og eksporteres igen med mildere komprimering. Optimering betyder ikke, at alle filer skal presses gennem samme indstilling.

Siden får også links videre til booking og ydelser. Hurtigere billeder hjælper oplevelsen, men de skaber ikke alene en god brugerrejse. Den samlede side skal stadig være overskuelig, som beskrevet i guiden til at skabe en brugervenlig hjemmeside.

Den klassiske fejl er at komprimere efter upload, men beholde enorme dimensioner. Filen bliver mindre, men browseren henter stadig flere pixels end nødvendigt. Start med dimensionerne og komprimér bagefter.

En anden fejl er at bruge PNG til alle fotos, fordi formatet “ikke mister kvalitet”. Tabsfri er ikke automatisk bedst på web. Et stort fotografi kan blive mange gange tungere end en visuelt tilsvarende JPEG eller WebP.

Pas på dobbelt komprimering. Et JPEG-billede, der gemmes igen og igen, kan samle synlige skader. Bevar en god original og lav webversioner derfra. Redigér ikke næste kampagne ud fra en allerede hårdt komprimeret fil fra hjemmesiden.

Sidst er der blind automatisering. Et plugin kan ændre format, men måske ikke det billede, der ligger i en ekstern slider eller CSS-baggrund. Kontrollér netværksfanen, mediebiblioteket og frontend. Et grønt dashboard kan godt overse halvdelen af siden.

Tabsfri komprimering organiserer data mere effektivt uden at kassere billedinformation. Tabsgivende komprimering fjerner information, som algoritmen vurderer mindre synlig. Begge kan være relevante. Valget afhænger af motiv og brug.

Et CDN kan levere billeder tættere på brugeren og i nogle løsninger tilpasse format og størrelse automatisk. Det erstatter ikke en fornuftig original og korrekt HTML. En 12 MB fil er stadig en dårlig start, selv om den står på en hurtig server.

Cache kan gøre gentagne besøg hurtigere, men den første besøgende skal stadig hente filen. Derfor er cache ikke en undskyldning for tunge billeder.

Billedkomprimering bør være en fast del af publiceringen: beskær, dimensionér, vælg format, komprimér, skriv alt-tekst og kontrollér resultatet. Når rutinen sidder, tager det mindre tid end at reparere en langsom mediebank senere. Læs også om optimering af hjemmesiden til søgemaskiner.

Fotografier med bløde overgange kan ofte tåle mere tabsgivende komprimering end screenshots med lille tekst. Illustrationer med få farver kan få tydelige kanter og banding ved en indstilling, der ser fin ud på et portræt.

Test derfor repræsentative billeder i stedet for at vælge ét globalt kvalitetsniveau ud fra et enkelt foto. En mediebank rummer forskellige opgaver.

Lav en fast eksportregel for de mest almindelige billedtyper: hero, indholdsbillede, kort og produktfoto. Angiv maksimal pixelbredde, foretrukket format og et omtrentligt kvalitetsniveau. Reglen skal være enkel nok til, at flere medarbejdere kan følge den uden at kende hvert codec.

På en hjemmeside kan et hero-foto have brug for større dimensioner end et billede i en smal tekstkolonne. På en webshop bør produktbilleder være ensartede og store nok til zoom, men de behøver ikke leveres som ukomprimerede kamerafiler. Brug forskellige profiler efter funktionen.

Kontrollér filen ved den størrelse, den faktisk vises i. Artefakter omkring tekst og kanter kan være usynlige i en lille forhåndsvisning i mediebiblioteket og tydelige på en stor skærm. Sammenlign også motiver med hud, tekstur og ensfarvede flader; de reagerer forskelligt på komprimering.

Automatisk komprimering i WordPress kan være et godt ekstra sikkerhedsnet, men den bør ikke være undskyldning for at uploade 20 MB-filer. Det tager tid og lagerplads at behandle originalerne, og backups vokser. Gør filen fornuftig før upload, og lad systemet lave de nødvendige varianter.

Mål resultatet på siden. En mindre fil er kun en forbedring, hvis den rigtige variant bliver sendt til browseren. Kontrollér HTML, cache og CDN, og brug Core Web Vitals som en del af helhedstjekket frem for at fejre filstørrelsen alene.

Husk også metadata. Kamerafiler kan indeholde EXIF-oplysninger som tidspunkt, kameramodel og i nogle tilfælde placering. De fylder ikke nødvendigvis mest, men de kan være irrelevante eller uønskede på en offentlig side. Eksportér webfiler med de oplysninger, der faktisk er brug for, og behold originalen sikkert uden for mediebiblioteket.

Lav til sidst stikprøver efter større tema- eller pluginopdateringer. En ændring kan få siden til at hente originalfilen i stedet for en mindre variant eller springe det moderne format over. Tjek et par repræsentative sider i browserens netværksværktøj, så arbejdsgangen fortsat leverer de filer, I tror den leverer.