INDEXED Webbureau

Få en hurtigere side med optimering af billeder

Optimering af hjemmeside er en afgørende del af en hurtig hjemmeside

Hvorfor optimere?

Optimér dine billeder, så de fylder mindre og få bedre rankings. En vigtig del af din hjemmeside er, at den kører hurtigt, og at brugerne får en god og hurtig oplevelse, når de bevæger sig rundt på siden. Mange brugere danner sig et overblik på et splitsekund og kan nemt gå tilbage og vælge næste resultat i listen.

Gå ikke glip af det allerbedste trick til optimering, som du finder længere nede

Derfor er en del af optimeringen at kunne levere sine billeder hurtigst muligt. Et billede taget med et moderne digitalt kamera fylder måske 10mb afhængigt af størrelse og kvalitet. Sådan et billede kan tage adskellige sekunder at hente ned på en hurtig forbindelse og meget længere med en langsom forbindelse. Desto mindre et billede fylder, desto hurtigere kan det derfor vises til brugeren, som vil få en bedre oplevelse.

Optimering af hjemmeside Få en hurtigere hjemmeside, som opnår bedre placeringer
Ring på +45 28 43 42 39

Komprimering og optimering af billederne

Det er forbavsende let at komprimere billeder ordentlig, så de fylder mindst muligt, og du kan med to værktøjer gøre det selv. Det første værktøj, som du skal bruge, er et billedebehandlingsprogram, som kan ændre størrelsen på dine billeder.

Typisk kan et billede have en størrelse på 2048×1536, som svarer til 3.1 megapixel, og en desktop skærm kan have en opløsning på 1600x1200 pixel. Her giver det ingen mening, at billedet er større end skærmen. Derfor skal billedet laves mindre, så det passer bedre. Hvis billeder skal passe på en blog post, kan det være, at 800x600 er fint, og derved har du allerede sparet meget på størrelsen.

Det andet og næste værktøj, som vi kan anbefale, er kraken.io , som er et online værktøj til at genkomprimere billeder. Typisk, når man tager et billede, ligger der en masse ekstra information såsom kamerainfo, lokation osv. Disse data bliver smidt ud, og så optimerer den selve billedet, så det fylder mindst muligt uden at kvaliten forringes.

Dette trick spare yderligere 50% på størrelsen på et typisk billede.

Hjemmeside eller webshop Leder du efter nogen som kan hjælpe med jeres online forretning?
Ring på +45 28 43 42 39

Supertricket med responsive billeder

Det er ikke alle brugere, som sidder på store desktop skærme og for en mobil med en skærm på 320x900 pixel og en langsom netforbindele, så kan et billede på selv 800x600 virke stort og langtsomt at hente ned. Tricket her er at definere flere størrelser af samme billede, og så lade browseren bestemme, hvilket ét der passer bedst.

I stedet for et almindeligt billede tag laves følgende med flere versioner af samme billede via srcset:

<img srcset="billede/large.jpg 1920w, billede/medium.jpg 960w, billede/small.jpg 480w" src="quilt_2/detail/medium.jpg" alt="billede">

På en super elegant måde har du derfor angivet hvilke billeder, der skal angives under hvilken opløsning, hvilket sikrer, at din side også hentes super hurtigt på en mobiltelefon.

Konklusion omkring optimering af billeder

Med tre tricks til optimering er du godt på vej til en hurtigere hjemmeside. Sæt dine billeder til den maksimale størrelse, som du skal bruge. Optimer dem igennem Kraken og få den minimale fysiske størrelse. Sæt srcset på dine billeder og få browseren til at vise den optimale størrelse.

Læs mere omkring responsive billeder
Læs mere om responsivt design som i høj grad kan optimere dit design til visning på desktop sammentidigt med mobile enheder.

100+
Projekter gennemført
til tiden
60+
Kunder har vi haft
glæde af at hjælpe
450
udviklingstimer til
rådighed hver måned
55
WordPress
løsninger udført