Optimer dine iPhone-billeder: Mindre filer, bedre oplevelse

I den digitale tidsalder, hvor apps er en integreret del af vores hverdag, er effektivitet nøglen til en fremragende brugeroplevelse. En af de største faktorer, der påvirker en apps ydeevne og netværksforbrug, er størrelsen på dens billedfiler. Størstedelen af downloadtrafikken i apps består ofte af billeder. Konsekvensen er klar: jo mindre billederne er at downloade, desto bedre netværksoplevelse kan din app tilbyde brugerne. Denne omfattende guide vil give dig praktiske instruktioner til, hvordan du reducerer filstørrelsen på billedfiler og optimerer dem til netværksbrug på mobile enheder.

Ved at implementere strategier for billedoptimering kan du ikke kun forbedre appens hastighed og respons, men også reducere dataforbruget for dine brugere, hvilket er en betydelig fordel, især for dem med begrænsede dataplaner. Lad os dykke ned i de forskellige billedformater og de teknikker, der kan transformere din apps ydeevne.

Forstå billedformaterne: PNG, JPG, AVIF, WebP

Android-apps bruger typisk billeder i et eller flere af følgende filformater: AVIF, PNG, JPG og WebP. Hvert af disse formater har sine egne karakteristika og optimeringsmuligheder. At vælge det rigtige format til det rigtige formål er det første skridt mod effektiv billedoptimering.

AVIF: Den nye standard for effektivitet

Android 12 (API-niveau 31) og nyere versioner understøtter billeder, der bruger AV1 Image File Format (AVIF). AVIF er et containerformat for billeder og billedsekvenser, der er kodet med AV1. Det udnytter indhold, der er kodet med videokompression, hvilket resulterer i en markant forbedring af billedkvaliteten for den samme filstørrelse sammenlignet med ældre billedformater som JPEG. Fordelene ved AVIF er imponerende, da det leverer overlegen kompression uden at gå på kompromis med billedkvaliteten. Hvis du har brug for at vise billeder af høj kvalitet med mindst mulig filstørrelse, er AVIF et fremragende valg, forudsat at din målgruppe bruger nyere Android-versioner.

PNG: Optimering af gennemsigtighed og grafik

PNG-formatet er populært for sin evne til at understøtte gennemsigtighed (alfa-kanal) og for at levere tabsfri kompression, hvilket gør det ideelt til grafik, ikoner, logoer og billeder med skarpe kanter eller store områder af ensfarvet farve. Dog kan PNG-filer hurtigt blive store, især for komplekse billeder eller fotografier. En nøgle til at gøre dine PNG-filer mindre er at reducere antallet af unikke farver, der bruges i hver række af pixels i billedet. Hvis du bruger færre farver, forbedrer du kompressionspotentialet i alle andre trin af processen. Reduktion af antallet af unikke farver gør en stor forskel, da PNG-kompressionens effektivitet delvist afhænger af graden af variation i tilstødende vandrette pixels. Derfor kan reduktion af antallet af unikke farver i hver række af dine PNG-billeder hjælpe med at reducere filstørrelsen.

Når du beslutter, om du vil anvende denne strategi, skal du huske, at reduktion af antallet af unikke farver svarer til at anvende et tabsgivende kodningstrin på billedet. Det er dog muligt, at et kodningsværktøj ikke er den bedste måde at vurdere, hvor alvorlig en tilsyneladende lille fejl er for det menneskelige øje. Derfor bør du udføre dette arbejde manuelt for at sikre den rette balance mellem effektiv kompression og acceptabel billedkvalitet.

Der er to særligt nyttige tilgange, du kan vælge:

Brug af indekserede formater

Ethvert forsøg på farvereduktion bør starte med at forsøge at optimere farverne for at kunne bruge det INDEKSEREDE format til eksport af billedet som PNG. Den INDEKSEREDE farvemodus fungerer ved at vælge de bedste 256 farver og erstatte alle pixelværdier med indekser fra denne farvepalet. Resultatet er en reduktion fra potentielt 16 millioner farver til kun 256 farver – fra 3 (uden gennemsigtighed) eller 4 (med gennemsigtighed) bytes pr. pixel til 1 byte pr. pixel. Denne ændring er et vigtigt første skridt i reduktionen af filstørrelsen.

