Billederne på en hjemmeside skal optimeres korrekt

En af de hyppigste fejl, jeg ser på hjemmesider, er forkert brug og tilpasning af billeder. Det gælder både, når jeg selv besøger hjemmesider, og når virksomheder henvender sig til Webkilde, fordi de har lagt mærke til, at deres hjemmeside virker langsom.

På de fleste hjemmesider udgør billeder en stor del af det samlede indhold. Hvis de ikke er tilpasset korrekt, kan de fylde unødigt meget, hvilket resulterer i langsomme sideindlæsninger, dårlig brugeroplevelse, dårligere placeringer i søgemaskiner og i sidste ende lavere konvertering.

Det værste er, at denne type fejl nemt kunne være undgået, uden at man behøver have en større teknisk indsigt.

Typiske fejl ved brug af billeder på hjemmesider

Problemerne opstår typisk fordi billedhåndtering ikke er tænkt ind som en fast del af indholdsarbejdet, eller at man forventer, at hjemmesiden automatisk foretager nødvendig billedoptimering – hvilket langt hen ad vejen faktisk er muligt, men mere om det senere.

Fejl, der direkte påvirker hjemmesidens hastighed:

• Billeder uploades direkte fra kamera eller mobil i fuld opløsning
• Billeder er langt større end den størrelse, de vises i (selv om man har husket at justere størrelsen)
• Brug af forkert eller forældet billedformat (Spoiler: Brug næsten altid WebP)
• Samme billede serveres til alle skærmstørrelser (et hjemmesideproblem)
• Manglende eller forkert komprimering af billeder
• Lazy loading bruges forkert eller slet ikke

Andre fejl, der går ud over brugeroplevelsen:

• Billedet er komprimeret mere end nødvendigt eller er for små og ser uskarpt ud
• Manglende alt-tekster (Et problem for tilgængelighed og SEO)
• Billeder bruges uden at tilføre reel værdi på hjemmesiden
• Billeder med vigtige detaljer vises i en lille størrelse uden det kan åbnes i fuld størrelse
• Manglende billedtekst. Nogle billeder kan have gavn af en forklarende tekst til billedet.
• Billeder, der samlet set fremstår uprofessionelle eller inkonsekvente i stil og kvalitet

Vælg det rigtige billedformat til en hjemmeside

Indtil for nylig har den generelle anbefaling været at bruge JPEG til fotos og PNG til logoer, grafik og billeder med transparent baggrund. I dag er vil jeg dog anbefale WebP og SVG som primære billedformater til en hjemmeside.

Det betyder dog ikke, at du skal skynde dig at konvertere alle eksisterende billeder. JPEG og PNG er fortsat brugbare formater, og i mange tilfælde kan et WordPress-plugin sørge for at servere billeder i WebP, selv om de oprindelige filer er gemt som JPEG eller PNG.

WebP – standardformatet til billeder på hjemmesider

WebP er i dag det format, der bør bruges til langt de fleste billeder på en hjemmeside. Formatet er udviklet specifikt til webbrug og giver markant mindre filer end ældre formater, uden at billedkvaliteten lider.

WebP egner sig særligt godt til:

• Fotografiske billeder
• Baggrundsbilleder
• Billeder med transparent baggrund
• Et animeret billede (skal bruges sparsomt, hvis overhovedet)

Ved introduktionen af WebP skulle man huske JPEG som fallback for de browsere der ikke understøttede det nye format. I dag understøttes formatet af alle moderne browsere, og man kan derfor fint bruge det alene uden ballback til et ældre format.

SVG – til logoer, ikoner og grafik

SVG er et vektorbaseret format og bruges til grafik, hvor skarphed og skalerbarhed er vigtigere end fotografisk detaljegrad. Det gør SVG ideelt til logoer, ikoner og enkle illustrationer.

Da SVG er skalerbart uden kvalitetstab, fungerer formatet perfekt på både små og store skærme og bidrager ofte med meget små filstørrelser.

Vær opmærksom på at WordPress i skrivende stund, stadig ikke tillader upload af SVG som standard, og det kræver derfor at hjemmesidens tema eller et plugin aktivt åbner muligheden.

AVIF og JPEG XL – et kig mod fremtiden

