Skip to main content

Billeder på mobilen: Information Overload

Billeder på mobilen: Information Overload

Billeder på mobilen: Information Overload

Hvis du er ligesom resten af os, har du prøvet alt, hvad du syntes, du kunne, for at få din site til at være übervenlig på mobilen. Responsivt design, lækre skrifttyper, simple og visuelle billeder, der bare … fylder!

Lad os sige det rent ud: Den gennemsnitlige mobilvenlige side derude på nettet fylder 2,2 MB. To komma to Megabyte! Og gæt selv: 68 % af al den uoverskuelige mængde data er billeder. Intet under, at det tager brugeren en halv eftermiddag at loade din side på mobilnetværket.

Hvad endnu værre er, at Google også hader lange svartider, så ikke alene giver du dine brugere en dårlig oplevelse. Du skader også din organiske trafik. Alarm!

Men hvad kan man gøre ved det? For der er ingen, der gider kigge på en grå side uden billeder… Vores råd: Skær ind til benet. Helt ind!

Vi giver dig fire gode tips, der gør din side hurtigere, højere og stærkere end en olympist springhest!

Vær kritisk. Meget kritisk!

Det er virkeligt historien om mange bække små. Hvis et enkelt billede fylder ca. 100 kB, og du har 20 billeder, så nedlægger du din side med 2 MB rent billede. Av! Lær at stille dig selv et lille, men meget vigtigt spørgsmål: ”Har jeg virkelig brug for det billede?”

Vi kan alle blive fristet af at lægge 15 fotos op på en produktside, der viser vores fantastiske varer fra alle vinkler, retninger og afstande. Og så lige toppe det af med 3-4 livsstilsbilleder. Problemet?

Det er unødvendigt, og det fylder!

Tænk på brugeren: Hvad er den mindst mulige mængde information, man behøver for at føle, man kender og elsker produktet? Det er det antal billeder, du burde gå efter.

Undgå plakatstørrelser

Din mobiltelefon er under 9 cm bred. Hvorfor skal dit mobilvenlige billede så være stort nok til at blive printet ud på en plakat?

En almindelig iPhone 7 Plus er noget af det største, man kan støde på, og den er 158 mm i højden og 78 mm i bredden. Dit billede skal ikke være større end det!

Der findes mange værktøjer derude, der kan fortælle, hvor stort dit billede er, men det simpleste er at tjekke det i photoshop og skalere det ned til den rette størrelse. Iphone 7 Plus har en opløsning på 401 ppi, hvilket er højt. Det betyder, at skarpheden er helt enorm, men også at billeder optimeret til denne opløsning fylder. Du kan sagtens nøjes med 96 ppi, og i nogle tilfælde 72 ppi. Det giver en billedstørrelse på 223x396, hvis du skal fylde skærmen ud. Nu fylder dit billede næsten ingenting!

Bliv ekstra nørdet med filtyper og kvalitet

Kender du forskellen på JPEG, PNG-8, PNG-24 og GIF? Sådan for alvor?

Det betyder rent faktisk noget!

JPEG

JPEG er meget ofte webmasterens darling, da det kan komprimere dine billeder ganske meget, uden det bliver synligt på kvaliteten. Formatet er i 16-bit, hvilket betyder, at du har millioner af farver at vælge imellem.

Derudover kan du også vælge at komprimere det fra 0 % (ekstremt komprimeret) til 100 % (ikke komprimeret). For de fleste billeder vil en 60-70 % komprimering give en markant reduceret filstørrelse, uden du kan se det på billedet.

PNG

PNG fungerer lidt anderledes end JPEG. Du kan ikke komprimere det ved at nedsætte kvaliteten, men du kan til gengæld gøre dele af billedet gennemsigtigt. Det gør det perfekt til visse illustrationer og logoer, som du gerne vil have til at blende ind med baggrunden.

PNG-8 er den helt simple 8-bit billedfil med op til 256 farver. Du har ikke det store spektrum at lege med, og billeder bliver hurtigt grynede i det. Hvis du til gengæld har et billede med en simpel farvestruktur, kan du sagtens bruge PNG-8. Du kan sætte det ned til kun to farver, men så skal du heller ikke regne med den store detalje.

PNG-24 har samme farvemuligheder som JPEG, og du har alle regnbuens farver at lege med. Hvis billedkvaliteten er vigtigere for dig end filstørrelsen, kan dette format være det helt rigtige valg for dig. Du skal bare vide, at jo flere farver, du bruge, jo større bliver filstørrelsen. Og dine brugere godt nå kan blive utålmodige, mens de venter på, at dit site tager sig sammen til at loade!

GIF

GIF skal du holde dig fra, med mindre du vil lave meget simple billeder eller animationer.

Formatet har efterhånden over 30 år på bagen, og det kan ses i kvaliteten og komprimeringen. Det støtter, ligesom PNG-8 kun op til 256 farver, men komprimeringen er ikke nær så effektiv, så de fylder oftest meget mere, end de behøver.

Formatet understøtter også gennemsigtighed, men eftersom du også kan bruge PNG til dette, er det en bedre løsning.

Væk med overflødige informationer

Du vil ganske enkelt blive temmelig overrasket over mængden af information, der kan ligge om et billede, som ingen nogensinde vil få at se.

Hvad med f.eks. dato for, hvornår det er blevet taget? Eksponeringstid? Kameraproducent?

Alle disse ting er i bedste fald ligegyldige, eller i værste fald noget du slet ikke har lyst til at dele med andre. Ved at bruge et komprimeringsværktøj kan du fjerne de fleste informationer fra billedet, inden du lægger det op.

Det sparer både plads og sikrer dig mod at give alt for meget væk til hvem der nu skulle kigge på…

(0) Comments