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:
Hvor meget kan billeder optimeres?
Vi oplever ofte at billeder kan optimeres med op til 90%. I disse tilfælde skyldes det anvendelse af et forkert filformat. Et korrekt filformat kan oftest optimeres med 30-50%
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.
Hvis det er muligt bør du sigte efter at bruge det nyeste WebP format, men HUSK altid at have et Fall-back billede, da ikke alle browsere understøtter formatet endnu.
Læs mere om WebP her: https://developers.google.com/speed/webp
Har du brug for hjælp eller sparing til optimering af hastigheden på din hjemmeside kan du bestille en 360° analyse herunder.