At repræsentere billedet som et paletbillede hjælper enormt med at forbedre filstørrelsen, så det er værd at undersøge, om de fleste af dine billeder kan konverteres. Naturligvis kan ikke alle billeder gengives præcist med kun 256 farver. For eksempel kan nogle billeder have brug for 257, 310, 512 eller 912 farver for at se korrekte ud. I disse tilfælde kan vektorkvantificering også være nyttigt.

Vektorkvantificering (VQ)

Processen med at skabe et indekseret billede kan mere præcist beskrives som vektorkvantificering (VQ). VQ fungerer som en afrundingsproces for multidimensionelle tal. I denne proces grupperes alle farver i dit billede efter deres lighed. For en given gruppe erstattes alle farver i den gruppe med en enkelt central punktværdi, som minimerer fejlen relateret til farverne i den celle. Resultatet af at anvende VQ på et billede er, at antallet af unikke farver reduceres, og hver gruppe af farver erstattes af en enkelt 'temmelig tæt' farve i visuel kvalitet.

Denne teknik giver dig også mulighed for at definere det maksimale antal unikke farver i dit billede. For eksempel, mens et billede med 16,7 millioner farver (24 bit pr. pixel eller bpp) ser rigt ud, kan en version, der kun tillader 16 unikke farver (3 bpp), vise synlig kvalitetsforringelse, såsom farvebånding i gradienter. Det handler om at finde den rette balance mellem filstørrelse og acceptabel visuel kvalitet for det specifikke billede.

At opsætte et VQ-trin i din pipeline kan hjælpe dig med at få en bedre idé om det faktiske antal unikke farver, dit billede bruger, og hjælpe dig med at reducere dem betydeligt. Der findes flere værktøjer, du kan bruge til at implementere denne teknik.

Optimering af JPG-filer

Hvis du bruger JPG-billeder, er der flere små ændringer, der kan hjælpe dig med at reducere filstørrelsen betydeligt. For eksempel:

• Producer en mindre filstørrelse gennem forskellige kodningsmetoder (uden at påvirke kvaliteten).
• Juster let på kvaliteten for at opnå bedre kompression.

Generelt kan du ved at følge disse strategier opnå filstørrelsesreduktioner på op til 25%. Når du vælger værktøjer, skal du huske, at fotoeksportværktøjer kan indsætte unødvendige metadata i billeder, såsom GPS-information. Forsøg som et minimum at udnytte eksisterende værktøjer til at fjerne disse oplysninger fra dine filer.

WebP: Fremtidens billedformat?

WebP er et nyere billedformat, der understøttes af Android 4.2.1 (API-niveau 17). Dette format tilbyder overlegen tabsfri og tabsgivende kompression for webbilleder. Med WebP kan udviklere skabe mindre og rigere billeder. Tabsfri WebP-billedfiler er i gennemsnit 26% mindre end PNG'er. Disse billedfiler understøtter også gennemsigtighed (kendt som alfa-kanal) til en pris af kun 22% flere bytes.

Tabsgivende WebP-billeder er mellem 25% og 34% mindre end sammenlignelige JPG-billeder med tilsvarende SSIM-kvalitetsindekser. For tilfælde, hvor tabsgivende RGB-kompression er acceptabel, understøtter det tabsgivende WebP-format også gennemsigtighed og producerer typisk filstørrelser, der er 3 gange mindre end PNG.

Med Android Studio kan du konvertere eksisterende statiske GIF- eller BMP-, JPG- eller PNG-billeder til WebP-formatet. Dette gør det nemt at implementere WebP i dine eksisterende projekter.

Valg af det rette billedformat

De forskellige billedformater er velegnede til forskellige typer billeder. JPG og PNG har meget forskellige kompressionsprocesser og producerer ret forskellige resultater. Generelt koger beslutningen mellem PNG og JPG ned til billedets kompleksitet. Et billede med mange små detaljer komprimeres mere effektivt med JPG, mens et billede med ensfarvede bånd komprimeres mere effektivt med PNG.

WebP kan som format understøtte både tabsgivende og tabsfri tilstande, hvilket gør det til en ideel erstatning for både PNG og JPG. Den eneste ting, du skal overveje, er, at det kun har indbygget understøttelse på enheder med Android 4.2.1 (API-niveau 17) eller nyere. Heldigvis opfylder langt de fleste enheder i dag dette krav.

