Sådan optimerer du billeder og video til din hjemmeside

Kort om optimering af billeder og video

Et problem jeg ofte ser, når en virksomhed kontakter mig vedr. hjemmesideoptimering, er at hjemmesiden er fyldt med billeder eller video, der er alt for tunge til brug på en hjemmeside, og det påvirker dens ydeevne på flere områder.

Optimering af billeder og video der skal bruges på en hjemmeside er afgørende for at sikre hurtig indlæsningstid og forbedret brugeroplevelse, og det har også betydning for placeringer i søgemaskiner – kort sagt det går ud over konverteringen.

Billedets størrelse (højde og bredde i pixels), komprimering og valg af format har indflydelse på, hvor hurtigt et billede indlæses. I denne artikel får du nogle tips til, hvordan du selv kan optimere billeder og videoer til din hjemmeside, og dermed spare penge på hjemmesideoptimering.

Når Webkilde udvikler en ny hjemmeside, er alt optimeret fra start, og billeder tilpasses automatisk i korrekt størrelse ved upload. Med en serviceaftale medfølger også et premium plugin, der automatisk komprimerer og konverterer billeder til det bedste format. Så har du en “Webkilde-hjemmeside”, kan du derfor se bort fra det meste i denne artikel.

Vælg det rigtige format til optimering af billeder

Valget af det rette filformat til dine billeder og videoer kan have en betydelig effekt på indlæsningstiden, og det er derfor vigtigt at vælge det rigtige filformat til en given brugssituation. Nedenfor kan du læse lidt om de mest anvendte billedformater til brug på en hjemmeside, og hver af deres fordele og ulemper.

JPEG:

• Fordele: Velegnet til fotos. Det giver en god balance mellem kvalitet og filstørrelse. Understøttet af alle browsere.
• Ulemper: Ingen gennemsigtighed. Komprimeringen kan resultere i tab af kvalitet, hvilket kan være synligt ved høje komprimeringsniveauer.

PNG:

• Fordele: Understøtter gennemsigtighed, god til grafik med skarpe kanter og har tabsfri komprimering, hvilket gør det velegnet til grafik, logoer og ikoner.
• Ulemper: Større filstørrelser sammenlignet med JPEG, hvilket kan føre til langsommere indlæsningstid.

WebP:

• Fordele: Et moderne web-optimeret format, med en effektiv komprimering, der giver mindre filstørrelser end både JPEG og PNG, samtidig med at kvaliteten bevares. Understøtter både gennemsigtighed og animationer.
• Ulemper: Ikke alle ældre browsere understøtter WebP, hvilket kan kræve et fallback-format.

SVG: Velegnet til vektorgrafik såsom logoer, ikoner og illustrationer. Filformatet er skalerbart uden tab af kvalitet, hvilket gør det ideelt til responsive webdesigns.

• Fordele: Skalerbarhed helt uden kvalitetstab, lille filstørrelse for simpel grafik, og understøtter gennemsigtighed. Velegnet til vektorgrafik såsom logoer, ikoner og illustrationer.
• Ulemper: SVG er ikke velegnet til fotos eller komplekse billeder.

For video anbefales MP4 som standardformat, da det giver god kvalitet med relativt lav filstørrelse og understøttes bredt af browsere. Et andet moderne format er WebM, som ofte har endnu mindre filstørrelse og er velegnet til visse situationer, men understøttes ikke af alle browsere.

Brug den rigtige størrelse på billedet

Valg af den rigtige størrelse på billederne er også essentielt for at sikre en hurtig indlæsningstid. Er billedet for stort kan det gøre din hjemmeside langsom, mens for små billeder kan give et utydeligt udseende.

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 pixels. Mindre billeder som miniaturer kan være 150×150 pixels, mens billeder til indholdsområder ofte kan være 800 pixels brede. 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 bliver i dag oftest programmeret, så de automatisk tilpasser billeder, til den størrelse der skal bruges, og samtidig vises forskellige størrelser alt efter hvilken enhed der benyttes. Men er det ikke tilfældet for din hjemmeside, så må du tilpasse størrelsen inden billedet uploades.

Komprimer billeder for at reducere indlæsningstiden yderligere

