online marketing by River Online

FÅ EN GRATIS ANALYSE

Gratis Analyse af dit SEO, AdWords & Facebook. 100% uforpligtende!

Få en gratis 360 Analyse!

SEO billedoptimering – Brugbare tips til optimering af dine billeder

Vi oplever ofte at der ikke er styr på optimeringen af billeder, da man forventer at ens CMS-system klarer det hele, men det er oftest ikke tilfældet. I artiklen giver vi dig nogle brugbare tips til hvordan du kan optimere dine billeder. 

Billedoptimering

Det er faktisk ikke særlig svært at optimere billederne til hjemmesiden, men det kræver hårdt arbejde og et godt overblik over hvordan siden er bygget. Når optimeringen er gennemført, kræver det ”bare” disciplinen at sikre sig at de nye billeder der bruges på siden, har været igennem proceduren herunder. 

Først skal du vide hvilke billeder der bruges på dit site.

I de fleste CMS findes der et mediebibliotek, som kan vise overblikket over hvilke billeder der bruges på siden. Det er også en mulighed at bruge et værktøj til at skanne siden igennem, og lave en liste af billeder, samt hvilke sider de bruges på.

Ingen af disse muligheder, vil fortælle dig om billedet er større end den størrelse det bruges i på hjemmesiden. Vi har set eksempler på at et billede på 1900x1200px blev brugt på siden i størrelsen 190x120px, og for at illustrere hvorfor det ikke er 10 gange for stort, skal vi lige lave et regnestykke.

Et billede er opbygget af Pixels (forkortet px) og hver pixel skal hentes ned på den besøgendes computer, for at de kan se billedet. Et billede på 1900px i bredden og 1200px i højden fylder derfor:
1900 x 1200 = 2.280.000 pixels

Antager vi at det billede der vises på siden, er 190 x 120 pixels, vil det faktiske behov være:
190 x 120 = 22.800 pixels

Hvis vi kigger på de to tal, så viser det sig at det billede der var 10 gange for bredt, og 10 gange for højt, rent faktisk er 100 gange større end det billede vi rent faktisk viser til den besøgende.

Omskrevet til en besparelse, så kan man ved en simpel skalering spare 99% af det antal pixels der skal hentes ned på den besøgendes computer.

Vælg det rigtige billedformat

Det er ikke lige meget hvilket billedformat der bruges til at gemme dine filer i.

Den mest brugte billedformatet på internettet er JPG. Nogle gange er det nødvendigt at bruge PNG, hvis billedet skal have gennemsigtige områder.

Tidligere blev formater som TIFF, BMP og GIF brugt til forskellige formål, men med udviklingen indenfor JavaScript og CSS 3 er det ikke længere nødvendigt at gemme billedanimationer som GIF, hvilket også frarådes, da filformatet er meget ressourcekrævende.

Vælger man at gemme et billede, som ikke anvender gennemsigtighed, som PNG, vil billedet naturligvis fylde mere, da der ligger informationer i hver enkelt pixel i forhold til hvor gennemsigtig den skal være, hvilket er unødvendigt.

Brug kun filformatet PNG, hvis det er absolut nødvendigt at billedet er gennemsigtigt. Du kan med fordel bruge optimeringsværktøjet https://tinypng.com

Et alternativ til PNG, er billedformatet SVG, som er forkortelse for ”Scalable Vector Graphics” og er udviklet af World Wode Web Consortium (W3C) Du kan læse mere om SVG via nedenstående links:

https://da.wikipedia.org/wiki/Scalable_Vector_Graphics

https://www.w3.org/TR/SVG2/

Hvor meget kan billeder egentlig optimeres?

Nogle gange er det nødvendigt at have store billeder på en hjemmeside. Et billeder siger mere end 1000 ord. 

Dog er der sjældent brug for et billede der er bredere end 2000 pixels og 300 pixels i højden.

Jeg vil herunder illustrere hvor meget et billede kan optimeres, ved at vise dig et eksempel på en optimering jeg for nylig har illustreret over for en kunde.

På kundens side blev et billede på 2400 x 1000 pixels brugt på hjemmesiden i størrelsen 800 x 333 pixels

Det originale billede fylder 2.400.000 pixels og havde en vægt på 4.489 KB (4,5 MB)

Ved at skalere billedet ned i størrelsen, som det skulle bruges i, endte vi op med et billede med 266.400 pixels og en vægt på ”bare” 457 KB

Det billede der blev brugt på siden, var af filtypen PNG, men anvendte ikke gennemsigtighed, så ved at gemme billedet som JPG, fremfor det ressourcekrævende PNG, kom vi helt ned på en vægt på 68 KB

Selvom vi er kommet helt ned fra 4.489 KB til blot 68 KB, så kan vi komme endnu længere ned i vægt.

Til det formål bruger jeg optimeringsværktøjet https://imagecompressor.com, som kan fjerne en masse informationer, som er nytteløse i forhold til at vise billedet på internettet. Det kan være GPS koordinater, hvilken blænde og andre tekniske elementer der gælder for billedet.

Hvis disse meta data bliver fjernet fra billedet, ender vi med et billede, som kommer helt ned på 42 KB

Hvis billedet skulle være af typen PNG, ville det, ud over skaleringen, også kunne optimeres.

Herunder vises resultatet af billedoptimeringen.

Billede Beskrivelse Vægt Besparelse Besparelse i %
 Originalt billede PNG    2.400 x 1.000 px    4.489 kb    
 Skaleret billede PNG    800 x 333 px   457 kb  4.032 kb 89,82 %
 Formateret til JPG    800 x 333 px   68 kb  4.421 kb 98,49 %
 Optimeret JPG    800 x 333 px   42 kb  4.447 kb 99,06 %
 Optimeret PNG    800 x 333 px  130 kb  4.359 kb 97,10 %

 

Mobiloptimerede billeder

I lyset af de seneste udmeldinger fra Google, hvor der kommer mere og mere fokus på oplevelsen og indlæsningshastigheden på mobile enheder, er det blevet mere og mere vigtigt at det CMS siden er bygget i kan håndtere billeder i forskellige størrelser, alt efter hvilken enhed og opløsning hjemmesiden vises i.

Har du brug for hjælp eller sparing til optimering af hastigheden på din hjemmeside kan du bestille en 360° analyse herunder.

 

 

⇩ Få en gratis Google Ads, SEO & Facebook analyse samt et tilbud ⇩

  1. (*)
    Ugyldig indtastning
  2. (*)
    Ugyldig indtastning
  3. ⇦ Få en SEO Analyse
    Ugyldig indtastning
  4. ⇦ Få en AdWords Analyse
    Ugyldig indtastning
  5. ⇦ Få en Facebook Analyse
    Ugyldig indtastning

   Læs mere om 360 Analysen her

                                                                  

 

Copyright © 2018 River Online ApS - CVR 36489987