Her er en simpel visualisering, der kan hjælpe dig med at beslutte, hvilket kompressionsskema du skal bruge:

Bestemmelse af optimal billedkvalitet

Der findes flere teknikker, du kan bruge til at opnå den rette balance mellem kompression og billedkvalitet. En teknik bruger skalære værdier og fungerer derfor kun for JPG og WebP. Den anden udnytter Butteraugli-biblioteket og kan bruges med alle billedformater.

Skalære værdier (kun JPG og WebP)

Fordelene ved JPG- og WebP-formaterne kommer fra, at du kan bruge en skalarværdi til at balancere kvaliteten med filstørrelsen. Tricket er at finde ud af, hvad den rette kvalitetsværdi er for billedet. Et for lavt kvalitetsniveau producerer en lille fil, hvor billedkvaliteten går tabt. Et for højt kvalitetsniveau øger filstørrelsen uden at give en mærkbar fordel for brugeren.

Den mest direkte løsning er at vælge en ikke-maksimal værdi og bruge den værdi. Husk dog, at kvalitetsværdien påvirker hvert billede forskelligt. Selvom en kvalitet på f.eks. 75% kan få de fleste billeder til at se godt ud, fungerer det muligvis ikke så godt i nogle tilfælde. Du skal sørge for at teste den valgte maksimale værdi med et repræsentativt udsnit af billeder. Sørg desuden for at udføre alle tests med de originale billeder og ikke de komprimerede versioner.

For store medieapplikationer, der uploader og genudsender millioner af JPG-filer dagligt, er det ikke praktisk at justere hvert element manuelt. Du kan løse denne udfordring ved at specificere flere forskellige kvalitetsniveauer baseret på billedkategorien. Du kan for eksempel indstille 35% som kvalitetsindstilling for miniaturer, da et mindre billede skjuler flere kompressionsartefakter.

Butteraugli: Den psykofysiske tilgang

Butteraugli-projektet er et bibliotek, der bruges til at teste den psykofysiske fejlgrænse for et billede: det punkt, hvor den person, der ser, begynder at bemærke billedets forringelse. Med andre ord forsøger dette projekt at kvantificere forvrængningen af det komprimerede billede.

Butteraugli giver dig mulighed for at definere et mål for den visuelle kvalitet og derefter køre PNG-, JPG-, tabsgivende WebP- og tabsfri WebP-kompressioner. Herefter kan du vælge det billede, der har den bedste balance mellem filstørrelse og Butteraugli-niveau. Det giver dig mulighed for at arbejde ud fra output eller input. Det vil sige, du kan søge efter den laveste kvalitetsindstilling, før brugeren opfatter en mærkbar forvrængning i det resulterende billede. Du kan også iterativt indstille billedforvrængningsniveauer for at finde de tilhørende kvalitetsniveauer. Dette kan føre til en betydelig reduktion i filstørrelsen, ofte omkring 65%, uden at den gennemsnitlige bruger bemærker en kvalitetsforringelse.

Effektiv levering af billeder i flere størrelser

Det er fristende kun at opbevare én enkelt opløsning af et billede på en server. Når en enhed tilgår billedet, sender serveren det i den opløsning og overlader opgaven med nedskalering til enheden. Denne løsning er bekvem for udvikleren, men kan være ubelejlig for brugeren, da den tvinger dem til at downloade langt flere data, end de har brug for.

I stedet bør du gemme flere billedstørrelser og levere den størrelse, der er mest passende for et specifikt brugsscenarie. For eksempel, i tilfælde af et miniaturebillede, vil levering af et ægte miniaturebillede i stedet for at levere og skalere en fuld størrelse version forbruge meget mindre båndbredde. Denne tilgang er nyttig for at opnå en god downloadhastighed og er mindre omkostningsfuld for brugere, der måske bruger målerbaserede eller begrænsede dataplaner. Denne metode får også billedet til at optage mindre plads på enheden og i hovedhukommelsen. I tilfælde af store billeder, som f.eks. 4K-billeder, forhindrer denne tilgang også, at enheden skal ændre størrelsen på billederne, før de uploades.

Implementering af denne tilgang kræver, at du har en backend-billedtjeneste til at levere billeder i forskellige opløsninger med passende caching. Der findes eksisterende tjenester, der kan yde hjælp i forbindelse med denne opgave, f.eks. billedtjenester i skyen.