Billedkomprimering er en effektiv metode til at reducere filstørrelsen og få hurtigere indlæsningstider, hvilket forbedrer brugeroplevelsen og hjælper med SEO. Der er forskellige måder at komprimere billedet på, og de fleste billedebehandlingsprogrammer gør det muligt at slå destruktiv filformindskelse til og så angive en procentvis kvalitet man ønsker. Det er forskelligt fra billede til billede hvornår en komprimering resulterer i et synligt tab af kvalitet, så nogle gange må man prøve sig lidt frem, oftest er man dog på den sikre side over ca. 85%.

Du kan også bruge en online service som f.eks. TinyPng eller Squoosh. Her trækker man blot billedet ind i et afmærket område og bagefter kan man downloade det optimerede billede. Squoosh har nogle mere avancerede indstillingsmuligheder, hvis man vil eksperimentere lidt med at få den mest optimale komprimering.

Nedenfor ses eksempler på komprimering via begge værktøjer, men da Webkildes webside er udviklet til også at konvertere til WebP format og automatisk tilpasning til skærmstørrelse, vil der sandsynligvis være yderligere reducering i størrelsen.

Balancen mellem kvalitet og filstørrelse

Det er vigtigt at finde en balance mellem kvalitet og filstørrelse. Overkomprimering og for små billede dimensioner kan føre til synligt tab af billedkvalitet. For eksempel anbefales det at bruge en maks. komprimering på 70-80 % for JPEG-billeder for 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.

Optimer video til brug på en hjemmeside

Videofiler kan være store og kræve meget båndbredde, hvilket påvirker indlæsningstiden på din hjemmeside og afspilningen af videoen hos brugeren, især hvis den afspilles direkte fra dit webhotel uden automatisk justering af kvaliteten. Derfor er det vigtigt også at optimere dine videoer for at sikre en god brugeroplevelse. Her er nogle værktøjer og teknikker til at optimere videoer til webbrug.

Når du optimerer videoer til en hjemmeside, bør du fokusere på både filstørrelse, format og opløsning for at opnå de bedste resultater.

HandBrake er et populært og gratis værktøj til at komprimere videoer, og det kan installeres på både Windows og Mac.

Du kan downloade HandBrake her: https://handbrake.fr

Med denne app kan du justere opløsning og bitrate samt andre indstillinger eller vælge en passende forudindstilling, som f.eks. “Fast 1080p30” for hurtig streaming og lav filstørrelse.

Som med komprimering af billeder, så vil kvaliteten blive for dårlig hvis du komprimerer videoen for meget, mens for lidt komprimering resulterer i store filer, der kan påvirke indlæsningstiden negativt. Eksperimentér med forskellige indstillinger for at finde den rette balance, der passer til din hjemmesides behov.

Automatiserede værktøjer til billedoptimering

For at gøre optimeringsprocessen lettere kan du bruge værktøjer til automatisk at komprimere og optimere dine billeder. Hvis du ikke allerede har det, så få lavet et hjemmesidedesign hvor CMS delen selv tilpasser billedets dimmentioner til optimal visning. Dette sparer tid og sikrer, at alle dine medier er optimeret uden manuel indsats.

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å mest ud af billedoptimeringen af dissed plugins anbefales det at invistere i premium versionen (følger gratis med Webkildes serviceaftaler).

Du kan også bruge en CDN som ofte sørger for at levere billedet i det mest optimale format og dimmention, og endelig kan du sikre at din hjemmeside understøtter lazy loading, så billederne først hentes når de skal til at blive vist og ikke med det samme hjemmesiden hentes.

Bonus: Tilføj alternative tekster

Når du er i gang med at optimere dine billeder, så kan du passende sikre at de har nogle gode og sigende alternative tekster. I WordPress er der et indtastningsfelt til dette som hedder “Alt tekst”, når du vælger billedet i mediemanageren.

Alternative tekster er nyttige af hensyn til at øge hjemmesidens tilgængelighed, og nogle SEO-eksperter mener også det spiller en rolle for SEO. Ved at bruge beskrivende og relevante alt-tekster samt filnavne kan du hjælpe folk der bruger skærmlæsere, og søgemaskiner med at forstå indholdet af dine medier og dermed forbedre din hjemmesides synlighed.