Det er næsten almen viden at (store) billeder gør din hjemmeside så langsom at de besøgende mister tålmodigheden. Men med nogle få indstillinger kan du faktisk få en hjemmeside med store billeder, der er hurtig nok. Så kan du komme et skridt tættere på flere hits og i sidste ende flere kunder.
Hvorfor er hastighed vigtigt?
Jeg behøver måske ikke uddybe det, for du kender det jo selv. Det er ret irriterende at lande på en hjemmeside der ikke kommer frem med det samme, eller på anden måde ikke fungerer. Og så klikker du væk med det samme – for der er jo tre andre hjemmesider med selv samme indhold. Så hvorfor skulle du blive hængende her …?
Jeg gør det også selv. Jeg skal være meget interesseret i lige netop dén hjemmeside for at kunne mønstre tålmodighed nok til at blive hængende i særlig lang tid.
Men billeder er jo også vigtigt
Hjemmesiden skal være hurtig, men den skal også være flot og illustrativ. Derfor er billeder og grafik bare ultimativt vigtigt, hvis du vil gøre besøget til at god oplevelse for dine potentielle kunder.
Der er en løsning
Løsningen er, kort fortalt, at få billederne til at fylde færre Kb uden at det går ud over kvaliteten – og hastigheden. Men der er selvfølgelig lidt arbejde ved det. Først skal vi skille billeder fra grafik, for de skal behandles på forskellige måder.
Billeder skal omformateres til webp-format.
Grafik skal omformateres til svg-format.
Det findes der selvfølgelig plugins til.
NØRD ALARM
Inden jeg kommer til løsningen, vil jeg lige nørde med lidt baggrundsviden om de to formater. Webp-formatet til billeder er forholdsvis nyt. Det blev udviklet af Google i 2010 og har været understøttet af Chrome og Firefox næsten fra begyndelsen. Men det er først i 2020 at Edge, Safari og IOS er kommet med på vognen. Derfor er det pludselig blevet meget interessant for hjemmesider der gerne vil have mange/store billeder uden at det går ud over hastigheden. Hvis du vil læse mere om webp, kan du kigge forbi Wikipedia.
SVG er det der hedder et vektorbaseret billedformat, og er ingen nyhed (det blev udviklet i ’99). Den store fordel med SVG er den store fleksibilitet uden at miste noget på kvalitet eller hastighed. Fordi det er vektorbaseret, vil billedet/grafikken altid stå fuldstændig skarpt – uanset hvilken størrelse det har på skærmen. Modsætningen er rastor-billeder, som er de almindeligt kendte billeder. De bliver kantede, slørede og pixelerede når de forstørres. Det gør SVG ikke. Altid perfekt kvalitet, uanset størrelse. Lækkert!
Webp bruges til fotografier på hjemmesiden, SVG bruges til grafiske elementer.
Webp er i skrivende stund nået til version 2.3.0 og SVG Support er i version 2.3.18
Tilbage til løsningen
Hvordan får du lavet dine billeder om til Webp og SVG?
Du kan tage mit lynkursus. Det koster kun din mailadresse.
Se mere om det her: https://webnom.dk/courses/tilfoej-billeder-som-webp-eller-svg
Du kan også selv gennemgå disse 4 simple trin.
Trin 1: Tag en indledende hastighedstest – evt. på https://tools.pingdom.com
Tag et screenshot af resultatet eller skriv det ned, så du har det til den kontrollerende test.
Trin 2: Installer det eller de plugins du skal bruge.
I kurset fokuserer jeg på https://da.wordpress.org/plugins/webp-converter-for-media til Webp og https://da.wordpress.org/plugins/svg-support til SVG-filer.
Det gør jeg fordi de er ret hurtige at komme i gang med, og de er begge højt bedømt af andre brugere og bliver opdateret ofte.
Trin 3: Der er ikke så mange indstillinger, og du kan næsten nøjes med standardindstillingerne. Hvis du ønsker en gennemgang og en lidt dybere forklaring, kan du se videoen herover.
Trin 4: Tag en kontroltest af hastigheden. Jeg vil vædde på at den er mindre. Jeg skar over et sekund af min loadspeed – og jeg har ikke nogle store billeder på min side. Hvis du har store billeder, hvor meget kunne du så “skære af”.
Hvis du oplever problemer, kan du længere nede skrive en kommentar. Så vil jeg svare så godt jeg kan.
Få besked når der kommer nye blogindlæg, kurser eller guides
