Masterclass: Sådan optimerer du dine billeder til din webshop

Optimering af billeder er en vigtig del af ethvert websteds ydeevne. Ingen ønsker at vente på, at et langsomt websted skal indlæses færdigt. Du har få sekunder til at fange dine besøgendes opmærksomhed, og hvis de første 5 sekunder går med at indlæse store billeder, har mange af dine potentielle kunder allerede forladt din webshop og er på vej over til din konkurrent.

Det primære mål med formateringen af dine billeder er at finde en balance mellem den mindste filstørrelse og en acceptabel kvalitet. De to primære ting, du skal overveje, er filformatet og den komprimeringstype, du bruger.

Ved at vælge den rigtige kombination af de to kan du reducere billedstørrelsen med op til 5 gange. Men det kræver, at du eksperimenterer med et par billeder og filformater for at finde ud af, hvad der fungerer bedst på din webshop.

Vi har i denne to-delte serie samlet vores bedste anbefalinger til billedoptimering. I første del svarer vi på:

• Hvad er billedoptimering?
• Hvorfor er der vigtigt at optimere sine billeder?
• Hvordan optimerer du dine billeder?
• Hvilket format skal du bruge?

Vil du vide mere omkring, hvordan optimering af billeder gør for brugervenligheden? I vores komplette guide til brugervenligt webshopdesign gennemgår vi best practices for en brugervenlig webshop.

Hvad er billedoptimering?

Billedoptimering er processen med at reducere filstørrelsen af billeder uden at gå på kompromis med kvaliteten. Du har måske set websteder med billeder, der tager evigheder om at indlæse, og som gør det svært for brugerne at navigere hurtigt på webstedet. Det skyldes, at de ikke bruger billedkomprimeringsteknikker, som fx størrelsesændring eller komprimering. Billedkomprimering reducerer filstørrelsen ved at fjerne unødvendige data (fx metadata) fra billedfilen.

Hvorfor skal jeg bekymre mig om billedoptimering?

Billeder er en afgørende del af moderne websteder og webshops. De tilføjer farve, dybde og mening til dit indhold. Samtidig gør de det lettere for besøgende at forstå, hvad de læser.

Dog udgør de også en stor procentdel af den samlede størrelse af et websteds sider – og det betyder længere indlæsningstider. Google anbefaler, at alle billeder skal være mindre end 100 KB. Det kan virke småt, men det kan hurtigt løbe op, hvis du har hundredvis af billeder på hver side.

Ingen kan lide at vente på, at siderne indlæses, men mange webshopejere er ikke klar over, hvor vigtig en sides loadhastighed er for konverteringer og SEO-rangeringer. Ifølge Kissmetrics kan en forsinkelse på 1 sekund i en sides indlæsningstid reducere konverteringer med 7 %. Det lyder ikke af meget, men over tid kan det betyde tusindvis af tabte kroner på din webshop.

Den gode nyhed er, at du ikke behøver at være webudvikler eller designer for at forbedre din hjemmesides ydeevne. Med de rigtige værktøjer kan alle gøre deres webshop mere effektiv.

Hvordan optimerer jeg mine billeder?

Når du uploader billeder til din webshop, bør du altid ændre størrelsen på dem, så de passer til designet på din webshop. Hvis du ikke tilpasser størrelsen på dine billeder korrekt, kan det føre til en dårlig brugeroplevelse.

Hvis du fx har et produktbillede på din hjemmeside, der er for stort, vil det være langsomt at indlæse og skabe problemer for de af dine besøgende, der har en langsommere internetforbindelse. Hvis du har et billede, der er for lille, og som skal forstørres, vil det igen tage længere tid at indlæse. Samtidigt vil det også se pixeleret ud, når det forstørres.

Så hvordan ændrer du størrelsen på billeder korrekt?

Den mest almindelige måde at ændre et billedes størrelse er vha. et fotoredigeringsprogram, som Photoshop eller GIMP. Dette kan dog være tidskrævende og vanskeligt for en person, der ikke har nogen erfaring med disse programmer.

Et bedre alternativ er at bruge en af de mange gratis og online tjenester, som giver dig mulighed for at uploade dit billede og derefter automatisk ændre størrelsen på det for dig inden for få sekunder. Et godt eksempel er feks. Canva. I Canva har du et hav af muligheder for at lave grafik til sociale medier, visitkort, præsentationer, banners og selvfølgelig også tilpasse størrelsen på dine billeder. Der er et væld af gode skabeloner, hvis du ikke er så kreativ, men du kan også vælge at sammensætte billeder, tekst osv., præcis som du ønsker. Vi har skrevet et blogindlæg om Canva, der tager dig igennem alle de vigtigste funktioner.

Hvilket billedformat skal jeg benytte?

Når du skal vælge det rigtige format til dine billeder, har du mange muligheder. De mest almindelige er JPG, PNG og WebP.

JPG er et af det mest almindelige billedformater på internettet. Det er så almindeligt at man ofte ser det steder hvor et andet format ville være et bedre valg. JPG er nemlig et tabsgivende format, hvilket betyder, at billedets kvalitet vil blive reduceret, når det komprimeres. Det gør at en JPG fil kan blive meget lille, med det betyder, at billedet vil blive pixeleret eller sløret, når du ændrer størrelsen eller gør selve filen mindre. JPG er velegnet at benytte til komplekse billeder med mange farver, såsom fotos.

PNG er et ikke tabsgivende, også kaldet “lossless”, format. Det betyder at, i modsætning til JPG formatet, så mister et PNG ikke billedkvalitet, hvis det komprimeres eller tilpasse i størrelsen. En anden fordel er at PNG tillader transparente baggrunde. Dette gør PNG særligt velegnet til billeder med solide farver og skarpe kanter, såsom logoer og knapper på din webshop, da de ofte skal placeres ovenpå andre elementer på din shop. Til gengæld er PNG ikke særligt velegnet til mere detaljerede billeder, såsom fotos, da dens “lossless” komprimering gør at filen bliver meget større sammenlignet med JPG formatet.

Den nye dreng i klassen er WebP, som er et nyt billedformat, der er udviklet af Google. Den kombinerer de bedste elementer fra både JPG og PNG. Den kan altså bruges til komplekse billeder og med transparent baggrund. Samtidig hævder de, at det kan reducere filstørrelsen med op til 35 % sammenlignet med PNG og JPG, mens det stadig bevarer sin høje billedkvalitet. Det har dog ikke været alle browsere, der har understøttet dette format indtil nu og man har været begrænset til at benytte det til Chrome browsere. Indenfor de sidste par år er de andre browsere dog kommet med på vognen. Så hvis du ønsker at optimere dit websted med henblik på hastighed og SEO, er det en oplagt mulighed at bruge WebP-filer lige nu. Der findes flere “WebP converters” på internettet, der nemt kan konverterer dine filer til WebP.

Nu er første del af “Sådan optimerer du dine billeder til din webshop” færdig. For at opsummerer, så er det ekstremt vigtigt at du er opmærksom på load-hastigheden på dine sider. Et vigtigt element her er at du optimerer størrelsen på dine filer ved at sikre at du benytter de rette formater. Kort fortalt, så er det oplagt at du benytter WebP til stortset alle dine billeder. Men det er selvfølgelig ikke altid muligt. I disse tilfælde er det vigtigt at du bruger JPG formatet til komplekse billeder, såsom fotos, og PNG formatet til grafiske elementer med solide farver og transparent baggrund.

Tak for at du læste med! I anden del af vores blogindlæg kigger vi nærmere på, hvordan du bedst komprimerer dine billedfiler, samt hvilke komprimeringsværktøjer, der er bedst.