AVIF og JPEG XL er nyere billedformater, der begge har som mål at levere endnu mindre filer og højere billedkvalitet end WebP. Teknisk set er de stærke og interessante, men understøttelsen er ikke tilstrækkelig i dag.

Min forventning er at AVIF med tiden bliver den nye standard til hjemmesider, men der er vi ikke endnu.

Brug den rigtige størrelse på billedet

Valg af den rigtige billedstørrelse er essentielt for at sikre en hurtig indlæsningstid. Er et billede for stort, kan det gøre hjemmesiden unødigt langsom, mens for små billeder kan fremstå utydelige og give et mindre professionelt udtryk.

Det afgørende er hvor stort billedet er i forhold til den plads det skal optage i sidens layout.

Højde og bredde i pixels: Bestem hvilken størrelse billedet skal have ud fra det område, det skal bruges i. Hvis billedet vises på tværs af hele skærmen som et hero-billede, skal det typisk være bredt, f.eks. 1920 – 2100 pixels. Billeder til indholdsområder og blogs kan ofte kan være omkring 800 – 1200 pixels brede. og mindre billeder som fx. vises i en sidebar eller på små kort kan være fra 300 – 600 pixels (Se disse tal som meget generelle eksempler og ikke som en fast rettesnor).

Brug dit foretrukne redigeringsværktøjværktøjer f.eks. Adobe Photoshop, GIMP eller en online service som imageresizer.com til at tilpasse dimensionerne korrekt.

Moderne hjemmesider er i dag ofte bygget, så de automatisk håndterer billedstørrelser og serverer forskellige versioner afhængigt af skærmstørrelse og enhed. Det kan dog stadig give mening at foretage en manuel justering inden billedet uploades, både for øget kontrol og for ikke at belaste hjemmesiden ved upload af de meget store filer som moderne kamera i dag producerer.

Komprimer billeder for at reducere indlæsningstiden yderligere

Billedkomprimering er en effektiv måde at reducere filstørrelsen på og dermed forkorte indlæsningstiden.

Der findes forskellige måder at komprimere billeder på. De fleste billedredigeringsprogrammer giver mulighed for at anvende destruktiv komprimering, hvor man angiver et ønsket kvalitetsniveau. Hvornår komprimering medfører et synligt kvalitetstab, varierer fra billede til billede, og nogle gange må man prøve sig lidt frem. Holder du dig inden for et kvalitetsniveau på omkring 85 – 90%, så er du typisk på den sikre side.

Det er ikke nødvendigt med et tungt billedbehandlingsprogram som fx. PhotoShop, du kan sagtens bruge en online service som f.eks. TinyPng eller Squoosh. Her uploader du blot billedet og kan efterfølgende downloade en komprimeret version. Squoosh tilbyder flere avancerede indstillinger, mens TinyPng er mere enkel at bruge.

Nedenfor ses eksempler på komprimering via begge værktøjer. Da Webkildes hjemmeside samtidig er opsat til at konvertere billeder til WebP og automatisk tilpasse dem til forskellige skærmstørrelser, vil den faktiske filstørrelse i praksis ofte blive reduceret yderligere.

Balancen mellem kvalitet og filstørrelse

Overkomprimering og for små billede dimensioner kan føre til synligt tab af i billedets kvalitet, så det handler om at opnå en god balance mellem kvalitet og filstørrelse. Prøv forskellige komprimeringsniveauer, indtil du opnår en passende balance mellem kvalitet og størrelse. På den måde sikrer du, at billederne ser godt ud, samtidig med at de ikke belaster din hjemmesides ydeevne.

Andre faktorer, der påvirker billeders indlæsningstid

Ud over valg af billedformat, korrekt billedstørrelse og passende komprimering er der en række andre tekniske forhold, som har betydning for, hvor hurtigt billeder indlæses på en hjemmeside. Disse faktorer ligger dog typisk uden for det, man som redaktør eller indholdsansvarlig selv har direkte kontrol over.

Det gælder blandt andet håndtering af responsive billeder, hvor hjemmesiden automatisk serverer forskellige billedstørrelser afhængigt af skærm og enhed. Ligeledes spiller lazy loading en rolle, da billeder først indlæses, når de er ved at komme ind i brugerens synsfelt.