Skærmdimensioner og opløsninger på mobile enheder

Når vi taler om at levere billeder i den rette størrelse, er det vigtigt at forstå grundlæggende termer omkring mobile skærmdimensioner og skærmopløsninger. Skærmstørrelser refererer til den fysiske størrelse af det område, hvor billeder og videoer vises. Størrelsen af en skærm beskrives normalt ved dens diagonale længde, som er afstanden mellem modsatte hjørner, typisk angivet i tommer. Skærmopløsning henviser til antallet af pixels, en skærm kan vise, angivet som bredde x højde (f.eks. 1920x1080 pixels). Enheder har også en pixel density (PPI - pixels per inch), som påvirker, hvor skarpt et billede vises. At kende disse mål er afgørende for at kunne levere billeder, der passer perfekt til enhedens skærm uden unødvendig skalering, hvilket sikrer optimal visuel kvalitet og minimalt dataforbrug.

Ofte Stillede Spørgsmål (FAQ)

Hvad er billedoptimering i kontekst af mobile apps?

Billedoptimering i mobile apps handler om at reducere filstørrelsen på billeder uden mærkbar forringelse af den visuelle kvalitet. Målet er at minimere den data, der skal downloades, hvilket forbedrer appens ydeevne og sparer brugerens mobildata.

Hvorfor er billedoptimering vigtig for mobile apps?

Det er vigtigt, fordi store billedfiler øger downloadtider, forbruger mere båndbredde og kan føre til en langsom og frustrerende brugeroplevelse. Optimerede billeder sikrer hurtigere indlæsningstider, lavere dataforbrug og en mere flydende app-oplevelse.

Hvilket billedformat er bedst til mobile apps?

Det afhænger af billedets indhold og de ønskede egenskaber. WebP er ofte det bedste all-round valg, da det tilbyder fremragende kompression for både tabsfri og tabsgivende billeder samt gennemsigtighed. PNG er bedst til grafik med gennemsigtighed, og JPG er ideelt til fotografier. AVIF er et lovende format for nyere Android-enheder.

Kan jeg automatisere billedkompression?

Ja, der findes mange værktøjer og tjenester, der kan automatisere billedkompression som en del af din udviklings- eller deployeringspipeline. Dette inkluderer online kompressionsværktøjer, CLI-værktøjer og backend-billedtjenester.

Påvirker billedkompression altid billedkvaliteten?

Ikke nødvendigvis. Tabsfri kompression (som i PNG eller tabsfri WebP) reducerer filstørrelsen uden at fjerne data, så billedkvaliteten bevares 100%. Tabsgivende kompression (som i JPG eller tabsgivende WebP/AVIF) fjerner data, hvilket kan påvirke kvaliteten, men formålet er at gøre det på en måde, der er svær at opfatte for det menneskelige øje.

Hvad er indekserede PNG'er?

Indekserede PNG'er er en type PNG, hvor billedets farver er begrænset til en palet på typisk 256 farver. I stedet for at gemme fulde farveværdier for hver pixel, gemmes kun et indeks til farvepaletten, hvilket reducerer filstørrelsen markant.

Hvad er Vektorkvantificering?

Vektorkvantificering er en teknik, der bruges til at reducere antallet af unikke farver i et billede ved at gruppere lignende farver og erstatte dem med en enkelt 'repræsentativ' farve. Dette hjælper med at opnå mindre filstørrelser, især for PNG-billeder.

Hvad er Butteraugli?

Butteraugli er et bibliotek, der måler den psykofysiske fejlgrænse i et billede. Det hjælper med at kvantificere billedforvrængning og finde den laveste mulige kvalitetsindstilling, før en bruger mærkbart kan se en forringelse af billedkvaliteten.

Hvorfor skal jeg levere billeder i flere størrelser til mobile enheder?

At levere billeder i flere størrelser sikrer, at hver enhed kun downloader den data, den har brug for. En telefon med en lille skærm behøver ikke at downloade et 4K-billede, hvilket sparer data, reducerer indlæsningstider og forbedrer ydeevnen, især på ældre enheder eller ved langsomme netværksforbindelser.

Hvis du vil læse andre artikler, der ligner Optimer dine iPhone-billeder: Mindre filer, bedre oplevelse, kan du besøge kategorien Mobil.