tilbage
scroll ned

Sådan undgår du,
at dit website bliver langsomt af Mikkel Belchuke d. 2. februar 2018

Hvornår skal jeg anvende JPEG frem for SVG? Hvad er SVG egentligt? Og hvilket format skal jeg uploade min video i?

Det er bare nogle af de spørgsmål jeg ofte får, når det kommer til valg af filformat.

Og mit korte svar er altid; Er det et fritlagt billede? - anvend PNG. Er det højtopløselige fotografier? - brug JPEG. Er det ikoner, logoer eller lignende? - anvend SVG!

Hvorfor?

Disse filformater fylder ikke særlig meget, og både JPEG og PNG kan komprimeres, uden du skal gå på kompromis med kvaliteten - hvilket er enormt vigtigt når vi snakker website, hvor hastigheden er altafgørende.

Personligt forlader jeg et site med mere end 3 sek. loadtid, og det tror jeg rigtig mange andre også gør. Jeg er heller ikke bleg for at indrømme, at jeg er endnu mindre tålmodig på mobilen end på computer. Og det er jeg nok ikke alene om ;)

Men hvad er SVG?

Kort sagt er SVG et fil-dokument med en kodestreng, som aflæses af din browser.

SVG er skalerbare filer i høj kvalitet, der samtidig ikke fylder særlig meget, hvilket gør filformatet særdeles velegnet til websites.

Hvis din browser ikke kan aflæse en SVG-fil, ville den åbne et dokument med en kode-streng. Men SVG er heldigvis understøttet af langt de fleste browser. (Tjek her)

Vil man lave SVG-filer fra bunden af, kræver det dog en god portion matematisk forståelse, da billedet opbygges af matematiske ligninger med kurver og vinkler. Og en forståelse for at kode.

Det betyder at, hvor JEPG og PNG er baseret på pixels, er SVG lavet på vektorgrafik. Vektorgrafik kan skaleres til den ønskede størrelse, uden at gå på kompromis med kvaliteten og hvor størrelsen af filen forbliver den samme.

For 5 år siden var SVG billeder ofte meget kantet, men man er blevet så god til at lave SVG-filer, at de i dag er meget mere bløde i kanterne og dermed (efter min mening) lækre at se på.

De fleste webdesignere kan dog lave SVG-filer i Adobe Illustrator!

Anvend aldrig GIF, TIF eller lignende formater

Aldrig!

Grunden er bl.a., at GIF-filer kun har 256 farver, mens JPEG-filer for eksempel har 16,8 millioner farver og dermed langt flere farvenuancer. Et billede gemt som en GIF-fil, vil derfor ofte komme til at se uskarpt ud. Og da flere og flere smartphones tager billeder i 4K, er vores krav til billedkvaliteten også blevet større!

Vil du have fotografier på dit website, der skal kunne ses på højtopløselige skærme, bør du derfor anvende JPEG.

Undgå også TIF, da dette filformat har en alt for høj opløsning, hvilket gør fil størrelsen alt for stor og dermed websitet langsomt.

Gem animationer som SVG-filer
Det er desuden en fejl at tro at animationer skal gemmes som GIF-filer. Ønsker du animationer på dit website, kan man faktisk lave SVG animationer eller blot benytte sig af en video. Jeg vil aldrig anbefale dig at anvende GIF-filer!

SVG er perfekt til animationer

Brug den rigtige DPI

For at sikre et hurtigt website, er det vigtigt at billederne ikke fylder for meget - et godt skridt på vejen, er at bruge den rigtige DPI (dots per inch)

På tryk anvendes 300 DPI men på web er 72 DPI rigeligt. Et billede med en DPI på 300 fylder enormt meget, hvilket er unødvendigt da du på web ikke kan se forskel på et billede på 300 og 72 DPI.

Vælg derfor altid 72 DPI - dette kan eksporteres i Adobe Photoshop.

Hvad er DPI og Pixel?

Pixel er en forkortelse for "picture element" og er en af de mange punkter der tilsammen udgør et billede.

DPI måler hvor store disse pixels - altså punkter/prikker - er hvis billedet bliver printet.

Ændrer du derfor på billedets størrelse, ændrer du altså ikke på antallet af pixels, men kun på størrelsen af hver pixel, hvis billedet printes. Dette resulterer ofte i mere uskarpe billeder på print, men gør ingen forskel på web.

Og hvad så med videoer?

Her vil jeg foreslå at uploade dine videoer til YouTube eller Vimeo. Disse er lette at implementere og gør det hurtigt at få videoen op at køre på websitet.

Ønsker du ikke at have videoen på de sociale medier, skal du anvende mp4-filformatet.

Mp4 er det filformat, der er bedst understøttet, med høj kvalitet og med et komprimeringsforhold på 4MB pr minut.

Tænk device ind i valget af filstørrelse

Det er helt klart lækkert at sidde på et website med fuld HD billeder – men jo flere af den slags billeder du har på dit website, jo langsommere bliver dit website også. Du kan dog sagtens komprimere disse billeder, så det ikke kan ses med det blotte øje, men kan ses på fil størrelsen.

Jo mindre billedet fylder, jo kortere bliver loadtiden.

Men overvej om der er grund til at vise et billede på 2000x2000 pixels på en 404 pixel stor iPhone 6? Du kan sagtens vælge forskellige filstørrelser, alt efter om websitet vises på en computer, tablet eller smartphone – altså alt efter skærmens størrelse.

En fuld HD video giver måske god mening når du sidder derhjemme foran din store computerskærm, men ikke når du sidder i toget med din iPhone 6.

Jeg vil til hver en tid foretrække en hurtig loadtid frem for en flot video. Jeg siger ikke man helt skal undgå videoer, men overvej hvornår og på hvilke enheder videoen er til gavn for brugeren.