Derudover har hostingmiljø, caching, brug af CDN og den generelle tekniske opsætning af hjemmesiden også indflydelse på, hvor hurtigt billeder leveres til brugeren.

Test om billederne på din hjemmeside er optimeret

Er du i tvivl om, hvorvidt billederne på din hjemmeside er optimeret korrekt, kan du lave en hurtig test med PageSpeed Insights. Du finder værktøjet her: https://pagespeed.web.dev

Indtast den side på din hjemmeside, du vil teste. PageSpeed viser mange andre informationer end lige billedstørrelse, og de er også er relevante for en sides hastighed, men det ligger uden for emnet i denne artikel. Når resultatet er klar, skal du derfor scrolle ned til punktet “Optimer billedlevering”.

Hvis der er stor forskel på Ressourcestørrelse og Estimeret besparelse, har du sandsynligvis et problem, der bør gøres noget ved. Er besparelsen kun omkring 30 KiB pr. billede, er det oftest uden større betydning.

Eksemplet nedenfor stammer fra en side, jeg tilfældigt besøgte tidligere i dag. Her blev der indlæst billeder på i alt 70 MB, selv om siden kun indeholdt 9 billeder. Flere af billederne fyldte op mod 14 MB stykket. Billederne var så tunge, at jeg bemærkede det med det samme – og det var på en hurtig bredbåndsforbindelse. Havde det været på en mobiltelefon med 4G, havde jeg med sikkerhed forladt den, inden den var færdig med at indlæse.

Automatisk billedoptimering

Ovenstående kan måske lyde som meget arbejde, men det er vigtigt det bliver gjort. Heldigvis kan meget af det dog automatiseres, og måske gør din hjemmeside det allerede.

Når jeg laver hjemmesider for virksomheder, der selv står for vedligehold af indhold, herunder billeder, bruger jeg typisk ekstra tid på at sikre, at billeder automatisk konverteres til WebP, og at uploadede billeder passer billederne ind i indholdet, uanset om de vises på mobil eller på en stor computerskærm.

Hvis du bruger et CMS som WordPress, kan du drage fordel af plugins til automatisk optimering. Nogle populære plugins inkluderer:

• ShortPixel
• EWWW Image Optimizer
• Smush

For at få det fulde udbytte af disse værktøjer anbefales det som regel at anvende en premium-version. De kan både reducere billedstørrelsen og konvertere billeder til WebP-format.

Derudover kan brug af et CDN bidrage til, at billeder leveres i et optimalt format og i passende størrelser. Sammen med korrekt opsat lazy loading betyder det, at billeder først indlæses, når de er ved at blive vist, frem for alle på én gang ved indlæsning af siden.

Plugins kan fint supplere en hjemmesides tekniske opsætning, men de kan ikke rette op på en dårligt udviklet hjemmeside. I bedste fald fungerer de som et plaster på såret.

Andre forhold, der har betydning for gode billeder på en hjemmeside

Som jeg i starten var inde på, så er det ikke alle problemer med billeder handler om filstørrelse og indlæsningstid. Mange fejl opstår i selve brugen af billederne.

Billeder bør have et klart formål. Billeder, der ikke tilfører reel værdi, kan virke forstyrrende og gøre indholdet sværere at afkode. Ligeledes kan billeder med vigtige detaljer give en dårlig oplevelse, hvis de vises i for lille størrelse uden mulighed for at åbne dem i fuld visning.

I nogle tilfælde kan en kort billedtekst også være relevant. Billedtekster kan hjælpe med at forklare, hvad billedet viser, eller hvad læseren bør lægge mærke til – især ved diagrammer, screenshots og forklarende grafik.

Derudover kan billeder med varierende kvalitet og udtryk få en hjemmeside til at fremstå mindre professionel, selv om teknikken er i orden.

Husk alt-teksterne

Alt-tekster bruges til at beskrive billeder for brugere, der ikke kan se dem, fx ved brug af skærmlæsere. De er derfor vigtige for tilgængelighed og er for visse virksomheder i Danmark også en del af gældende tilgængelighedskrav.

Alt-tekster kan desuden give søgemaskiner ekstra kontekst om indholdet, men bør altid skrives for mennesker – ikke for SEO.

En god alt-tekst er kort, præcis og relevant for sammenhængen.